相信“this”的指向是很多前端程序员的一块心病,因为this它的指向总是千变万化,JavaScript中的this指向在不同的环境中,指向的对象总是各不相同的。
毫不夸张地说,如果不能理解它的含义,大部分的开发任务都是无法完成,但是实际上,关于this指向的问题,只需要记住最核心的话:哪一个对象调用了这个函数,函数内的this就指向哪个对象。并且除了这句话以外,还有一句话希望大家记住this永远指向一个对象。
而this的难点其实就是我们不容找到它到底指向哪一个值,因为它是一个动态的量
var zhi = 'a';
function Li() {
console.log(this.zhi);
}
var obj ={
zhi: 'b',
L: Li()
}
obj.L; //a
Li(); //a

以上的两个调用,得到的结果都是a,这是为什么呢?var zhi = 'b';
function Li() {
console.log(this.zhi);
}
var obj ={
Li: function(){console.log(this.zhi);},
zhi: 'a'
}
obj.Li(); //a
Li(); //b

我们把函数放入obj这个量里,发现出现的值就是在变量内定义的值了,这到底是为什么呢?
其实这还是因为指向的问题,我们把函数放在了全局环境,那么他的this就是指向全局的值,而我们放在obj里this就是指向obj里的值,所以他们的值才是不一样的,而我们第一种呢?Li调用的函数在全局内,所以我们的值就是前面定义的a,那么肯定有人会问了,为什么我把函数在obj里运行结果还是a呢?
这个还是要看指向的,这就是一个误区了,虽然我这个obj.L调用的Li实在obj内,但是我们实际上这个函数是放在外面的,所以它的this还是指向的全局环境,所以this.zhi相当于是全局.zhi而不是我们认为的obj.zhi。其实就相当于是这两的都是在全局环境下调用LI这个函数,而下面的那个例子,直接把函数放在了obj里执行,这样的话他的环境就是obj了,所以调用的时候就是我们的obj内的值了。
是不是还感觉比较绕呢?
下面我们上一下解释图,更加直观一些。this指向地址
我们的指向并不简单的赋值,而是地址的指向,读取值不是直接读取,而是先读取这个值的地址然后从地址来读取数值的。
不过其实同样都是全局环境,使用不同的方法查看也可能是不同的,比如说使用node查看全局量和使用浏览器查看,结果就是不同的。
var zhi = 1;
function Li() {
console.log(this);
}
Li();

只是单独的查看this到底是什么的时候,会得到Window {window: Window, self: Window, document: document, name: "", location: Location, …}这个结果,说明指向的是window对象,而我们使用node呢?
> function Li(){console.log(this);} Li();
<ref *1> Object [global] {
global: [Circular *1],
clearInterval: [Function: clearInterval],
clearTimeout: [Function: clearTimeout],
setInterval: [Function: setInterval],
setTimeout: [Function: setTimeout] {

},
queueMicrotask: [Function: queueMicrotask],
clearImmediate: [Function: clearImmediate],
setImmediate: [Function: setImmediate] {

},
Li: [Function: Li]
}

指向的是object对象,所以其实还是上面的那句话,不同的查看方法可能结果是不同的。所以我们再看最前面的结论,哪一个对象调用了这个函数,函数内的this就指向哪个对象。并且,this永远指向一个对象。

看完本篇关于js中this指向的解释,如果有什么不懂的可以在评论区留言,我会在看到的第一时间进行解答。

如果需要一些权威的资料,可以点击链接跳转

本文作者:博主:     文章标题:简单易懂javascript this指向
本文地址:https://zjzdmc.top/jsfx/62.html     
版权说明:若无注明,本文皆为“Datehoer的Blog-个人博客-技术分享”原创,转载请保留文章出处。
最后修改:2021 年 04 月 20 日 09 : 11 AM
如果觉得我的文章对你有用,请随意赞赏