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

wayneli 發布于2019-08-26 18:28 / 3454人閱讀

摘要：當沒有使用而直接調用時指向對象函數和函數非常的相似，第一個參數都用來設置目標函數運行時的指向。輸出的結果為結果證明兩個地方傳入的參數都會被傳給目標函數，函數拷貝調用時傳入的參數會追加在函數調用時傳入的參數后面。

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

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

用法

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

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作為第一個參數，所以在 greet()函數執行時, this指向 obj1。其余的參數就將作為參數傳給greet()函數。
當沒有使用call()而直接調用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()函數和call()函數非常的相似，第一個參數都用來設置目標函數運行時的this指向。唯一的區別就是 apply()的第二個參數接受一個數組，其他表現則一樣。

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()函數并不會立即執行目標函數，而是返回了一個函數的拷貝，但this會指向bind()的第一個參數，其余傳給bind()的參數都會按順序傳給返回的函數。我們就可以異步調用這個函數返回值了。但是需要注意的是，bind()方法返回的函數拷貝在使用 new 操作時，第一個參數是會被忽略的。

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

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!

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

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

本文始發于 bbwho.com 站點

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

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

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

詳解call bind apply - 區別/使用場景/es6實現/es3實現

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

Alex 2019-08-23 17:07 評論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 中 apply 、call 的詳解

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

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