JS系列之call & apply & bind

xiaochao 發(fā)布于2019-08-23 13:09 / 1256人閱讀

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

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

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

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

apply 、 call 、bind 三者都可以利用后續(xù)參數(shù)傳參；

bind 是返回對應(yīng) 函數(shù)，便于稍后調(diào)用；apply 、call 則是立即調(diào)用。

apply、call 的區(qū)別

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

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

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

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

call 需要把參數(shù)按順序傳遞進(jìn)去，而 apply 則是把參數(shù)放在數(shù)組里。

bind

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

bind()方法會創(chuàng)建一個(gè)新函數(shù)，稱為綁定函數(shù)，當(dāng)調(diào)用這個(gè)綁定函數(shù)時(shí)，綁定函數(shù)會以創(chuàng)建它時(shí)傳入 bind()方法的第一個(gè)參數(shù)作為 this，傳入 bind() 方法的第二個(gè)以及以后的參數(shù)加上綁定函數(shù)運(yùn)行時(shí)本身的參數(shù)按照順序作為原函數(shù)的參數(shù)來調(diào)用原函數(shù)。
bind返回值是函數(shù)

var obj = {
    name: "Dot"
}

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

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

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

有個(gè)有趣的問題，如果連續(xù) bind() 兩次，亦或者是連續(xù) 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() 的實(shí)現(xiàn)，相當(dāng)于使用函數(shù)在內(nèi)部包了一個(gè) call / apply ，第二次 bind() 相當(dāng)于再包住第一次 bind() ,故第二次以后的 bind 是無法生效的。

參數(shù)

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 是把第二個(gè)及以后的參數(shù)作為 fn 方法的實(shí)參傳進(jìn)去，而 fn1 方法的實(shí)參實(shí)則是在 bind 中參數(shù)的基礎(chǔ)上再往后排。