this指向的问题

最近复习的时候又遇到 this 指向的问题了，摘录一道经典例题，研究一下

var name = 'window';

var person1 = {
	name: 'person1',
	show1: function () {
		console.log(this.name);
	},
	show2: () => console.log(this.name),
	show3: function () {
		return function () {
			console.log(this.name);
		};
	},
	show4: function () {
		return () => console.log(this.name);
	},
};
var person2 = { name: 'person2' };

person1.show1();
person1.show1.call(person2);

person1.show2();
person1.show2.call(person2);

person1.show3()();
person1.show3().call(person2);
person1.show3.call(person2)();

person1.show4()();
person1.show4().call(person2);
person1.show4.call(person2)();

• person1.show1()
  很显然，this 指向 person1，输出 person1

• person1.show1.call(person2) 更改 this 指向到 person2，输出 person2

• person1.show2() show2 时箭头函数，箭头函数没有 this 值，它保存到是外部的 this 值，所以输出是 window

• person1.show2.call(person2) this 值都没了，传 person2 也没用，所以还是 window

• person1.show3()() show3 是多次调用函数，等价于

var temp = person1.show3();
temp();

这样执行环境就是全局了，输出 window

• person1.show3().call(person2) 等价于

var temp = person1.show3();
temp.call(person2);

输出 person2

• person1.show3.call(person2)()

var temp = person1.show3.call(person2);
temp();

执行环境还是全局，输出 window

• person1.show4()()

var person1 = {
	name: 'person1',
	show4: function () {
		var self = this;
		return function () {
			console.log(self.name);
		};
	},
};

var temp = person1.show4();
temp();

在 person1.show4(),执行时，self = this 指向就是 person1,之后再执行 temp()，时，self 是不会再改变了，所以输出的是 person1

• person1.show4().call(person2)

var temp = person1.show4();
temp.call(person2);

所以， 还是输出 person1

• person1.show4.call(person2)()

var temp = person1.show4.call(person2);
temp();

这次不一样了，self = this 指向的是 person2 所以输出的是 person2

函数调用指向全局 如果想改写的话，只需要用 var self = this 来保存当前的上下文即可

Donate