javascript - 如何访问使用 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.
        }
    }
}