ES6學習之this

正常函數聲明中this指向調用函數的對象

var name = '喬峯';
function show() {
	console.log(this.name);
}
show(); // 此處調用函數的對象是全局(window)，所以輸出：喬峯

var person = {
	name: '虛竹',
	show: function() {
		console.log(this.name)
	}
};
person.show(); // 此處調用函數的對象是person，所以輸出：虛竹
var other = person.show;
other(); // other將引用指向person.show，所以此處調用函數的對象又是全局(window)，所以輸出：喬峯

箭頭函數中this指向創建函數時的上下文的this

var name = '喬峯';
function Person() {
	this.name = '虛竹';
	(function() {
		console.log(this.name);
	})();
}
var person = new Person(); // 喬峯
var obj = {
	name: '段譽',
	show: function() {
		console.log(this.name);
	}
};
obj.show(); // 段譽

var name = '喬峯';
function Person() {
	this.name = '虛竹';
	(() => {
		console.log(this.name);
	})();
}
var person = new Person(); // 虛竹
var obj = {
	name: '段譽',
	show: () => {
		console.log(this.name);
	}
};
obj.show(); // 喬峯

箭頭函數的this用bind去表示：

// obj.show和obj.showAgain效果一樣
var name = '段譽';
var obj = {
	name: '喬峯',
	show: () => {
		console.log(this.name)
	},
	showAgain: (function() {
		console.log(this.name)
	}).bind(this)
}
obj.show(); // 段譽
obj.showAgain(); // 段譽

嚴格模式下，this默認不指向全局對象window(this===undefined)，但在最外層上下文創建的箭頭函數可以指向window

"use strict"
var name = '喬峯';
var obj = {
	name: '段譽',
	show: function() {
		console.log(this.name);
	}
};
obj.show(); // 段譽
function Person() {
	this.name = '虛竹';
	(function() {
		console.log(this.name);
	})();
}
var person = new Person(); // 報錯：Cannot read property 'name' of undefined

"use strict"
var name = '喬峯';
function Person() {
	this.name = '虛竹';
	(() => {
		console.log(this.name);
	})();
}
var person = new Person(); // 虛竹
var obj = {
	name: '段譽',
	show: () => {
		console.log(this.name);
	}
};
obj.show(); // 喬峯