javascript中的this指向

javascript中的this指向问题

关于javascript中遇到的一些this指向问题，我曾经也踩过这里面的坑，很久才爬出来，下面通过几个简单的小案例来彻底搞懂this的指向问题。

1. 普通函数

var name = "Jane";
var obj0 = {
	name: "john",
	foo: function() { //普通函数，等待着调用
	console.log(this,this.name); //obj0,john
	}
}
obj0.foo(); //此时普通函数foo是obj0调用才执行的，所以里面的this指向调用它的这个obj0

普通函数中的this指向最简单，就是谁调用这个函数，this就指向谁。这里的函数foo是对象obj0调用的，所以this指向obj0这个对象，打印的是obj0的name值。

2. 箭头函数

var name = "Jane";
var obj1 = {
	name: "john",
	foo: () => { //箭头函数，等待着调用
		console.log(this,this.name); //window  Jane
	}
}
obj1.foo(); 

这里的this是在一个箭头函数中，它里面的this不是指向调用它的对象obj1，因为箭头函数是会改变里面的this指向的，遇到箭头函数就要找箭头函数所处的环境，即它的父级，如果它的父级是一个函数，则箭头函数中的this指向与最近函数父级中的this指向一致，如果父级不是一个函数，那么它的this就指向Window。

3. 普通函数嵌套普通函数

var name = "Jane";
var obj2 = {
	name: "john",
	foo: function() { //普通函数
		console.log(this,this.name); //obj2  John
		return function fn() { //普通函数中的普通函数
			console.log(this,this.name); //Window Jane
		}
	}
}
obj2.foo()(); 

这是一个普通函数的嵌套，谁调用函数，this指向谁，在执行函数foo时，foo是obj2调用才执行的，所以foo中this指向调用它的obj2，执行obj2.foo()之后返回一个fn函数体，再加括号才能执行fn函数，相当于obj2.foo()()==>fn()，此时fn是window调用的。

4. 普通函数嵌套箭头函数

var name = "Jane";
var obj3 = {
	name: "john",
	foo: function() { //普通函数
		console.log(this,this.name); //obj3  John
		return() => { //普通函数中的箭头函数
			console.log(this,this.name); //obj3  John
		}
	}
}
obj3.foo()(); 

此时普通函数foo是obj3调用才执行的，所以foo中this指向调用它的obj3，执行foo之后返回fn箭头函数体，再加括号才执行箭头函数，遇到箭头函数就找箭头函数的父级，这里的箭头函数父级是个普通函数，所以箭头函数的this指向与父级函数的this指向保持一致。

5. 箭头函数嵌套普通函数

var name = "Jane";
var obj4 = {
	name: "john",
	foo: () => { //箭头函数
		console.log(this,this.name);//Window  Jane
		return function fn() { //箭头函数中的普通函数
			console.log(this,this.name); //Window   Jane
		}
	}
}
obj4.foo()(); 

foo是箭头函数，遇到箭头函数就找父级，这里的父级不是函数（是对象），所以foo中this是指向window的，foo执行后返回普通函数，返回普通函数之后再执行普通函数就是window调用，所以this也指向window。

6. 箭头函数嵌套箭头函数

var name = "Jane";
var obj5 = {
	name: "john",
	foo: () => { //箭头函数
		console.log(this,this.name);//Window  Jane
		return() => { //箭头函数中的箭头
			console.log(this,this.name); //Window   Jane
		}
	}
}
obj5.foo()(); 

foo是箭头函数，遇到箭头函数找父级，父级不是函数（是对象），所以foo中this指向window，foo执行后返回一个箭头函数，箭头函数找父级，fn父级是箭头函数，所以this指向与父级箭头函数保持一致，也是指向window的。

7. 多级函数嵌套

var name = "Jane";
var obj6 = {
	name: "john",
	foo: function() { //普通函数
		console.log(this,this.name); //obj6  john
		return() => { //箭头函数中的箭头
			console.log(this,this.name); //obj6  john
			return() => { //箭头函数中的箭头
				console.log(this,this.name); //obj6   john
			}
		}
	}
}
obj6.foo()()();

普通函数foo执行，其中的this指向obj6，执行完返回一个箭头函数，箭头函数找父级，父级是函数，所以箭头函数中的this与父级foo中this指向一致，执行完又返回一个箭头函数，同理，与父级保持一致，所以都指向obj6。

8. 函数调用

function fun(){
    console.log(this,this.name);
}
var obj7 = {
    name:'john',
    foo:fun
}
var name = 'Jane';
obj7.foo(); //obj7  john
fun(); //Window  Jane

在obj7对象内部，是一个方法的赋值操作，将fun赋值给了foo，所以obj7.foo()执行时是obj7调用的fun这个函数，所以this指向obj7，而fun()是Window调用的。

最后总结一下：

普通函数里的this指向，就是谁调用这个普通函数，里面的this就指向谁，而遇到箭头函数，this指向就改变了，就要找箭头函数的父级，箭头函数的父级只要有函数，那么箭头函数中的this就与父级函数中的this指向一致，如果箭头函数父级不是函数，那么this就是指向window的

这就是我学习H5以来对this指向的一些总结，希望能给大家提供一些参考和帮助。