理解JavaScript中的call,apply和bind方法

chaosx110 發布于2019-08-26 12:23 / 1058人閱讀

摘要：輸出的作用與和一樣，都是可以改變函數運行時上下文，區別是和在調用函數之后會立即執行，而方法調用并改變函數運行時上下文后，返回一個新的函數，供我們需要時再調用。

前言

js中的call(), apply()和bind()是Function.prototype下的方法，都是用于改變函數運行時上下文，最終的返回值是你調用的方法的返回值，若該方法沒有返回值，則返回undefined。這幾個方法很好地體現了js函數式語言特性，在js中幾乎每一次編寫函數式語言風格的代碼，都離不開call和apply，能夠熟練運用它們，是真正成為一名jser程序員的重要一步。

apply()

使用 apply，你可以繼承其他對象的方法：

var max = Math.max.apply(null, [1, 2, 3, 4, 5]);
console.log(max); // 輸出5

注意這里apply()的第一個參數是null，在非嚴格模式下，第一個參數為null或者undefined時會自動替換為指向全局對象，
apply()的第二個參數為數組或類數組。

call()

call()是apply()的一顆語法糖，作用和 apply() 一樣，同樣可實現繼承，唯一的區別就在于call()接收的是參數列表，而apply()則接收參數數組。

var max = Math.max.call(null, 1, 2, 3, 4, 5);
console.log(max); // 輸出5

bind()

bind()的作用與call()和apply()一樣，都是可以改變函數運行時上下文，區別是call()和apply()在調用函數之后會立即執行，而bind()方法調用并改變函數運行時上下文后，返回一個新的函數，供我們需要時再調用。

var person = {
  name: "person",
  getName: function() {
    return this.name;
  }
}
var boy = {
   name: "twy"
}
// bind()返回一個新函數，供以后調
var getName = person.getName.bind(boy);

// 現在調用
console.log(getName());    // 輸出wy

用apply()模擬實現bind()：

Function.prototype.bind = function(context) {
  // 保存調用函數的引用，這里是getName()
  var self = this;
  // 返回一個新函數
  return function(){
    return self.apply(context, arguments);
  }
}
var person = {
  name: "twy"
}
var getName = function(){
  console.info(this.name);
}.bind(person);
// 執行bind()方法內返回的新函數
getName();

在返回的新函數內部，self.apply(context, arguments)才是執行原來的getName函數，相當于執行getName.apply(person);

如何選用

如果不需要關心具體有多少參數被傳入函數，選用apply()；

如果確定函數可接收多少個參數，并且想一目了然表達形參和實參的對應關系，用call()；

如果我們想要將來再調用方法，不需立即得到函數返回結果，則使用bind();

總結

call()、apply()和bind()都是用來改變函數執行時的上下文，可借助它們實現繼承；

call()和apply()唯一區別是參數不一樣，call()是apply()的語法糖；

bind()是返回一個新函數，供以后調用，而apply()和call()是立即調用。

云服務器 GPU云服務器 JS中bind、call和apply的作 js中的call和apply apply與call的區別 apply()方法

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

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

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

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

duan199226 2019-08-23 14:27 評論0 收藏0
ES5 call,apply,bind方法總結（包括理解this的指向問題）

總結call,apply,bind方法的理解使用和區別。 call,apply,bind這三個方法在JavaScript中是用來改變函數調用的this指向。那么改變函數this指向有什么用呢？我們先來看一段代碼 var a= { name:harden, fn:function () { console.log(this.name); } } var b =...

nanchen2251 2019-08-23 18:15 評論0 收藏0
深入理解JavaScript（三）：獲取數組中的最大值方法（this,apply）

摘要：三個方法的作用，都是改變的指向，只是用法稍微有些區別什么是既不指向函數自身，也不指函數的詞法作用域。它在函數定義的時候是確定不了的在函數被調用時才發生的綁定，也就是說具體指向什么，取決于你是怎么調用的函數。 1.排序法思路：給數組先排序(由大到小排序),第一項就是最大值 let arr = [1,5,6,7,9,20,40,2,3]; let max1 = arr.sort(func...

canopus4u 2019-08-26 10:42 評論0 收藏0
復習javascript中call,apply,bind的用法

摘要：綁定函數被調用時，也接受預設的參數提供給原函數。一個綁定函數也能使用操作符創建對象這種行為就像把原函數當成構造器。一直很難理解js中的call apply bind，在w3schools,mdn閱讀了，也看了很多相關的文章，今天我來寫下我理解的call apply bind 首先創建一個函數 function man(){} man.prototype = { name: ...

darryrzhong 2019-08-26 11:30 評論0 收藏0
理解javascript中apply( ), call( ), bind( )

摘要：，，和都是用來改變函數執行時的上下文也就是說改變的指向問題，是的方法，引入是因為沒有將設置成行參。一般都是庫里面用不推薦自己使用和。和唯一區別是參數不一樣，是的語法糖是返回一個新函數供以后調用，相比其他兩個比較常用。而和是立即調用。 apply()，call()，和bind()都是用來改變函數執行時的上下文也就是說改變this的指向問題，是prototype的方法，引入是因為js沒有將...

LiveVideoStack 2019-08-26 10:27 評論0 收藏0