HOWTO · JavaScript
使用 JavaScript 將此關鍵字傳遞給函式
本文將幫助你瞭解 this 關鍵字對給定 JavaScript 函式的設定。
本頁內容
this 關鍵字是 JavaScript 中的一個關鍵概念。在 JavaScript 中，this 是物件的控制代碼。
與此相關的物件可以根據它是公共的、實體上的還是建構函式中的而直觀地改變。它也可以根據函式概念過程 bind、call 和 apply 的數量明顯變化。
在本教程中，你將發現 this 關鍵字與依賴上下文直觀相關的內容，你將發現如何使用 bind、call 和 apply 方法來識別 this 的值直接地。
在 JavaScript 中使用 call() 和 apply() 方法
call() 和 apply() 都做同樣的事情：它們呼叫一個給定上下文和可選引數的函式。這兩種方法的唯一區別是 call() 接受一個接一個的引數，而 apply() 接受一個引數陣列。
在這個例子中，我們將建立一個物件和一個引用它但沒有任何 this 上下文的函式。
例子：
const fruit = {
name: 'Apple',
location: 'Nepal',
} function summ() {
console.log(`${this.name} is found in ${this.location}.`)
} summ()
輸出：
"result is found in https://fiddle.jshell.net/_display/?editor_console=true."
因為 summ 和 fruit 是不相關的，所以當全域性物件搜尋這些屬性時，單獨執行 summ 將是未定義的。但是，你可以使用 call 和 apply 在方法上呼叫 this 水果上下文。
const fruit =
{
name: 'Apple',
location: 'Nepal',
}
function summ() {
console.log(`${this.name} is found in ${this.location}.`)
}
summ.call(fruit)
const fruit =
{
name: 'Apple',
location: 'Nepal',
}
function summ() {
console.log(`${this.name} is found in ${this.location}.`)
}
summ.apply(fruit)
輸出：
"Apple is found in Nepal."
現在，當使用這些策略時，fruit 和 summ 之間存在聯絡。讓我們確保我們在同一個頁面上並且知道 this 是什麼。
function printhis() {
console.log(this)
}
printhis.call(fruit)
function printhis() {
console.log(this)
}
printhis.apply(fruit)
輸出：
{
location: "Nepal",
name: "Apple"
}
this 是在這種情況下作為引數提供的物件。call() 和 apply() 在這方面是相似的，但有一個細微的區別。
除了 this 上下文之外，你還可以選擇傳遞額外的引數作為第一個引數。使用 call() 方法，你要傳遞的每個附加值都作為單獨的引數提交。
const fruit =
{
name: 'Apple',
location: 'Nepal',
}
function longerSumm(family, year) {
console.log(`${this.name} is found in ${this.location}. It is from ${
family} family found in ${year}.`)
}
longerSumm.call(fruit, 'malius', 1900)
輸出：
"Apple is found in Nepal. It is from malius family found in 1900."
如果你使用 apply() 傳送相同的引數，則會發生這種情況。
const fruit =
{
name: 'Apple',
location: 'Nepal',
}
function longerSumm(family, year) {
console.log(`${this.name} is found in ${this.location}. It is from ${
family} family found in ${year}.`)
}
longerSumm.apply(fruit, 'malius', 1932)
輸出：
Uncaught TypeError: CreateListFromArrayLike called on non-object
相反，你必須將陣列中的所有引數傳遞給 apply()。
const fruit =
{
name: 'Apple',
location: 'Nepal',
}
function longerSumm(family, year) {
console.log(`${this.name} is found in ${this.location}. It is from ${
family} family found in ${year}.`)
}
longerSumm.apply(fruit, ['malius', 1900])
輸出：
"Apple is found in Nepal. It is from malius family found in 1900."
單獨傳遞引數和在陣列中傳遞引數之間的差異很小。使用 apply() 可能更容易，因為如果任何引數細節發生變化，它不需要修改函式呼叫。
在 JavaScript 中使用 bind() 方法
你可能需要重複調用具有另一個物件的 this 上下文的方法，在這種情況下，你可以使用 bind() 方法來構造一個帶有有意連結的 this 的新函式。
const fruit = {
name: 'Apple',
location: 'Nepal',
} function summ() {
console.log(`${this.name} is found in ${this.location}.`)
} const newSummary = summ.bind(fruit)
newSummary()
輸出：
"Apple is found in Nepal."
當你在本例中呼叫 newSummary 時，它將始終返回與其相關的原始值。如果你嘗試將新的 this 上下文繫結到它，它將失敗。
因此，你始終可以依靠連結函式來提供你期望的 this 值。
const fruit = {
name: 'Apple',
location: 'Nepal',
} function summ() {
console.log(`${this.name} is found in ${this.location}.`)
} const newSummary = summ.bind(fruit)
newSummary()
const fruit2 = {
name: 'Mango',
location: 'Terai',
}
newSummary.bind(fruit2)
newSummary()
輸出：
"Apple is found in Nepal."
即使此示例嘗試第二次繫結 newSummary，它仍保留第一次繫結時的原始上下文。
