彻底弄懂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