前言

在函數調用時，arguments和this會被靜默的傳遞給函數，并可以在函數體內引用它們，借以訪問函數相關的一些信息。
其中arguments是一個類數組結構，它保存了調用時傳遞給函數的所有實參；this是函數執行時的上下文對象, 這個對象有些讓人感到困惑的行為。 下面分別對他們進行討論。

1. arguments

1.1 背景

JavaScript 允許函數在調用時傳入的實參個數和函數定義時的形參個數不一致, 比如函數在定義時聲明了 n 個參數, 在調用函數時不一定非要傳入 n 個參數，例如:

// 1. 定義有一個形參的函數fn()function fn(arg){}// 2. 在調用時傳入 0 個或 多個參數，并不會報錯fn(); // 傳入 0 個參數fn(1,'a',3); // 傳入多個參數

1.2 arguments 與 形參的對應關系

arguments是個類數組結構，它存儲了函數在調用時傳入的所有實參, 通過訪問它的length屬性可以得到其中保存的實參的個數，并可以通過arguments[n]按順序取出傳入的每個參數(n=1,2,..,arguments.length-1)。
參數在arguments中保存的順序和傳入的順序相同, 同時也和形參聲明的順序相同，例如:

function fn(arg1, arg2, arg3){console.log(arg1 === arguments[0]); // trueconsole.log(arg2 === arguments[1]); // trueconsole.log(arg3 === arguments[2]); // true}fn(1,2,3); // 調用

當傳入的實參多于形參個數時，想要獲得多余出的實參，就可以用arguments[n]來獲取了, 例如:

// 定義只有一個形參的函數function fn(arg1){ console.log('length of arguments is:',arguments.length);console.log('arguments[0] is:', arguments[0]); // 獲取傳入的第一個實參, 也就是形參 arg1 的值console.log('arguments[1] is:', arguments[1]); // 獲取第二個實參的值, 沒有形參與其對應console.log('arguments[2] is:', arguments[2]); // 獲取第二個實參的值, 沒有形參與其對應}fn(1,2,3); // 傳入 3 個實參// 可以得到實際上傳入的實參的個數并取出所有實參// length of arguments is: 3// arguments[0] is: 1// arguments[1] is: 2// arguments[2] is: 3

1.3 arguments 與 形參的值相互對應

在非嚴格模式下, 修改arguments中的元素值會修改對應的形參值；同樣的，修改形參的值也會修改對應的arguments中保存的值。下面的實驗可以說明:

function fn(arg1, arg2){// 1. 修改arguments元素，對應的形參也會被修改arguments[0] = '修改了arguments';console.log(arg1); // 2. 修改形參值，對應的arguments也會被修改arg2 = '修改了形參值';console.log(arguments[1]); }fn(1,2);// '修改了arguments'// '修改了形參值'

但是，在嚴格模式下不存在這種情況, 嚴格模式下的arguments和形參的值之間失去了對應的關系:

'use strict'; // 啟用嚴格模式function fn(arg1, arg2){// 修改arguments元素，對應的形參也會被修改arguments[0] = '修改了arguments';console.log(arg1);// 修改形參值，對應的arguments也會被修改arg2 = '修改了形參值';console.log(arguments[1]);}fn(1,2);// 1// 2

注意: arguments 的行為和屬性雖然很像數組, 但它并不是數組，只是一種類數組結構:

function fn(){console.log(typeof arguments); // objectconsole.log(arguments instanceof Array); // false}fn();

1.4 為什么要了解 arguments

在ES6中, 可以用靈活性更強的解構的方式(...符號)獲得函數調用時傳入的實參,而且通過這種方式獲得的實參是保存在真正的數組中的，例如:

function fn(...args){ // 通過解構的方式得到實參console.log(args instanceof Array); // args 是真正的數組console.log(args); // 而且 args 中也保存了傳入的實參}fn(1,2,3);// true// Array(3) [1, 2, 3]

那么在有了上面這種更加靈活的方式以后，為什么還要了解arguments呢? 原因是在維護老代碼的時候可能不得不用到它。

2. 函數上下文: this

在函數調用時, 函數體內也可以訪問到 this 參數, 它代表了和函數調用相關聯的對象,被稱為函數上下文。
this的指向受到函數調用方式的影響, 而函數的調用方式可以分成以下4種:

1. 直接調用, 例如: fn()
2. 作為對象的方法被調用, 例如: obj.fn()
3. 被當做一個構造函數來使用, 例如: new Fn()
4. 通過函數 call() 或者 apply() 調用, 例如: obj.apply(fn) / obj.call(fn)

下面分別討論以上 4 種調用方式下 this 的指向.

2.1 直接調用一個函數時 this 的指向

有些資料說在直接調用一個函數時, 這個函數的 this 指向 window, 這種說法是片面的, 只有在非嚴格模式下而且是瀏覽器環境下才成立, 更準確的說法是:在非嚴格模式下, this值會指向全局上下文(例如在瀏覽器中是window, Node.js環境下是global)。而在嚴格模式下, this 的值是 undefined。實驗代碼如下:

// 非嚴格模式function fn(){console.log(this);}fn(); // global || Window

嚴格模式下:

'use strict';function fn(){console.log(this);}fn(); // undefined

總結: 在直接調用一個函數時, 它的 this 指向分成兩種情況: 在非嚴格模式下指向全局上下文, 在嚴格模式下指向 undefined.

2.2 被一個對象當做方法調用

當函數被一個對象當成方法調用時, 這個函數的 this 會指向調用它的對象。代碼驗證如下:

// 定義一個對象let xm = {getThis (){ // 定義一個函數return this; // 這個函數返回自己的 this 指向}}let thisOfFunc = xm.getThis(); // 通過對象調用函數得到函數的 this 指向console.log(thisOfFunc === xm); // true, 函數的this指向調用它的對象本身

因為這個原因, 對象的屬性可以通過this來訪問, 如果給 xm 加上一個 name 屬性, 則通過 xm.name可以得到這個屬性值, 也可以在函數中通過 this.name 得到屬性值, 即 this.name 就是 vm.name, 進一步, this===xm。 實驗如下:

let xm = {name: '小明', // 給 xm 加一個屬性, 可以通過 xm.name 訪問到getName (){ return this.name; // 返回 this 的指向的 name 屬性}}console.log(xm.name, xm.getName()); // 小明 小明

2.3 被作為構造函數來調用時

2.3.1 不要像使用普通函數一樣使用構造函數

構造函數本質上是函數, 只是在被 new 操作符調用時一個函數才被稱為構造函數。然而話雖如此, 但是由于寫出一個構造函數的目的是用他來創建一個對象, 所以還要有一些約定俗成的東西來限制這個概念, 避免把構造函數當成普通函數來使用。例如, 構造函數雖然能被直接調用, 但是不要這樣做，因為這是一個普通函數就可以做到的事情，例如:

function Person(name){this.name = name;return 1; // 不要這樣對待構造函數}let n = Person(); // 不要這樣使用構造函數

2.3.2 使用構造函數創建對象時發生了什么
當使用 new 關鍵字來調用構造函數的最終結果是產生了一個新對象, 而產生新對象的過程如下:

1. 創建一個空對象 {}
2. 將該對象的prototype鏈接到構造函數的prototype上
3. 將這個新對象作為 this 的指向
4. 如果這個構造函數沒有返回一個引用類型的值, 則將上面構造的新對象返回

上面的內容如果需要完全理解, 還需要了解原型相關的內容。這里只需要關注第3、4步就可以了,即:將this綁定到生成到的新對象上，并將這個新對象返回, 進一步下結論為：使用構造函數時, this 指向生成的對象， 實驗結果如下:

function Person(){this.getThis = function(){ // 這個函數返回 thisreturn this;}}let p1 = new Person(); // 調用了構造函數并返回了一個新的對象console.log(p1.getThis() === p1); // truelet p2 = new Person();console.log(p2.getThis() === p2); // true

2.3.3 結論

從上面的內容可以得到如下的結論: 當函數作為構造函數使用時, this 指向返回的新對象

2.4 通過 call() 或者 apply() 調用時

使用函數 call 和 apply 可以在調用一個函數時指定這個函數的 this 的指向, 語法是:

fn.call(targetThis, arg1, arg2,..., argN)fn.apply(targetThis, [arg1, arg2,.., argN])fn: 要調用的函數targetThis: 要把 fn 的 this 設置到的目標argument: 要給 fn 傳的實參

例如定義一個對象如下:

let xm = {name: '小明',sayName(){console.log(this.name);}};xm.sayName(); // 對象調用函數輸出 '小明'

上面定義了一個對象, 對象的 name 屬性為'小明'; sayName 屬性是個函數, 功能是輸出對象的 name 屬性的值。根據2.2部分可知 sayName 這個函數的 this 指向 xm 對象, this.name 就是 xm.name。下面定義一個新對象, 并把 xm.sayName 這個函數的 this 指向新定義的對象。

新定義一個對象 xh:

let xh = {name: '小紅'};

對象 xh 只有 name 屬性, 沒有 sayName 屬性, 如果想讓 xh 也使用 sayName 函數來輸出自己的名字, 那么就要在調用 sayName 時讓它的 this 指向小紅, 以達到 this.name 等于 xh.name 的目的。 這個目的就可以通過 call 和 apply 兩個函數來實現。 以call 函數為例來實現這個需求, 只需要這樣寫就可以了:

xm.sayName.call(xh); // 小紅xm.sayName.apply(xh); // 小紅

其中fn為xm.sayName; targetThis為xh, 這是因為targetThis的指向就是xh, 此結論可以由 2.2部分 的內容得到。

2.4.1 call 和 apply 的區別

call 和 apply 的區別僅僅是要傳給fn的參數的形式不同:對于apply,傳給fn的參數argument是個數組,數組由所有參數組成;對于call,傳給fn的參數argument直接是所有參數的排列, 直接一個個寫入就可以。

例如要傳給函數fn三個參數: 1、2、3. 則對于 call和apply調用的方法分別是:

fn.call(targetThis, 1, 2, 3); // 把 1,2,3直接傳入fn.apply(targetThis, [1,2,3]); // 把1,2,3合成數組后作為參數

2.5 箭頭函數 和 bind 函數

箭頭函數和bind函數對于this的處理與普通函數不同, 要單獨拿出來說。

2.5.1 箭頭函數

與傳統函數不同, 箭頭函數本身不包含this, 它的 this 繼承自它定義時的作用域鏈的上一層。而且箭頭函數不能作為構造函數，它也沒有文章 第1部分 所說的arguments屬性。

下面用一個例子引出箭頭函數中this的來源:

function Person(){this.age = 24;setTimeout(function(){console.log(this.age); // undefinedconsole.log(this === window); // true}, 1000);}var p = new Person(); // 創建一個實例的時候就立即執行了定時器

可以看到, 在定時器內定義的普通匿名函數無法訪問到 Person 的 age 屬性, 這是因為setTimeout是個全局函數, 它的內部的this指向的是window, 而 window 上沒有 age 這個屬性, 所以就得到了 undefined。 從下面this === window 為 true 也說明了匿名函數中this指向的是window。

將普通的函數換成箭頭函數之后可以看到如下結果:

function Person(){this.age = 24;setTimeout(() => {console.log(this.age); // 24console.log(this === p); // true}, 1000);}var p = new Person();

由上面的代碼可以看出箭頭函數內的 this 指向實例 p, 即它的 this 指向的是定義時候的作用域鏈的上一層。

說明: 這個例子僅用來引出箭頭函數的this指向的來源, 不要像這樣使用構造函數。

2.5.2 bind函數

bind函數的作用是根據一個舊函數而創建一個新函數，語法為newFn = oldFn.bind(thisTarget)。它會將舊函數復制一份作為新函數, 然后將新函數的this永遠綁定到thisTarget指向的上下文中, 然后返回這個新函數, 以后每次調用這個新函數時, 無論用什么方法都無法改變這個新函數的 this 指向。例如:

// 創建一個對象有 name 和 sayName 屬性let p1 = {name: 'P1',sayName(){ console.log(this.name); // 訪問函數指向的 this 的 name 屬性}}p1.sayName(); // P1// 創建一個對象 p2, 并把這個對象作為bind函數綁定的thislet p2 = {name: 'P2'}// 將p1的 sayName 函數的 this 綁定到 p2 上, 生成新函數 sayP2Name 并返回let sayP2Name = p1.sayName.bind(p2); // 由于此時 sayP2Name 的內部 this 已經綁定了 p2, // 所以即使是按 文章2.1部分 所說的直接調用 sayP2Name, 它的 this 也是指向 p2 的, 并不是指向全局上下文或者 undefinedsayP2Name(); // P2// 定義新對象, 嘗試將 sayP2Name 的 this 指向到 p3 上let p3 = {name: 'P3'}// 嘗試使用 call和apply 函數來將 sayP2Name 函數的 this 指向p3,// 但是由于 sayP2Name 函數的this 已經被bind函數永遠綁定到p2上了, 所以this.name仍然是p2.namesayP2Name.call(p3); // P2sayP2Name.apply(p3); // P2

通過以上內容可知一旦通過 bind 函數綁定了 this, 就再也無法改變 this 的指向了.

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持VeVb武林網。