一篇文章搞懂this指向问题

先上结论:

1.元素绑定事件,方法中的this是当前操作的元素

2.方法名前面是否有点,有点,点前面是谁this就是谁,没有this是window(严格模式会有问题)

3.构造函数执行,方法体中的this是当前类的一个实例

再来举例:

   第一种元素绑定事件的情况大家应该都比较好理解,就不举例了。

事例1:

var fullName = 'language';
var obj = {
    fullName: 'javascript',
    prop: {
        getFullName: function() {
            return this.fullName;
        }
    }
}
console.log(obj.prop.getFullName()); 
// 方法名前面有点,所以this指向obj.prop,所以this.obj.prop => obj.prop.fullName => undefined
var test = obj.prop.getFullName;
console.log(test());
// 方法名前面没有点,所以this指向window,所以this.fullName => window.fullName => language

事例2:

var name = 'window';
var Tom = {
    name: "Tom",
    show: function() {
        console.log(this.name); 
        // 第四步:这里this指向window,this.name => window.name => window
    },
    wait: function() {
        var fun = this.show; // 第二步:这里this指向Tom,this.show => Tom.show
        fun(); // => 第三步:方法名前面没有点,所以this指向window
    }
}
Tom.wait(); // 第一步:方法名前面有点,所以this指向Tom

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值