我所理解的JavaScript中的this指向
前言
JS中的this指向是一个经常被问到的问题，网上也有很多文章是关于this的。本文整理一下我理解下的this以及一些我比较疑惑的关于this问题。
this指向
有几个this的指向问题是几乎每篇文章都会说的，比如作为函数直接调用，作为对象的方法调用，new运算符执行中的this行为。比较通用的说法是，this指向的是直接调用该函数的对象。其实也很好理解，就是为什么需要this这个关键字，就是我们有需要在函数内部对调用函数的对象进行操作的需求。但是有时候我们遇到的情况并不是像书上或mdn上遇到的典型的情况，this的行为可能就会让我们感到有点疑惑。
函数的直接调用
当我们直接调用一个已经声明的函数，那么在非严格模式下，该函数内部的this指向的是全局对象，浏览器环境下就是window对象。
functionf1(){
returnthis;
}
//在浏览器中：
f1()===window;//在浏览器中，全局对象是window
//在Node中：
f1()===global;
当函数是在全局环境下定义的时候，这种现象是可以理解的，因为全局环境下定义的函数其实就是挂载在全局对象上的一个属性，比附上面的f1也可以理解为window.f1。但我认为严格模式下的行为才是更符合this这个关键字的目的的，特别是我们的函数可能是在非全局环境（比如另一个函数中）定义和调用的，这种情况下this还指向window是不太合理的。所以在严格模式下，一个函数直接调用，它的this指向的是undefined，如果我们想要得到非严格模式下的结果，那我们调用函数的方法就要改为window.f1()，而如果函数是在非全局环境下定义的话，那么始终返回的是undefined。我认为这样的行为是更符合逻辑的。
'usestrict'
functiond(){
functione(){
console.log(this)
}
console.log(this)
}
d()
//undefined
//undefined
window.d()
//Window{}
//undefined
这里在全局模式下使用usestrict只是为了测试，实际使用还是尽量放在函数内局部使用严格模式，全局下的严格模式很容易导致出错。
函数作为对象的属性调用
这也是在代码中非常常见的场景，我认为这是比函数调用更好理解，也更能帮助我们理解this行为的场景。简单的来说就是this指向的是直接调用函数的那个对象。并且要注意的是，这跟函数在哪里定义的是无关的，我们看this，看的就是从哪里调用的函数。
//在对象内部定义
varo={
prop:37,
f:function(){
returnthis.prop;
}
};
console.log(o.f());//37
//在对象外部定义
varo={prop:37};
functionindependent(){
returnthis.prop;
}
o.f=independent;
console.log(o.f());//37
//在对象内部定义，但是给外部变量引用并执行
varo={
prop:37,
f:function(){
console.log(this)
returnthis.prop;
}
};
varprop=100;
varm=o.f;
console.log(m());
//Window{}
//100
上面的段落我给直接这两个字加粗了，想要表达的意思是当我们通过多个对象的属性嵌套找到并调用函数，那么最后那个最接近函数的对象就是函数this的指向。
varo={
a:10,
b:{
a:12,
fn:function(){
console.log(this.a);//12
}
}
}
o.b.fn();
varo={
a:10,
b:{
//a:12,
fn:function(){
console.log(this.a);//undefined
}
}
}
o.b.fn();
为什么我说这个场景能够帮助我们理解，原因就是它反映出this这个关键字的本质。JS中的函数也是一种对象，在我们的执行环境中的活动对象保存的也只是函数对象的一个引用，如果这个引用是保存在活动对象中的某个对象的属性中（即我们通过活动对象中的某个对象的属性找到该函数），那么函数执行的时候this就会指向这个对象，这也是为什么多层对象的调用，还是最靠近函数的那个对象作为this。虽然在代码中我们的函数是在对象中定义的，但是实际在内存中，对象中只保存着函数的引用，函数自己是在一个单独的内存空间中。所以我们通过哪个对象找到函数并执行，函数中的this就指向这个对象。上面的直接调用this返回undefined也是说得通的。
通过原型的调用
有时我们是通过原型来执行公用的函数，此时已然符合我们上面的逻辑，我们通过哪个实例找到函数，那么this就指向那个实例。
varo={
f:function(){
returnthis.a+this.b;
}
};
varp=Object.create(o);
p.a=1;
p.b=4;
console.log(p.f());//5
箭头函数
箭头函数并没有自己的this，箭头函数中的this是它所在的执行环境中的this（mdn写的是封闭的词法环境），当你遇到箭头函数中的this不确定的时候，你可以想象把这个箭头函数换成console.log(this)，这个console的输出就是箭头函数中this的值，并且箭头函数的this是绑定的，不会改变（有时候看上去改变了是所在的context改变了）。还有一点需要注意的是，用call，apply，bind来调用箭头函数，第一个参数是没有意义的，也就是无法改变this，如果仍需要使用，第一个参数应该传null。看mdn给出的示例。
varglobalObject=this;
varfoo=(()=>this);
console.log(foo()===globalObject);//true
//接着上面的代码
//作为对象的一个方法调用
varobj={foo:foo};
console.log(obj.foo()===globalObject);//true
//尝试使用call来设定this
console.log(foo.call(obj)===globalObject);//true
//尝试使用bind来设定this
foo=foo.bind(obj);
console.log(foo()===globalObject);//true
//创建一个含有bar方法的obj对象，
//bar返回一个函数，
//这个函数返回this，
//这个返回的函数是以箭头函数创建的，
//所以它的this被永久绑定到了它外层函数的this。
//bar的值可以在调用中设置，这反过来又设置了返回函数的值。
varobj={
bar:function(){
varx=(()=>this);
returnx;
}
};
//作为obj对象的一个方法来调用bar，把它的this绑定到obj。
//将返回的函数的引用赋值给fn。
varfn=obj.bar();
//直接调用fn而不设置this，
//通常(即不使用箭头函数的情况)默认为全局对象
//若在严格模式则为undefined
console.log(fn()===obj);//true
//但是注意，如果你只是引用obj的方法，
//而没有调用它
varfn2=obj.bar;
//那么调用箭头函数后，this指向window，因为它从bar继承了this。
console.log(fn2()()==window);//true
其他情况
还有一些情况我觉得比较简单，就一笔带过。
1.当函数被用作事件处理函数时，它的this指向触发事件的元素。
2.当代码被内联on-event处理函数调用时，它的this指向监听器所在的DOM元素，需要注意的是只有最外层的this是这样，如果里面还有嵌套函数，则嵌套函数的this在非严格模式下仍然指向全局对象。
3.构造函数中的this请看之前的文章JavaScript中new操作符的解析和实现
4.bind，call和apply都一样，函数的this被绑定到第一个参数上。
总结
以上就是我所总结的JS中的this的一些要点，如果有什么遗漏或者错误的地方，欢迎指正。
到此这篇关于我所理解的JavaScript中的this指向的文章就介绍到这了,更多相关JavaScriptthis指向内容请搜索毛票票以前的文章或继续浏览下面的相关文章希望大家以后多多支持毛票票！
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。