继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

JavaScript 中的 this

一俢
关注TA
已关注
手记 82
粉丝 12
获赞 135

在很多面向对象的语言中(Java、C#),this 关键字的含义非常明确,就是代表当前对象,通常在编译期间就确定下来(编译期绑定);而在 JavaScript 中,this 是动态绑定的,这样导致 this 非常灵活多变,给我们带来非常多的不便。

外部函数调用

外部函数中调用this时,它将指向全局对象,浏览器中即为 window:

function whatIsThis() {    console.log(this);
}
whatIsThis();

会打印出Window对象

内部函数调用

内部函数中调用this时,它和外部函数调用一样,指向了全局对象:

var obj = {    a: 0,    fn: function(){        var whatIsThis = function(){            console.log(this);
        }
        
        whatIsThis();
    }
};
obj.fn();

会打印出Window对象

对象的方法调用

对象的方法中调用this时,它将指向这个对象:

var obj = {    a: 0,    whatIsThis: function(){        console.log(this);
    }
};
obj.whatIsThis();

会打印出当前Object对象

构造函数内部调用

构造函数的对象调用this时,它将指向这个对象:

function Class() {    console.log(this);
}var obj = new Class();

使用 call 和 apply 调用

箭头函数中的 this

在 ES6 语法中 ()=>this 箭头函数中的 this 就很特殊了,箭头函数没有一个自己的 this,但当你在内部使用了 this,常规的局部作用域准则就起作用了,它会指向最近一层作用域内的 this

var obj = {    a: 0,    whatIsThis: function() {        console.log(this);        
        var fn = () => console.log(this);
        
    }
};
obj.whatIsThis();

两个都会打印出当前Object对象

总结

上面所说的可能很晕,记住这一点:用对象调用的方法中使用的this会指向该对象;直接调用的函数中使用的this会指向全局对象。

this 是否可以被完全修改(或者把一个对象全部赋值给它)?

昨天面试的时候,突然有一个自称初学者的应聘同学问了一个问题,this是否能给它赋上另外一个对象呢?我当时就傻了,在实际操作中很少去做这件事情,将方法内部的this增加一个属性倒是没有太大问题,如果试图全部修改它,这种事情恐怕很少做这种操作。当然我当时的回答是:“好像有点矛盾,很可能 this 本身是有一些属性是只读的”。

于是我回来做了一个实验,将各种情况的 this 都赋上另外一个对象,结果是:Uncaught ReferenceError: Invalid left-hand side in assignment 。看起来的确是不行的,细想一下也是能够理解的:

  • 如果自己能够将自己变成一个其它的对象,但是另外那个对象又没有修改自己的能力,这岂不是自相矛盾;

  • 如果另外一个对象的确能修改自己,这样一来岂不是进入了无限被修改的循环中。





打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP