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

今天,在搞一个很小的功能的时候,被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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值