JS系列之call & apply & bind

xiaochao 發布于2019-08-23 13:09 / 1245人閱讀

摘要：參考鏈接在中，和是對象自帶的三個方法，都是為了改變函數體內部的指向。返回值是函數方法不會立即執行，而是返回一個改變了上下文后的函數。而原函數中的并沒有被改變，依舊指向全局對象。原因是，在中，多次是無效的。

參考鏈接：https://juejin.im/post/59bfe8...

在JavaScript中，call、apply和bind是Function對象自帶的三個方法，都是為了改變函數體內部 this 的指向。

apply 、 call 、bind 三者第一個參數都是 this 要指向的對象，也就是想指定的上下文；

apply 、 call 、bind 三者都可以利用后續參數傳參；

bind 是返回對應函數，便于稍后調用；apply 、call 則是立即調用。

apply、call 的區別

func.apply(thisArg, [argsArray])
fun.call(thisArg, arg1, arg2, ...)

對于 apply、call 二者而言，作用完全一樣，只是接受參數的方式不太一樣。

var func = function(arg1, arg2) {
   ...   
};

func.call(this, arg1, arg2);
func.apply(this, [arg1, arg2]);

call 需要把參數按順序傳遞進去，而 apply 則是把參數放在數組里。

bind

fun.bind(thisArg[, arg1[, arg2[, ...]]])

bind()方法會創建一個新函數，稱為綁定函數，當調用這個綁定函數時，綁定函數會以創建它時傳入 bind()方法的第一個參數作為 this，傳入 bind() 方法的第二個以及以后的參數加上綁定函數運行時本身的參數按照順序作為原函數的參數來調用原函數。
bind返回值是函數

var obj = {
    name: "Dot"
}

function printName() {
    console.log(this.name)
}

var dot = printName.bind(obj)
console.log(dot) // function () { … }
dot()  // Dot

bind 方法不會立即執行，而是返回一個改變了上下文 this 后的函數。而原函數 printName 中的 this 并沒有被改變，依舊指向全局對象 window。

有個有趣的問題，如果連續 bind() 兩次，亦或者是連續 bind() 三次那么輸出的值是什么呢？像這樣：

var bar = function(){
    console.log(this.x);
}
var foo = {
    x:3
}
var sed = {
    x:4
}
var func = bar.bind(foo).bind(sed);
func(); //?
  
var fiv = {
    x:5
}
var func = bar.bind(foo).bind(sed).bind(fiv);
func(); //?

答案是，兩次都仍將輸出 3 ，而非期待中的 4 和 5 。原因是，在Javascript中，多次 bind() 是無效的。更深層次的原因， bind() 的實現，相當于使用函數在內部包了一個 call / apply ，第二次 bind() 相當于再包住第一次 bind() ,故第二次以后的 bind 是無法生效的。

參數

function fn(a, b, c) {
    console.log(a, b, c);
}
var fn1 = fn.bind(null, "Dot");

fn("A", "B", "C");            // A B C
fn1("A", "B", "C");           // Dot A B
fn1("B", "C");                // Dot B C
fn.call(null, "Dot");      // Dot undefined undefined

call 是把第二個及以后的參數作為 fn 方法的實參傳進去，而 fn1 方法的實參實則是在 bind 中參數的基礎上再往后排。

云服務器 GPU云服務器 JS中bind、call和apply的作 js中的call和apply js 2&amp&amp1 js的 &amp標簽

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

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

call&amp;apply&amp;bind的js實現以及應用

摘要：實現使用是這樣轉換的生成新的函數，新的執行上下文通過在傳入對象中增加調用方法執行被改變，得恢復原來的值實現在這里，我們看到了一個有趣的現象，在中可以傳入數組兩大作用改變借用其他對象的方法改變如何實現執行借用其他對象的方法繼承的實現執行能借用 js實現call // example let obj = { a: 124, b: ccc }; function fn(c) ...

mgckid 2019-08-23 15:26 評論0 收藏0
JS手寫bind之處理new的情況詳解

　　你有遇見過給bind返回的函數做new操作的場景，本篇主要講述的就是實現一下兼容new操作的bind寫法，順便學習一下new操作符，為大家提供下參考。　　大家可以去看下關于 JS 中 bind 方法的實現的文章，并給出了實現：　　Function.prototype.myBind=function(thisArg,...prefixArgs){ 　　constfn=this; 　　return...

3403771864 2022-11-19 22:09 評論0 收藏0
apply&amp;&amp;call&amp;&amp;bind

摘要：用來改變函數的對象的指向都是用來改變函數的對象的指向的。后面的參數是調用方法的參數。都可以利用后續參數傳參。用來改變函數的this對象的指向都是用來改變函數的this對象的指向的。第一個參數都是this要指向的對象。后面的參數是調用方法的參數。都可以利用后續參數傳參。 var xw={ name: 小王, gender: 男, age: 24, ...

whataa 2019-08-22 15:37 評論0 收藏0
Hard binding &amp; Soft binding detailed explanati

摘要：硬綁定會大大降低函數的靈活性，使用硬綁定之后就無法使用像隱式綁定或顯示綁定來修改。如果可以給默認綁定指定一個全局對象和意外的值，那就可以實現和硬綁定相同的效果，同時保留隱式綁定或顯示綁定修改的能力。 JavaScript中硬綁定與軟綁定詳解 JS中硬綁定這種方式可以把this強制綁定到指定的對象(除了使用new時)，防止函數調用時應用默認綁定規則(非嚴格模式下全局對象-window| ...

xiyang 2019-08-26 12:11 評論0 收藏0
《javascript高級程序設計》函數調用模式 &amp; this深度理解

在上一篇文章（《javascript高級程序設計》筆記：Function類型）中稍微提及了一下函數對象的屬性—this，在這篇文章中有深入的說明：函數的三種簡單調用模式 1 函數模式定義的函數，如果單獨調用，不將其與任何對象關聯，那么就是函數調用模式 function fn(num1, num2) { console.log(this); } // 直接在全局調用 fn();// w...

wyk1184 2019-08-21 16:22 評論0 收藏0