彻底弄懂js中的this指向 js中各种this超详细解释 js this
JavaScript this 关键字
面向对象语言中 this 表示当前对象的一个引用。在 js 中 this 不是固定不变的，它会随着执行环境的改变而改变。不管它发生什么改变，this 的指向都永远只能看this是谁调用的，而不是在哪里定义的，谁调用的函数，函数体里的this就指谁。
注：以下输出没有特殊说明的都是在浏览器环境下进行。
方法中的 this
当前对象中的方法，需要访问当前对象中的属性，this指向的是方法调用时.前的对象。
var student = {
sname:'LiMing',
sage:18,
speak:function(){
console.log(`I am ${
this.sname}`)
}
}
student.speak(); // I am LiMing
全局单独使用 this
全局单独使用 this，则它指向全局对象（nodejs：Global；浏览器：Window）。
严格模式和平时一样都指向全局对象。
var that = this;
console.log(that); //Window {parent: Window, opener: Window, top: Window, length: 7, frames: Window, …}
普通函数或匿名函数自调中的this
如果一个函数调用时前边没有点，则this自动指向window。
因为既然可以不加点调用，说明一定属于全局window内，我们没有加点但是程序自动变成了window.函数调用。
在ES5严格模式下：全局方法中的this指向的是undefined。
function fun (){
console.log(this);
}
fun(); //Window {parent: Window, opener: null, top: Window, length: 4, frames: Window, …}
//------------------------------------------分割线------------------------------------------
"use strict";
function fun (){
console.log(this);
}
fun(); //undefined
构造函数中的this
在构造函数中的所有this都被new吸引，指向正在创建的新对象。
function Student(sname,sage){
this.tname = sname;
this.tage = sage;
}
var LiMing = new Student('LiMing',18);
console.log(LiMing); //Student {tname: "LiMing", tage: 18}
原型对象中的方法中的this
指向的是以后调用这个方法.前的对象
function Student(sname,sage){
this.tname = sname;
this.tage = sage;
}
Student.prototype.speak = function(){
console.log(`I am ${
this.tname}`)
}
var LiMing = new Student('LiMing',18);
LiMing.speak(); //I am LiMing
事件处理函数中的this
指向当前正在触发事件的元素
btn.onclick=function(){
... } //this->btn
回调函数:
所有回调函数，真正被调用时，前边是没有任何"对象."前缀，所以this指向的是window（严格模式下指向undefined）。
通常如果希望回调函数中的this不指window，而是跟外部的this保持一致，都要改为箭头函数
setTimeout(function(){
this... });
arr.forEach(function(){
this... })
arr.map(function(){
this... })
经典鄙视题：
看第一第二题前务必要明白声明提前。
传送门：声明提前
第一题
var a=5
function test(){
a=0
alert(a)
alert(this.a)
var a;
alert(a)
}
test();
执行函数体中代码前，不要被他的表现迷惑，要先把var创建的变量和function创建的函数提到当前作用域顶端，变化后再去看代码如何执行
var a;
function test(){
var a;
a=0
alert(a)
alert(this.a)
alert(a)
}
a=5;
test();
现在再来看，调用函数时函数体中有局部变量a就不会去全局找，所以第一个alert是局部变量a = 0 。第二个alert输出的是this.a，因为这是一个普通函数调用，调用时前边没有点，则this自动指向window，所以这次输出是全局中的 a = 5。第三个alert和第一个一样指向当前函数的局部变量 a = 0。
第二题（第一题演变而来）
var a=5
function test(){
a=0
alert(a)
alert(this.a)
var a;
alert(a)
}
new test();
拿到此题同样先变量提升，以上代码变量提升后变成下面的代码
var a;
function test(){
var a;
a=0
alert(a)
alert(this.a)
alert(a)
}
a=5;
new test();
与第一题的不同之处在于这次是用 new 关键字调用，第一个和第三个于第一题一样都是输出函数局部变量a = 0；而第二个输出this指向的不再是全局，而是创建的新对象(参考以上构造函数中的this指向)，而新对象上并没有a这个属性，所以alert为undefined