引用外部对象的 JavaScript 作用域

2024-02-29

基本上,我使用一个名为的元类框架Joose http://joose.it对于 Javascript,它允许我使用更优雅的类语法 - 但我不知道如何从类声明的更深层次方法中引用对象的范围。我还使用 require.js 进行依赖管理...

这是一个类定义示例:

   define([
      'jquery',
      'handlebars',
   ], function($, Handlebars){

      var MyClass = Class("MyClass", {

         //inheritance         
         isa: SuperClass,

         //instance vars
         has: {

            hello:{
               is: 'r',
               init: 'Hi There!',
            },

            someVarToBeSetUsingAjax:{
               is: 'rw',
               init: false,
            },
         },

         //methods
         methods: {

            init: function () {

               var self = this;
               self.getAjaxVar();

            },

            getAjaxVar: function() {

               var self = this;

               //HOW CAN I REFERENCE 'self' THROUGHOUT MY OBJECT?

               $.get('ajax/test.html', function(response) {
                 self.someVarToBeSetUsingAjax = response.value;
               });
            },

            //lots more methods...

         }
    });

   return MyClass;

});

好的,所以我的问题是 - 在 AJAX 函数中我必须编写 var self = this 才能将我的对象放入 AJAX 调用的范围 - 没问题。但是,我发现自己对类声明中的几乎每个方法都这样做!如何以干净、高效的方式在所有方法中引用 self?我知道你可以通过设置参数来使用 AJAX 中的作用域,假设它不仅仅是 AJAX,还有其他将作用域关闭到外部的函数。

Thanks.


每次嵌套函数时,你都必须考虑this。但是如果你不嵌套函数,或者该函数不使用this你不需要考虑它。

        init: function () {
           var self = this;
           self.getAjaxVar();
        },

所以在这种情况下没有必要。这是完全相同的:

        init: function () {
           this.getAjaxVar();
        },

但在这儿:

        getAjaxVar: function() {
           var self = this;

           $.get('ajax/test.html', function(response) {
             self.someVarToBeSetUsingAjax = response.value;
           });
        },

您创建了一个内部函数,并且需要对原始值的引用this,所以你必须别名this to self使其易于访问。

没有办法修复this班级各处的价值观。


也就是说,你确实有一些选择。

Function.prototype.bind()可以帮助。

var func = function() { return this.name };
var obj = { name: 'Bob' };
var boundFunc = func.bind(obj);
boundFunc(); // 'Bob'

bind将返回一个新函数this始终设置为特定对象。

So:

        getAjaxVar: function() {
           $.get('ajax/test.html', function(response) {
             this.someVarToBeSetUsingAjax = response.value;
           }.bind(this));
        },

请注意,并非所有浏览器都支持此功能,您可能需要旧浏览器的填充程序。

或者只是习惯self = this.


我也想对 CoffeeScript 表示一点点的认可,因为它支持在运行时不改变上下文的函数声明。

obj = {
  name: "bob"
  sayHello: ->
    doSomeAjax({
      success: =>
        alert "successfully made " + this.name + " say hello!"
    })
}

obj.sayHello()

->使功能正常。但粗箭头=>相反,将保留this函数内部和函数外部。它在实例方法中的回调中非常方便。当编译为 JS 时,它基本上做了一个self = this您的别名,使用self每次在内部函数内引用this。它非常光滑。

但在普通 JS 中,最常见的模式就是self = this, 坚持下去。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

引用外部对象的 JavaScript 作用域 的相关文章