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> 钠怯,一些用逗號(hào)分隔的參數(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ì)就是對(duì)象屬性的訪問镊尺。
在函數(shù)調(diào)用中的this
this 在函數(shù)調(diào)用中是一個(gè)全局對(duì)象
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 不再是全局對(duì)象而是變成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è)對(duì)象上的方法調(diào)用,所以 <font color=#7FFFD4>sum</font> 中的上下文是 <font color=#7FFFD4>numbers</font> 對(duì)象输涕。
<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> 對(duì)象。
然而莱坎,<font color=#7FFFD4>calculate()</font> 是一個(gè)函數(shù)調(diào)用(而不是方法調(diào)用)衣式,它的 <font color=#7FFFD4>this</font> 是全局對(duì)象 <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> 對(duì)象檐什,它在這里也沒有影響碴卧。
為了解決這個(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è)對(duì)象的屬性存儲(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è)方法的對(duì)象
當(dāng)調(diào)用一個(gè)對(duì)象上的方法時(shí)荧飞,this變成這個(gè)對(duì)象自身。
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è)新的對(duì)象: new extractedFunction()条获。
構(gòu)造函數(shù)中的 <font color=#7FFFD4>this</font>
在構(gòu)造函數(shù)調(diào)用中this指向新創(chuàng)建的對(duì)象
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)建并初始化了對(duì)象。
然而蒋歌,在函數(shù)調(diào)用中,<font color=#7FFFD4>this</font> 是 <font color=#7FFFD4>window</font> 對(duì)象委煤,<font color=#7FFFD4>Vehicle('Car', 4)</font> 實(shí)際上是在給 <font color=#7FFFD4>window</font> 對(duì)象設(shè)置屬性--這是錯(cuò)的堂油。它并沒有創(chuàng)建一個(gè)新的對(duì)象。
當(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í)行的上下文是正確的對(duì)象類型府框。如果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ù)組的對(duì)象[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è)對(duì)象上調(diào)用某個(gè)方法。
綁定函數(shù)
綁定函數(shù)是一個(gè)與對(duì)象綁定的函數(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> 對(duì)象旨剥。
在這個(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對(duì)象</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ù)之外)民宿,那么上下文就總是全局對(duì)象(瀏覽器中的window對(duì)象):
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對(duì)象攻冷。即使format作為方法在一個(gè)對(duì)象上被調(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)用對(duì)this有最大的影響禁谦,從現(xiàn)在起,不要再問你自己:
this是從哪里來的废封?
而要問自己:
函數(shù)是怎么被調(diào)用的枷畏?
對(duì)于箭頭函數(shù),問問你自己:
在這個(gè)箭頭函數(shù)被定義的地方虱饿,this是什么?
這是處理this時(shí)的正確想法,它們可以讓你免于頭痛氮发。