如何訪問使用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. 
     } 
    } 
}