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

sarva 發布于2019-08-23 14:11 / 2244人閱讀

摘要：在面向對象的中，我們了解到在中，一切都是對象。到目前為止，我們已將函數視為由名稱可選，也可以是匿名函數組成的對象及其在調用時執行的代碼。這意味著，我們可以調用任何函數，并在調用函數中明確指定。和用于完全相同的目的。

What" s “this”

在面向對象的JS中，我們了解到在JS中，一切都是對象。因為一切都是對象，我們開始明白我們可以為函數設置和訪問其他屬性。而this提供了一種更優雅的方式隱式“傳遞”一個對象的引用。
關于this，我們常見的誤區：

認為this指向函數本身

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

認為this指向函數作用域

關于這兩個誤區，其實在官方文檔中有很明確的說明。

函數的調用方式決定了this的值。

那么this并不是指向函數本身，也不是指向函數的作用域，而是在運行時進行綁定的，并不是在編寫時綁定，它的上下文也取決于函數調用時的各種條件。this的綁定和函數聲明的位置沒有任何關系，只取決于函數的調用方式。

它指向什么完全取決于函數在哪里被調用，也就是說，誰調用，誰負責

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

（這部分并不是翻譯的原文，因為原文關于this講的不是很細致，而我覺得理解了this，才能了解bind（）、apply（）、call（）有什么用處。所以這塊是我根據《你不知道的JavaScript 上卷》this的部分，粗略的介紹了部分，有興趣的話可以看看那本書，關于this講的很細致。）

call(), apply() and bind()

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

現在，我將通過示例介紹每個函數中出現的這3種類似方法。

bind()

官方文檔說： bind（）方法創建一個新函數，當調用時，將其關鍵字設置為提供的值。

這非常強大。它讓我們在調用函數時明確定義它的值。我們來看看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!"

讓我們分解吧。當我們使用bind（）方法時：

JS引擎正在創建一個新的pokemonName實例，并將pokemon綁定為此變量。重要的是要理解它復制了pokemonName函數。

在創建了pokemonName函數的副本之后，它可以調用logPokemon（），盡管它最初不在pokemon對象上。它現在將識別其屬性（Pika和Chu）及其方法。

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

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（）方法調用具有給定此值的函數和多帶帶提供的參數。

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

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

1、接受其他參數

2、執行它立即調用的函數。

3、call（）方法不會復制正在調用它的函數。

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

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

這些內置的方法存在于每個JS函數中都非常有用。即使你最終沒有在日常編程中使用它們，你仍然會在閱讀其他人的代碼時經常遇到它們。

云服務器 GPU云服務器 JS中bind、call和apply的作 js中的call和apply apply與call的區別 javascript call

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/100226.html

理解 JavaScript call()/apply()/bind()

摘要：理解文章中已經比較全面的分析了在中的指向問題，用一句話來總結就是的指向一定是在執行時決定的，指向被調用函數的對象。與和直接執行原函數不同的是，返回的是一個新函數。這個新函數包裹了原函數，并且綁定了的指向為傳入的。理解 JavaScript this 文章中已經比較全面的分析了 this 在 JavaScript 中的指向問題，用一句話來總結就是：this 的指向一定是在執行時決定的，...

duan199226 2019-08-23 14:27 評論0 收藏0
JavaScript函數的call，apply和bind

摘要：它們有明確的和成員函數的定義，只有的實例才能調用這個的成員函數。用和調用函數里用和來指定函數調用的，即指針的指向。同樣，對于一個后的函數使用或者，也無法改變它的執行，原理和上面是一樣的。函數里的this指針要理解call，apply和bind，那得先知道JavaScript里的this指針。JavaScript里任何函數的執行都有一個上下文（context），也就是JavaScri...

alighters 2019-08-22 14:48 評論0 收藏0
理解JavaScript中的call,apply和bind方法

摘要：輸出的作用與和一樣，都是可以改變函數運行時上下文，區別是和在調用函數之后會立即執行，而方法調用并改變函數運行時上下文后，返回一個新的函數，供我們需要時再調用。前言 js中的call(), apply()和bind()是Function.prototype下的方法，都是用于改變函數運行時上下文，最終的返回值是你調用的方法的返回值，若該方法沒有返回值，則返回undefined。這幾個方法...

chaosx110 2019-08-26 12:23 評論0 收藏0
JS中的call、apply、bind方法詳解

摘要：不能應用下的等方法。首先我們可以通過給目標函數指定作用域來簡單實現方法保存，即調用方法的目標函數考慮到函數柯里化的情況，我們可以構建一個更加健壯的這次的方法可以綁定對象，也支持在綁定的時候傳參。原因是，在中，多次是無效的。 bind 是返回對應函數，便于稍后調用；apply 、call 則是立即調用。 apply、call 在 javascript 中，call 和 apply 都是...

zombieda 2019-08-23 15:27 評論0 收藏0
JS基礎篇--call、apply、bind方法詳解

摘要：首先我們可以通過給目標函數指定作用域來簡單實現方法保存，即調用方法的目標函數考慮到函數柯里化的情況，我們可以構建一個更加健壯的這次的方法可以綁定對象，也支持在綁定的時候傳參。原因是，在中，多次是無效的。而則會立即執行函數。 bind 是返回對應函數，便于稍后調用；apply 、call 則是立即調用。 apply、call 在 javascript 中，call 和 apply 都是...

lastSeries 2019-08-21 12:10 評論0 收藏0
javascript關于this 以及this的顯示設置(apply、call、bind)

摘要：如果連續呢結果會是什么結果還是第一個原因是，在中，多次是無效的。更深層次的原因，的實現，相當于使用函數在內部包了一個，第二次相當于再包住第一次故第二次以后的是無法生效的。 this 1.其實js中的this沒那么難理解，當找不到this時記住一句話：誰調我，我就指誰！new 誰指誰 function text1(){ console.log(this); //指wind...

LiveVideoStack 2019-08-21 11:20 評論0 收藏0