Javascript this
在JavaScript中，<font color=#7FFFD4 >this</font> 是當(dāng)前執(zhí)行函數(shù)的上下文。
JavaScript有4種不同的函數(shù)調(diào)用方式：
- 函數(shù)調(diào)用: alert('Hello World!')
- 方法調(diào)用: console.log('Hello World!')
- 構(gòu)造函數(shù)調(diào)用: new RegExp('\d')
- 隱式調(diào)用: alert.call(undefined, 'Hello World!')
并且每種方法都定義了自己的上下文，<font color=#7FFFD4>this</font> 會(huì)表現(xiàn)得跟程序員預(yù)期的不太一樣。
同時(shí)，<font color=#7FFFD4 >strict</font> 模式也會(huì)影響函數(shù)執(zhí)行時(shí)的上下文。
函數(shù)調(diào)用與方法調(diào)用
函數(shù)調(diào)用：當(dāng)一個(gè)表達(dá)式為函數(shù)接著一個(gè) <font color=#7FFFD4>(</font> ，一些用逗號分隔的參數(shù)以及一個(gè) <font color=#7FFFD4>)</font> 時(shí)，函數(shù)調(diào)用被執(zhí)行。例如 <font color=#7FFFD4>parseInt('18')</font> 。
方法調(diào)用（屬性訪問）：<font color=#7FFFD4>myObject.myFunction</font>，是一個(gè)方法調(diào)用。<font color=#7FFFD4>[1,5].join(',')</font> 是一個(gè)方法調(diào)用。實(shí)質(zhì)就是對象屬性的訪問。
在函數(shù)調(diào)用中的this
this 在函數(shù)調(diào)用中是一個(gè)全局對象
function sum(a, b) {
console.log(this === window); // => true
this.myNumber = 20; // add 'myNumber' property to global object
return a + b;
}
// sum() is invoked as a function
// this in sum() is a global object (window)
sum(15, 16); // => 31
window.myNumber; // => 20
strict模式中, this 不再是全局對象而是變成undefined
function multiply(a, b) {
'use strict'; // enable the strict mode
console.log(this === undefined); // => true
return a * b;
}
// multiply() function invocation with strict mode enabled
// this in multiply() is undefined
multiply(2, 5); // => 10
當(dāng)multiply(2, 5)作為函數(shù)被調(diào)用時(shí)，this是undefined。
陷阱: 內(nèi)部函數(shù)中的 <font color=#7FFFD4>this</font>
一個(gè)函數(shù)調(diào)用中的常見錯(cuò)誤就是以為this在內(nèi)部函數(shù)中跟在外部函數(shù)中一樣。
正確來說，內(nèi)部函數(shù)的上下文依賴于調(diào)用方法，而不是外部函數(shù)的上下文。
var numbers = {
numberA: 5,
numberB: 10,
sum: function() {
console.log(this === numbers); // => true
function calculate() {
// this is window or undefined in strict mode
console.log(this === numbers); // => false
return this.numberA + this.numberB;
}
return calculate();
}
};
numbers.sum(); // => NaN or throws TypeError in strict mode
<font color=#7FFFD4>numbers.sum()</font> 是一個(gè)對象上的方法調(diào)用，所以 <font color=#7FFFD4>sum</font> 中的上下文是 <font color=#7FFFD4>numbers</font> 對象。
<font color=#7FFFD4>calculate</font> 函數(shù)定義在 <font color=#7FFFD4>sum</font> 內(nèi)部，所以你會(huì)指望 <font color=#7FFFD4>calculate()</font> 中的 <font color=#7FFFD4>this</font> 也是 <font color=#7FFFD4>numbers</font> 對象。
然而，<font color=#7FFFD4>calculate()</font> 是一個(gè)函數(shù)調(diào)用（而不是方法調(diào)用），它的 <font color=#7FFFD4>this</font> 是全局對象 <font color=#7FFFD4>window</font> 或者 <font color=#7FFFD4>strict</font> 模式下的 <font color=#7FFFD4>undefined</font> 。
即使外部函數(shù) <font color=#7FFFD4>sum</font> 的上下文是 <font color=#7FFFD4>numbers</font> 對象，它在這里也沒有影響。
為了解決這個(gè)問題，calculate應(yīng)該跟sum有一樣的上下文，以便于使用numberA和numberB。解決方法之一是使用 <font color=#7FFFD4>.call()</font> 方法
var numbers = {
numberA: 5,
numberB: 10,
sum: function() {
console.log(this === numbers); // => true
function calculate() {
console.log(this === numbers); // => true
return this.numberA + this.numberB;
}
// use .call() method to modify the context
return calculate.call(this);
}
};
numbers.sum(); // => 15
方法調(diào)用
一個(gè)方法是作為一個(gè)對象的屬性存儲(chǔ)的函數(shù)。例如:
var myObject = {
// helloFunction is a method
helloFunction: function() {
return 'Hello World!';
}
};
var message = myObject.helloFunction();
方法調(diào)用中的 <font color=#7FFFD4>this</font>
在方法調(diào)用中，this是擁有這個(gè)方法的對象
當(dāng)調(diào)用一個(gè)對象上的方法時(shí)，this變成這個(gè)對象自身。
var calc = {
num: 0,
increment: function() {
console.log(this === calc); // => true
this.num += 1;
return this.num;
}
};
// method invocation. this is calc
calc.increment(); // => 1
calc.increment(); // => 2
構(gòu)造函數(shù)調(diào)用
function Country(name, traveled) {
this.name = name ? name : 'United Kingdom';
this.traveled = Boolean(traveled); // transform to a boolean
}
Country.prototype.travel = function() {
this.traveled = true;
};
var france = new Country('France', false);
france.traveled // false
france.travel();
france.traveled // true
從ECMAScript 6開始，JavaScript允許用class關(guān)鍵詞來定義構(gòu)造函數(shù)：
class City {
constructor(name, traveled) {
this.name = name;
this.traveled = false;
}
travel() {
this.traveled = true;
}
}
var paris = new City('Paris', false);
paris.travel();
當(dāng)屬性訪問 <font color=#7FFFD4>myObject.myFunction</font> 前面有一個(gè) <font color=#7FFFD4>new</font> 關(guān)鍵詞時(shí)，JavaScript會(huì)執(zhí)行 <font color=#7FFFD4>構(gòu)造函數(shù)調(diào)用</font> 而不是原來的方法調(diào)用。
例如new myObject.myFunction()：它相當(dāng)于先用屬性訪問把方法提取出來extractedFunction = myObject.myFunction，
然后利用把它作為構(gòu)造函數(shù)創(chuàng)建一個(gè)新的對象： new extractedFunction()。
構(gòu)造函數(shù)中的 <font color=#7FFFD4>this</font>
在構(gòu)造函數(shù)調(diào)用中this指向新創(chuàng)建的對象
function Foo () {
console.log(this instanceof Foo); // => true
this.property = 'Default Value';
}
// Constructor invocation
var fooInstance = new Foo();
fooInstance.property; // => 'Default Value'
陷阱: 忘了new
function Vehicle(type, wheelsCount) {
this.type = type;
this.wheelsCount = wheelsCount;
return this;
}
// Function invocation
var car = Vehicle('Car', 4);
car.type; // => 'Car'
car.wheelsCount // => 4
car === window // => true
你可能以為它正確地創(chuàng)建并初始化了對象。
然而，在函數(shù)調(diào)用中，<font color=#7FFFD4>this</font> 是 <font color=#7FFFD4>window</font> 對象，<font color=#7FFFD4>Vehicle('Car', 4)</font> 實(shí)際上是在給 <font color=#7FFFD4>window</font> 對象設(shè)置屬性--這是錯(cuò)的。它并沒有創(chuàng)建一個(gè)新的對象。
當(dāng)你希望調(diào)用構(gòu)造函數(shù)時(shí)，確保你使用了new操作符：
function Vehicle(type, wheelsCount) {
if (!(this instanceof Vehicle)) {
throw Error('Error: Incorrect invocation');
}
this.type = type;
this.wheelsCount = wheelsCount;
return this;
}
// Constructor invocation
var car = new Vehicle('Car', 4);
car.type // => 'Car'
car.wheelsCount // => 4
car instanceof Vehicle // => true
// Function invocation. Generates an error.
var brokenCat = Vehicle('Broken Car', 3);
在構(gòu)造函數(shù)里我們添加了一個(gè)驗(yàn)證 <font color=#7FFFD4>this instanceof Vehicle</font> 來確保執(zhí)行的上下文是正確的對象類型。如果this不是Vehicle，那么就會(huì)報(bào)錯(cuò)。
隱式調(diào)用
當(dāng)函數(shù)被.call()或者.apply()調(diào)用時(shí)，執(zhí)行的是隱式調(diào)用。
方法.call(thisArg[, arg1[, arg2[, ...]]])將接受的第一個(gè)參數(shù)thisArg作為調(diào)用時(shí)的上下文，arg1, arg2, ...這些則 <font color=#7FFFD4>作為參數(shù)</font> 傳入被調(diào)用的函數(shù)。
方法.apply(thisArg, [args])將接受的第一個(gè)參數(shù)thisArg作為調(diào)用時(shí)的上下文，并且接受另一個(gè) <font color=#7FFFD4>類似數(shù)組的對象[args]</font> 作為被調(diào)用函數(shù)的參數(shù)傳入。
function increment(number) {
return ++number;
}
increment.call(undefined, 10); // => 11
increment.apply(undefined, [10]); // => 11
隱式調(diào)用中的 <font color=#7FFFD4>this</font>
在隱式調(diào)用.call()或.apply()中，this是第一個(gè)參數(shù)
var rabbit = { name: 'White Rabbit' };
function concatName(string) {
console.log(this === rabbit); // => true
return string + this.name;
}
// Indirect invocations
concatName.call(rabbit, 'Hello '); // => 'Hello White Rabbit'
concatName.apply(rabbit, ['Bye ']); // => 'Bye White Rabbit'
當(dāng)一個(gè)函數(shù)應(yīng)該在特定的上下文中執(zhí)行時(shí)，隱式調(diào)用就非常有用。例如為了解決方法調(diào)用時(shí)，this總是window或strict模式下的undefined的上下文問題。隱式調(diào)用可以用于模擬在一個(gè)對象上調(diào)用某個(gè)方法。
綁定函數(shù)
綁定函數(shù)是一個(gè)與對象綁定的函數(shù)。通常它是通過在原函數(shù)上使用 <font color=#7FFFD4>.bind()</font> 來創(chuàng)建的。原函數(shù)和綁定的函數(shù)共享代碼跟作用域，但是在執(zhí)行時(shí)有不同的上下文。
方法.bind(thisArg[, arg1[, arg2[, ...]]])接受第一個(gè)參數(shù)thisArg作為綁定函數(shù)執(zhí)行時(shí)的上下文，并且它接受一組可選的參數(shù) arg1, arg2, ...作為被調(diào)用函數(shù)的參數(shù)。它返回一個(gè)綁定了thisArg的新函數(shù)。
下面的代碼創(chuàng)建了一個(gè)綁定函數(shù)并在之后調(diào)用它：
function multiply(number) {
'use strict';
return this * number;
}
// create a bound function with context
var double = multiply.bind(2);
// invoke the bound function
double(3); // => 6
double(10); // => 20
var say = concatName.bind(rabbit);
say('Hello'); // => 'Hello White Rabbit'
綁定函數(shù)中的 <font color=#7FFFD4>this</font>
在調(diào)用綁定函數(shù)時(shí)，this是.bind()的第一個(gè)參數(shù)。
var numbers = {
array: [3, 5, 10],
getNumbers: function() {
return this.array;
}
};
// Create a bound function
var boundGetNumbers = numbers.getNumbers.bind(numbers);
boundGetNumbers(); // => [3, 5, 10]
// Extract method from object
var simpleGetNumbers = numbers.getNumbers;
simpleGetNumbers(); // => undefined or throws an error in strict mode
numbers.getNumbers函數(shù)能在不綁定的情況下賦值給變量simpleGetNumbers。
在之后的函數(shù)調(diào)用中，<font color=#7FFFD4>simpleGetNumbers()</font> 的 <font color=#7FFFD4>this</font> 是 <font color=#7FFFD4>window</font> 或者strict模式下的undefined，不是 <font color=#7FFFD4>number</font> 對象。
在這個(gè)情況下，simpleGetNumbers()不會(huì)正確返回?cái)?shù)組。
<font color=#7FFFD4>.bind()</font> 永久性地建立了一個(gè)上下文的鏈接，并且會(huì)一直保持它。
一個(gè)綁定函數(shù)不能通過 <font color=#7FFFD4>.call()</font> 或者 <font color=#7FFFD4>.apply()</font> 來改變它的上下文，甚至是再次綁定也不會(huì)有什么作用。
只有用綁定函數(shù)的構(gòu)造函數(shù)調(diào)用方法能夠改變上下文，但并不推薦這個(gè)方法（因?yàn)闃?gòu)造函數(shù)調(diào)用用的是常規(guī)函數(shù)而不是綁定函數(shù)）。
下面的例子聲明了一個(gè)綁定函數(shù)，接著試圖改變它預(yù)先定義好的上下文：
function getThis() {
'use strict';
return this;
}
var one = getThis.bind(1);
// Bound function invocation
one(); // => 1
// Use bound function with .apply() and .call()
one.call(2); // => 1
one.apply(2); // => 1
// Bind again
one.bind(2)(); // => 1
// Call the bound function as a constructor
new one(); // => Object
只有new one()改變了綁定函數(shù)的上下文，其他方式的調(diào)用中this總是等于1。
箭頭函數(shù)
箭頭函數(shù)是 <font color=#7FFFD4>匿名的</font>，這意味著它的name屬性是個(gè)空字符串''。
var sumArguments = (...args) => {
console.log(typeof arguments); // => 'undefined'
return args.reduce((result, item) => result + item);
};
sumArguments.name // => ''
sumArguments(5, 5, 6); // => 16
箭頭函數(shù)中的 <font color=#7FFFD4>this</font>
this是箭頭函數(shù)定義時(shí)封裝好的上下文
箭頭函數(shù)并不會(huì)創(chuàng)建它自己的上下文，它從它定義處的外部函數(shù)獲得this上下文。下面的例子說明了這個(gè)上下文透明的特性：
class Point {
constructor(x, y) {
this.x = x;
this.y = y;
}
log() {
console.log(this === myPoint); // => true
setTimeout(()=> {
console.log(this === myPoint); // => true
console.log(this.x + ':' + this.y); // => '95:165'
}, 1000);
}
}
var myPoint = new Point(95, 165);
myPoint.log();
setTimeout在調(diào)用箭頭函數(shù)時(shí)跟 <font color=#7FFFD4>log()</font> 使用了相同的上下文( <font color=#7FFFD4>myPoint對象</font> )。
正如所見，箭頭函數(shù)從它定義處“繼承”了函數(shù)的上下文。如果在這個(gè)例子里嘗試用常規(guī)函數(shù)，它會(huì)建立自己的上下文( <font color=#7FFFD4>window</font> 或 <font color=#7FFFD4>undefined</font> )。
所以，為了讓同樣的代碼能在函數(shù)表達(dá)式中正確運(yùn)行，需要手動(dòng)綁定上下文： <font color=#7FFFD4>setTimeout(function() {...}.bind(this)</font> )。
這樣一來就顯得很啰嗦，不如用箭頭函數(shù)來得簡短。
如果箭頭函數(shù)定義在最上層的作用域（在所有函數(shù)之外），那么上下文就總是全局對象（瀏覽器中的window對象）：
var getContext = () => {
console.log(this === window); // => true
return this;
};
console.log(getContext() === window); // => true
箭頭函數(shù)會(huì)一勞永逸地綁定詞法作用域。即使使用修改上下文的方法，this也不能被改變：
var numbers = [1, 2];
(function() {
var get = () => {
console.log(this === numbers); // => true
return this;
};
console.log(this === numbers); // => true
get(); // => [1, 2]
// Use arrow function with .apply() and .call()
get.call([0]); // => [1, 2]
get.apply([0]); // => [1, 2]
// Bind
get.bind([0])(); // => [1, 2]
}).call(numbers);
一個(gè)函數(shù)表達(dá)式通過.call(numbers)被隱式調(diào)用了，這使得這個(gè)調(diào)用的this變成了numbers。這樣一來，箭頭函數(shù)get的this也變成了numbers，因?yàn)樗菑脑~法上獲得的上下文。
無論get是怎么被調(diào)用的，它一直保持了一開始的上下文numbers。用其他上下文的隱式調(diào)用(通過.call()或.apply())或者重新綁定(通過.bind())都不會(huì)起作用
箭頭函數(shù)不能用作構(gòu)造函數(shù)。如果像構(gòu)造函數(shù)一樣調(diào)用new get()， JavaScript會(huì)拋出異常：TypeError: get is not a constructor。
陷阱: 用箭頭函數(shù)定義方法
function Period (hours, minutes) {
this.hours = hours;
this.minutes = minutes;
}
Period.prototype.format = () => {
console.log(this === window); // => true
return this.hours + ' hours and ' + this.minutes + ' minutes';
};
var walkPeriod = new Period(2, 30);
walkPeriod.format(); // => 'undefined hours and undefined minutes'
由于format是一個(gè)箭頭函數(shù)，并且它定義在全局上下文（最頂層的作用域）中，它的this指向window對象。即使format作為方法在一個(gè)對象上被調(diào)用如walkPeriod.format()，window仍然是這次調(diào)用的上下文。之所以會(huì)這樣是因?yàn)榧^函數(shù)有靜態(tài)的上下文，并不會(huì)隨著調(diào)用方式的改變而改變。
函數(shù)表達(dá)式可以解決這個(gè)問題，因?yàn)橐粋€(gè)常規(guī)的函數(shù)會(huì)隨著調(diào)用方法而改變其上下文:
function Period (hours, minutes) {
this.hours = hours;
this.minutes = minutes;
}
Period.prototype.format = function() {
console.log(this === walkPeriod); // => true
return this.hours + ' hours and ' + this.minutes + ' minutes';
};
var walkPeriod = new Period(2, 30);
walkPeriod.format(); // => '2 hours and 30 minutes'
結(jié)論
因?yàn)楹瘮?shù)調(diào)用對this有最大的影響，從現(xiàn)在起，不要再問你自己：
this是從哪里來的？
而要問自己：
函數(shù)是怎么被調(diào)用的？
對于箭頭函數(shù)，問問你自己：
在這個(gè)箭頭函數(shù)被定義的地方，this是什么？
這是處理this時(shí)的正確想法，它們可以讓你免于頭痛。
