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

kit*_*lku 7 javascript jquery

我一直在努力使用.bind()方法使用这些"this"并使用变量"self = 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;
})();
Run Code Online (Sandbox Code Playgroud)

该功能的用法如下:

// 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);
Run Code Online (Sandbox Code Playgroud)

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

如果我使用"this"和.bind函数而不是"self"vble,结果就是预期的结果.

// Get object data
api_object.get_data(callback_2.use_callback.bind(callback_2));
Run Code Online (Sandbox Code Playgroud)

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

Dro*_*out 9

如果您询问self和之间的区别this,则self用作原始参考this.这意味着即使内容this正在改变,那么self仍然包含前一个.

不知道这是否足够清楚.如果没有看看这个JavaScript成语的基础:var self = this?或者javascript中的self和this之间的区别以及何时使用它们中的任何一个.

还要尽量避免使用self全局变量,因为它现在被浏览器用于某些东西.对不起,我不记得是什么 - 如果有人可以编辑这个信息那就太棒了.

  • 您可以使用`window.self`(当前窗口)来比较例如`window.top`.它与使用名为`self`的局部变量没有冲突,因为它具有更高的优先级. (2认同)

小智 3

请小心,self将始终引用最后一个实例化的对象:

var c1 = new Callback();
var c2 = new Callback(); // overrides previous self
Run Code Online (Sandbox Code Playgroud)

然后下面的行实际设置c2.html_element

c1.set_html_element(html_element);
Run Code Online (Sandbox Code Playgroud)

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

也就是说,更换this对于你的情况来说是完全没有用的。