js中this总结

this的指向在函数定义的时候是确定不了的，只有函数执行的时候才能确定。

this指向最终直接调用函数的对象，无对象直接调用函数，this指向window。

下面分5种场景讨论this指向

• 函数作为对象属性被调用
• 函数直接执行
• 构造函数 配合 new调用
• call，apply，bind改变this指向
• es6箭头函数中的this

1.函数作为对象属性被调用

函数作为对象属性被调用，this指向最终直接调用函数的对象。与函数定义的位置无关。

eg1:

var a = 1;
function text() {
	var a = 2;
	console.log(this, this.a);
}

text(); //window, 1
window.text(); //window, 1

结论： 定义在全局的变量都为window对象的属性,window对象直接调用函数text，this指向window。

eg2:

var a = 1;
var obj = {
	a: 2,
	fun: function (){
		console.log(this, this.a)
	}
}
obj.fun(); // obj, 2

结论：函数fun作为对象obj的属性被对象obj直接调用，this指向obj。

eg3：

var a = 1;
var obj = {
	a: 2,
	b: {
		a: 3,
		fun: function (){
			console.log(this, this.a);
		}
	}
}
obj.b.fun(); //对象b, 3

结论：fun的直接上级调用者是b对象，this指向b，而不是指向obj。

eg4:

var a = 1;
var obj = {
	a: 2,
	b: {
		a: 3,
		fun: function (){
			console.log(this, this.a);
		}
	}
}

var text = obj.b.fun;
text(); // window, 1

结论：运行代码text = obj.b.fun 后，函数fun并没有被执行，只是把fun的引用赋值给变量text。变量text和obj.b.fun 为同一引用值指向同一函数。text()和obj.b.fun()执行同一函数。不同的是，text()的直接调用者为window对象，所以此时this指向window。text() == window.text()。

2.函数直接执行

函数直接执行，this指向window

eg1:

var a = 1;
function fun() {
	console.log(this, this.a)
}
var obj = {
	a: 2,
	b: function (){
		fun();
	}
}
obj.b(); //window, 1

结论：虽然函数fun是当对象obj调用函数b才执行的。但是函数fun并没有对象直接调用，this指向window。

3.构造函数 配合 new调用

构造函数 ，是一种特殊的函数。主要用来在创建对象时初始化对象。构造函数规定首字符大写，和new一起使用才有意义。
eg1

function Person() {
	this.name = "张飞";
	this.age = 500;
}

var p = new Person();
console.log(p.name);// 张飞

为什么p.name会输出“张飞”，对象p和构造函数Person中的this是什么关系呢。下面我们看下用new关键字初始化对象时做了些什么。

1. 在内存中创建一个空对象
2. 把构造函数中的this指向这个空对象
3. 执行构造函数，给这个新对象添加属性。
4. 返回这个新对象

eg1中，new创建了一个对象{name: "张飞", age: 500},并把该对象的引用赋值给变量p。所以p.name输出了"张飞"

扩展

构造函数中使用return，如果return 一个对象，new 返回该对象。如果return的不是一个对象，new返回new在内存中创建的新对象。

eg2：

//1.return具体对象
function Person() {
	this.name = "张飞";
	return {name: "李白"};
}
var p = new Person();
console.log(p.name);// 李白

function Person() {
	this.name = "张飞";
	return [1,2]
}
var p = new Person();
console.log(p, p.name);// [1,2], undefined

//2.return 其他值
function Person() {
	this.name = "张飞";
	return "";
}
var p = new Person();
console.log(p ,p.name);// Persion实例对象, 张飞

//3.return null
function Person() {
	this.name = "张飞";
	return null;
}
var p = new Person();
console.log(p ,p.name);// Persion实例对象, 张飞

4.call，apply，bind改变this指向

待补充。。。。

5.es6箭头函数中的this

待补充。。。

---

参考文档

1. js new关键字 和 this详解
2.彻底理解js中this的指向，不必硬背。
3.不要再问我this的指向问题了