call() , apply() 與 bind() 實例詳解

wayneli 發(fā)布于2019-08-26 18:28 / 3458人閱讀

摘要：當沒有使用而直接調(diào)用時指向?qū)ο蠛瘮?shù)和函數(shù)非常的相似，第一個參數(shù)都用來設置目標函數(shù)運行時的指向。輸出的結果為結果證明兩個地方傳入的參數(shù)都會被傳給目標函數(shù)，函數(shù)拷貝調(diào)用時傳入的參數(shù)會追加在函數(shù)調(diào)用時傳入的參數(shù)后面。

call() , apply() 與 bind() 詳解

我們知道可以用call(), apply() 和 bind()這三個函數(shù)都是用來完成函數(shù)調(diào)用，并且設置this指向。 call()和apply()是 ECMAScript3 標準引入，而bind()函數(shù)則是在 ECMAScript 5 引入。這邊文章會用幾個小例子來回憶一下他們之間有什么不一樣。

用法

call()和apply() 會立即調(diào)用函數(shù)，而bind()只會返回一個函數(shù)引用，當后面真正調(diào)用返回的函數(shù)的時候，函數(shù)里面的this將會指向給bind()函數(shù)傳入的參數(shù)，并在調(diào)用新函數(shù)時，將給定參數(shù)列表作為原函數(shù)的參數(shù)序列的前若干項，所以 bind()函數(shù)非常適合在事件回調(diào)的時候修改this 指向，有React 經(jīng)驗的朋友應該會有更深的感受。

call()

var dist = "Beijing";

function greet(name, hometown) {
  var word =  `Welcome ${name} from ${hometown} to ${this.dist}!`
  console.log(word);
}

var obj1 = {
  dist: "Chengdu"
};

greet.call(obj1, "Tom", "Dallas");  // Welcome Tom from Dallas to Chengdu!

greet("Jerry", "Houston"); // Welcome Jerry from Houston to Beijing!

因為greet.call(obj) 傳入了obj1作為第一個參數(shù)，所以在 greet()函數(shù)執(zhí)行時, this指向 obj1。其余的參數(shù)就將作為參數(shù)傳給greet()函數(shù)。
當沒有使用call()而直接調(diào)用greet()時, this指向 window對象.

apply()

var dist = "Beijing";

function greet(name, hometown) {
  var word =  `Welcome ${name} from ${hometown} to ${this.dist}!`
  console.log(word);
}

var obj1 = {
  dist: "Chengdu"
};

var args = ["Tom", "Dallas"];
greet.apply(obj1, args);  // Welcome Tom from Dallas to Chengdu!

greet("Jerry", "Houston"); // Welcome Jerry from Houston to Beijing!

apply()函數(shù)和call()函數(shù)非常的相似，第一個參數(shù)都用來設置目標函數(shù)運行時的this指向。唯一的區(qū)別就是 apply()的第二個參數(shù)接受一個數(shù)組，其他表現(xiàn)則一樣。

bind()

var dist = "Beijing";

function greet(name, hometown) {
    var word = `Welcome ${name} from ${hometown} to ${this.dist}!`;
    console.log(word);
}

var obj1 = {
    dist: "Chengdu",
};

var obj2 = {
    dist: "Chongqing",
};

var greet1 = greet.bind(obj1, "Tom", "Dallas");
var greet2 = greet.bind(obj2, "Spike", "San Antonio");

greet("Jerry", "Houston");

greet1();
setTimeout(function() {
    greet2();
}, 1000);

這個例子會更加復雜一點，輸出結果如下：

  Welcome Jerry from Houston to Beijing!
  Welcome Tom from Dallas to Chengdu!
  Welcome Spike from San Antonio to Chongqing!

在上面例子中， bind()函數(shù)并不會立即執(zhí)行目標函數(shù)，而是返回了一個函數(shù)的拷貝，但this會指向bind()的第一個參數(shù)，其余傳給bind()的參數(shù)都會按順序傳給返回的函數(shù)。我們就可以異步調(diào)用這個函數(shù)返回值了。但是需要注意的是，bind()方法返回的函數(shù)拷貝在使用 new 操作時，第一個參數(shù)是會被忽略的。

那么新的問題又來了，如果在調(diào)用返回的函數(shù)拷貝的時候，又傳入了新的參數(shù)，會發(fā)生什么呢，只有再寫一個例子試試了。

var obj1 = {
    dist: "Chengdu",
};

function greet(name, hometown) {
    console.log(Array.prototype.slice.call(arguments));
    var word = `Welcome ${name} from ${hometown} to ${this.dist}!`;
    console.log(word);
}

var greet1 = greet.bind(obj1, "Tom", "Dallas");

greet1("Jerry", "Houston");

輸出的結果為:

[ "Tom", "Dallas", "Jerry", "Houston" ]
Welcome Tom from Dallas to Chengdu!

結果證明兩個地方傳入的參數(shù)都會被傳給目標函數(shù)，函數(shù)拷貝調(diào)用時傳入的參數(shù)會追加在bind()函數(shù)調(diào)用時傳入的參數(shù)后面。

以上就是所有關于 call(), apply() 和 bind() 三個函數(shù)的實例了。大家有什么疑問建議留言討論。

本文始發(fā)于 bbwho.com 站點

云服務器 GPU云服務器 JS中bind、call和apply的作 apply與call的區(qū)別 js中的call和apply ng-bind-html詳解

文章版權歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/110246.html

詳解call bind apply - 區(qū)別/使用場景/es6實現(xiàn)/es3實現(xiàn)

摘要：的區(qū)別接收數(shù)組一連串參數(shù)返回一個函數(shù)的使用場景將類數(shù)組含有屬性的對象轉(zhuǎn)化為數(shù)組類數(shù)組例如通過獲取的元素含有屬性的對象具有屬性，并且可以通過下標來訪問其中的元素，但是沒有中的等方法。 call,apply,bind的區(qū)別 apply接收數(shù)組 func.apply(obj, [arus]) call一連串參數(shù) func.call(obj, param1, param2....) bind...

Alex 2019-08-23 17:07 評論0 收藏0
JS中的call、apply、bind方法詳解

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

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

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

lastSeries 2019-08-21 12:10 評論0 收藏0
JavaScript 中 apply 、call 的詳解

摘要：參數(shù)和是放在數(shù)組中傳入函數(shù)，分別對應參數(shù)的列表元素。而原函數(shù)中的并沒有被改變，依舊指向全局對象。保存原函數(shù)保存需要綁定的上下文剩余的參數(shù)轉(zhuǎn)為數(shù)組返回一個新函數(shù)下一篇介紹閉包中閉包的詳解。 apply 和 call 的區(qū)別 ECMAScript 規(guī)范給所有函數(shù)都定義了 call 與 apply 兩個方法，它們的應用非常廣泛，它們的作用也是一模一樣，只是傳參的形式有區(qū)別而已。 apply(...

Meils 2019-08-21 15:27 評論0 收藏0