记一次被js中的this坑的事情

2019独角兽企业重金招聘Python工程师标准>>>

今天，在搞一个很小的功能的时候，被this给小搞了一下！！！在此记录下来，以防止下次再犯错了。。。

------------------------邪恶的分割线--------------------------------------

原本还以为自己对this已经懂的差不多了，还是太自大了。废话不说，直接看场景

// html

<input type="button" value="button" id="testButton"/>

//js
jQuery(function () {

    var test = {
        init: function () {
            // _.bindAll(this);
            console.log(this);
            $('#testButton').click(this.doTest);
        },
        doTest:function(){
            console.log(this);
            alert('xxx');
        }


    };

    test.init();
    return test;


});

首先看初始化的是 console.log(this)的结果：

这个是由于我在初始化的是调用的是 test.init()，所以这个时候的this指定的是test这个对象。

然后我们点击下按钮之后，再看看 这个时候doTest函数里面的this是什么：

我们发现：这个时候的this是指向的input框了。

当我们在初始化的是时候，这样：

test.init();
 test.doTest();

这个时候的this都应该是test这个对象了；

--------------------------------邪恶的分割线---------------------------------

小结：对于this：是根据上下文的变化的，始终指向被调用该对象的。

------------------------------邪恶的分割线---------------------------------------------

其实，出现这个问题是由于我之前一直会使用一个工具类来绑定this对象的，没错，就是underscore这个工具类。

当我们使用underscore的bindAll方法之后，this就会被绑定上下文；

_.bindAll(this);

jQuery(function () {

    var test = {
        init: function () {
             _.bindAll(this);
            console.log(this);
            $('#testButton').click(this.doTest);
        },
        doTest:function(){
            console.log(this);
        }


    };
    test.init();
    test.doTest();
    return test;


});

这个时候，页面初始化的时候：

点击input的时候：

this还是被绑定在test对象上。

转载于:https://my.oschina.net/bosscheng/blog/129754