如何访问使用Javascript中的对象工厂创建的对象范围中的方法

Question

我很难在JS中围绕变量作用域。有没有类似于下面的例子访问使用对象工厂创建的对象的实例变量的方法？

function Renderer(id, options) { 
    var id = id; 
    var options = options; 

    return { 
     render: function(selector) { 
      $(selector).each(function(index) { 
       this.renderOptions(); //This does not reference the Renderer, but the html element selected by jQuery. 
      }); 
     }, 
     renderOptions: function() { 
      console.log(this.options); 
     } 
    } 
} 

var myRenderer = new Renderer('test', [1, 2, 3, 5, 8, 13]); 

Answer 1

你只需要保持一个命名引用您的对象，如this被重新定义的每一个方法调用，通常是指向内回调错误的上下文：

var instance = { 
    render: function(selector) { 
     $(selector).each(function(index) { 
      instance.renderOptions(); 
     }); 
    }, 
    ... 
} 
return instance; 

Answer 2

修改后的代码

function Renderer(id, options) { 
    var id = id; 
    var options = options; 

    return { 
     render: function(selector) { 
      var self = this; 
      $(selector).each(function(index) { 
       self.renderOptions(); // here this is a reference of dom element. 
      }); 
     }, 
     renderOptions: function() { 
      console.log(this.options); 
     } 
    } 
} 

Answer 3

由于var options...在Renderer的范围内，您可以简单地使用options里面的renderOptions功能。

您还需要创建一个对this的引用，如其他海报所述。

function Renderer(id, options) { 
    var id = id; 
    var options = options; 

    return { 
     render: function(selector) { 
      var self = this; 
      $(selector).each(function(index) { 
       self.renderOptions(); 
      }); 
     }, 
     renderOptions: function() { 
      console.log(options); 
     } 
    } 
} 

而且，如果我正确地读这段代码的意图，你可能会想对元素的引用传递到renderOptions功能：

function Renderer(id, options) { 
    var id = id; 
    var options = options; 

    return { 
     render: function(selector) { 
      var self = this; 
      $(selector).each(function(index) { 
       self.renderOptions(this); 
      }); 
     }, 
     renderOptions: function(ele) { 
      $(ele).css(options); // or whatever you plan to do. 
     } 
    } 
}