Javascript：call（），apply（）和bind（）

WrBug 發(fā)布于2019-08-30 15:54 / 1760人閱讀

摘要：在面向?qū)ο蟮闹?，我們了解到在中，一切都是?duì)象。到目前為止，我們已將函數(shù)視為由名稱可選，也可以是匿名函數(shù)組成的對(duì)象及其在調(diào)用時(shí)執(zhí)行的代碼。這意味著，我們可以調(diào)用任何函數(shù)，并在調(diào)用函數(shù)中明確指定。和用于完全相同的目的。

What" s “this”

在面向?qū)ο蟮腏S中，我們了解到在JS中，一切都是對(duì)象。因?yàn)橐磺卸际菍?duì)象，我們開始明白我們可以為函數(shù)設(shè)置和訪問其他屬性。而this提供了一種更優(yōu)雅的方式隱式“傳遞”一個(gè)對(duì)象的引用。
關(guān)于this，我們常見的誤區(qū)：

認(rèn)為this指向函數(shù)本身

function f1() {
    console.log(this)
}
f1() // window

認(rèn)為this指向函數(shù)作用域

關(guān)于這兩個(gè)誤區(qū)，其實(shí)在官方文檔中有很明確的說明。

函數(shù)的調(diào)用方式?jīng)Q定了this的值。

那么this并不是指向函數(shù)本身，也不是指向函數(shù)的作用域，而是在運(yùn)行時(shí)進(jìn)行綁定的，并不是在編寫時(shí)綁定，它的上下文也取決于函數(shù)調(diào)用時(shí)的各種條件。this的綁定和函數(shù)聲明的位置沒有任何關(guān)系，只取決于函數(shù)的調(diào)用方式。

它指向什么完全取決于函數(shù)在哪里被調(diào)用，也就是說，誰調(diào)用，誰負(fù)責(zé)

而bind（）、apply（）、call（）則是可以更改this指向的方法

（這部分并不是翻譯的原文，因?yàn)樵年P(guān)于this講的不是很細(xì)致，而我覺得理解了this，才能了解bind（）、apply（）、call（）有什么用處。所以這塊是我根據(jù)《你不知道的JavaScript 上卷》this的部分，粗略的介紹了部分，有興趣的話可以看看那本書，關(guān)于this講的很細(xì)致。）

call(), apply() and bind()

到目前為止，我們已將函數(shù)視為由名稱（可選，也可以是匿名函數(shù)）組成的對(duì)象及其在調(diào)用時(shí)執(zhí)行的代碼。但這不是全部真相，實(shí)際上函數(shù)看起來更接近下面的圖像：

現(xiàn)在，我將通過示例介紹每個(gè)函數(shù)中出現(xiàn)的這3種類似方法。

bind()

官方文檔說： bind（）方法創(chuàng)建一個(gè)新函數(shù)，當(dāng)調(diào)用時(shí)，將其關(guān)鍵字設(shè)置為提供的值。

這非常強(qiáng)大。它讓我們在調(diào)用函數(shù)時(shí)明確定義它的值。我們來看看cooooode：

var pokemon = {
    firstname: "Pika",
    lastname: "Chu ",
    getPokeName: function() {
        var fullname = this.firstname + " " + this.lastname;
        return fullname;
    }
};

var pokemonName = function() {
    console.log(this.getPokeName() + "I choose you!");
};

var logPokemon = pokemonName.bind(pokemon); // creates new object and binds pokemon. "this" of pokemon === pokemon now

logPokemon(); // "Pika Chu I choose you!"

讓我們分解吧。當(dāng)我們使用bind（）方法時(shí)：

JS引擎正在創(chuàng)建一個(gè)新的pokemonName實(shí)例，并將pokemon綁定為此變量。重要的是要理解它復(fù)制了pokemonName函數(shù)。

在創(chuàng)建了pokemonName函數(shù)的副本之后，它可以調(diào)用logPokemon（），盡管它最初不在pokemon對(duì)象上。它現(xiàn)在將識(shí)別其屬性（Pika和Chu）及其方法。

很酷的是，在我們bind（）一個(gè)值后，我們可以像使用任何其他正常函數(shù)一樣使用該函數(shù)。我們甚至可以更新函數(shù)來接受參數(shù)，并像這樣傳遞它們：

var pokemon = {
    firstname: "Pika",
    lastname: "Chu ",
    getPokeName: function() {
        var fullname = this.firstname + " " + this.lastname;
        return fullname;
    }
};

var pokemonName = function(snack, hobby) {
    console.log(this.getPokeName() + "I choose you!");
    console.log(this.getPokeName() + " loves " + snack + " and " + hobby);
};

var logPokemon = pokemonName.bind(pokemon); // creates new object and binds pokemon. "this" of pokemon === pokemon now

logPokemon("sushi", "algorithms"); // Pika Chu  loves sushi and algorithms

call(), apply()

call（）的官方文檔說： call（）方法調(diào)用具有給定此值的函數(shù)和多帶帶提供的參數(shù)。

這意味著，我們可以調(diào)用任何函數(shù)，并在調(diào)用函數(shù)中明確指定what_ this _should reference_。真的類似于bind（）方法！這絕對(duì)可以讓我們免于編寫hacky代碼。

bind（）和call（）之間的主要區(qū)別在于call（）方法：

1、接受其他參數(shù)

2、執(zhí)行它立即調(diào)用的函數(shù)。

3、call（）方法不會(huì)復(fù)制正在調(diào)用它的函數(shù)。

call（）和apply（）用于完全相同的目的。它們之間的唯一區(qū)別是_ call（）期望所有參數(shù)都多帶帶傳遞，而apply（）需要一個(gè)數(shù)組。例：

var pokemon = {
    firstname: "Pika",
    lastname: "Chu ",
    getPokeName: function() {
        var fullname = this.firstname + " " + this.lastname;
        return fullname;
    }
};

var pokemonName = function(snack, hobby) {
    console.log(this.getPokeName() + " loves " + snack + " and " + hobby);
};

pokemonName.call(pokemon,"sushi", "algorithms"); // Pika Chu  loves sushi and algorithms
pokemonName.apply(pokemon,["sushi", "algorithms"]); // Pika Chu  loves sushi and algorithms

這些內(nèi)置的方法存在于每個(gè)JS函數(shù)中都非常有用。即使你最終沒有在日常編程中使用它們，你仍然會(huì)在閱讀其他人的代碼時(shí)經(jīng)常遇到它們。