使用变量 self 与 this 之间的区别

Question

我一直在努力使用 .bind() 方法和变量“self = this”来使用这些“this”。在得到两个不同的结果时，我错过了一个概念。案例如下：

// Defining a callback class to use after retrieving data
var Callback = (function(){
    // UPDATED!! Local vbles
    var template_to_use, html_element, self;

    function Callback(){
        self = this,
        template_to_use = null,
        html_element = null;
    }

    var p = Callback.prototype;
    p.set_template = function(template_funct){
        self.template_to_use = template_funct;
    };

    p.set_html_element = function(html_element){
        self.html_element = html_element;
    };

    p.use_callback     = function(data){                                                              
        $(self.html_element).append(self.template_to_use(data));
    };

    return Callback;
})();

这个函数的用法如下：

// Setup callback 1 to call after getting the data
var callback_1 = new Callback();
callback_1.set_template(use_templ_1);
callback_1.set_html_element("#list");

// Get list data
api_list.get_data(callback_1.use_callback);


// Setup callback 2 to call after getting more data
var callback_2 = new Callback();
callback_2.set_template(use_templ_2);
callback_2.set_html_element("#object");

// Get object data
api_object.get_data(callback_2.use_callback);

执行了两个 ajax 调用，一旦 get_data() 函数完成，它们将调用我传递给它们的回调函数。我遇到的问题是，在执行这些函数后，回调总是提到 html_element = "#object" 和相应的模板 "use_templ_2"。

如果我使用“this”和 .bind 函数而不是“self”vble，结果是预期的。

// Get object data
api_object.get_data(callback_2.use_callback.bind(callback_2));

我错过了什么？这可能是一个错误概念，因为即使我不是 js 新手，我也是对语言本身的新理解。

Answer 1

如果您询问self 和this 之间的区别，那么self 用作对原始this 的引用。这意味着即使this 的内容发生了变化，那么self 仍然包含以前的内容。

不知道这是否足够清楚。如果不看看What underlies this JavaScript idiom: var self = this? 或Difference between self and this in javascript and when to use either of them。

同时尽量避免使用self 作为全局变量，因为它现在被浏览器用来做一些事情。抱歉，我不记得是为了什么 - 如果有人可以编辑此信息，那就太棒了。

Answer 2

小心，self 将始终引用最后一个实例化的对象：

var c1 = new Callback();
var c2 = new Callback(); // overrides previous self

那么下面这行实际上设置了c2.html_element：

c1.set_html_element(html_element);

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Closures

也就是说，替换 this 在您的情况下完全没用。