細(xì)說(shuō)apply call和bind

JasinYip 發(fā)布于2019-08-22 15:04 / 2489人閱讀

摘要：會(huì)創(chuàng)建一個(gè)新的函數(shù)，成為綁定函數(shù)，目標(biāo)函數(shù)和綁定函數(shù)有共同的函數(shù)體。新的目標(biāo)函數(shù)被調(diào)用的時(shí)候，就會(huì)綁定到函數(shù)的第一個(gè)參數(shù)上，且該參數(shù)不能被重寫。當(dāng)新的目標(biāo)函數(shù)被創(chuàng)建的時(shí)候，目標(biāo)函數(shù)的的值通過(guò)被設(shè)成了傳入的參數(shù)的值。

bind 概述

bind方法是綁定在了Function.prototype上。這個(gè)方法會(huì)創(chuàng)建一個(gè)新的函數(shù)，當(dāng)被調(diào)用時(shí)，會(huì)將其this關(guān)鍵字，設(shè)置為一個(gè)提供的值。

bind()會(huì)創(chuàng)建一個(gè)新的函數(shù)，成為綁定函數(shù)，目標(biāo)函數(shù)和綁定函數(shù)有共同的函數(shù)體。新的目標(biāo)函數(shù)被調(diào)用的時(shí)候，this就會(huì)綁定到bind()函數(shù)的第一個(gè)參數(shù)上，且該參數(shù)不能被重寫。在函數(shù)調(diào)用的時(shí)候，也可以為目標(biāo)函數(shù)增加新的參數(shù)，參數(shù)跟在第一個(gè)參數(shù)之后。

bind綁定this指向

var a = "hello 222"
var obj = {
    "a":"hello 111",
    say:function(){
        return this.a
    }
}


var otherSay = obj.say


console.log(obj.say())       //hello 111
console.log(otherSay())      //hello 222

我們都知道，this的指向取決于函數(shù)的調(diào)用而不是生命的位置，所以，otherSay()被調(diào)用的this指向全局對(duì)象，這時(shí)候a并不是obj里邊定義的。所以會(huì)輸出"hello 222"。

我們可以使用bind來(lái)改變otherSay()的this指向。當(dāng)然call和apply也能做到。但是bind和另外兩個(gè)方法是不一樣的。

var newSay = otherSay.bind(obj)
console.log(newSay())

綁定函數(shù)newSay(),目標(biāo)函數(shù)otherSay().用bind執(zhí)行完操作后，兩個(gè)函數(shù)共用同樣一個(gè)執(zhí)行環(huán)境，不管怎么調(diào)用，兩個(gè)函數(shù)都有同樣的this值。

背后的實(shí)現(xiàn)

bind是綁定在了Function的原型上。它是ES5提出來(lái)的，用了ES3的apply作為背后的實(shí)現(xiàn)。

Function.prototype.bind = function(obj){
    var _self = this
    return function(){
        return    _self.apply(obj)
    }
}

當(dāng)新的目標(biāo)函數(shù)被創(chuàng)建的時(shí)候，目標(biāo)函數(shù)的this的值通過(guò)apply被設(shè)成了傳入的參數(shù)的值。因?yàn)椋覀儌魅胛覀兿胍暮瘮?shù)上下文，當(dāng)函數(shù)調(diào)用的時(shí)候this就會(huì)指向了第一個(gè)參數(shù)。

函數(shù)柯里化

函數(shù)柯里化的概念是只傳給函數(shù)一部分參數(shù)就能調(diào)用他，讓他返回一個(gè)新的函數(shù)去處理另外的參數(shù)。

function add(x){
    return function(y){
        return x+y
    }
}

var add1 = add(10)
add1(20)          //30
add1(-10)         // 0

用bind()可以實(shí)現(xiàn)函數(shù)的柯里化

function gender,age,name){
    var salutation = gender === “male” ？ “Mr” : "Ms"
    if(age > 25){
        return "hello" + salutation + name
    } else{
        return "hey" + name
    }
}

這是一個(gè)很簡(jiǎn)單的函數(shù)，很好理解。

接下來(lái)，我們使用柯里化greet()方法.bind()接收的第一個(gè)參數(shù)指定的this的值。

var greetMaleAdult = greet.bind(null,"name",44)
greetMaleAdult("Peter")

var greetChild = greet(null,"",12)
greetChild("Bob")

使用bind函數(shù)，可以將greet函數(shù)柯里化，我們只需要指定最后一個(gè)參數(shù)來(lái)執(zhí)行柯里化之后的新函數(shù)，因?yàn)榍斑厓蓚€(gè)參數(shù)，d都在greet里邊定義好了。

apply和call 概述

這兩個(gè)方法放在一起將，因?yàn)閮蓚€(gè)函數(shù)基本上沒(méi)有區(qū)別。
兩個(gè)函數(shù)都是寫到了Function.prototype上面。本質(zhì)上這兩個(gè)方法可以幫助我們實(shí)現(xiàn)函數(shù)借用和指定函數(shù)的this值。apply()允許我們傳入一個(gè)參數(shù)數(shù)組來(lái)傳給函數(shù)，供這個(gè)函數(shù)使用。

改變this

當(dāng)我們使用這兩個(gè)函數(shù)的時(shí)候，傳入的第一個(gè)參數(shù)作為this的目標(biāo)指向。

var age = 11
function showAge(){
    console.log(this.age)
}

var Man = {
    age:15
}
showAge.apply(Man)      // 立即返回15

我們看到，加了一行代碼，我們改變了showAge中的this指向，開(kāi)始的時(shí)候，全局函數(shù)showAge中的指向是全局對(duì)象，但是，我們通過(guò)apply函數(shù)，把this指向了一個(gè)對(duì)象Man，這個(gè)時(shí)候，會(huì)立即返回函數(shù)的執(zhí)行結(jié)果15

apply和bind不一樣的地方在于，bind不會(huì)立即返回結(jié)果，會(huì)返回一個(gè)新的函數(shù)，我們調(diào)用這個(gè)函數(shù)，才會(huì)返回結(jié)果

var age = 11
function showAge(){
    console.log(this.age)
}

var Man = {
    age:15
}

showAge.bind(Man)    // 并不會(huì)立即執(zhí)行
showAge.bind(Man)()   // 執(zhí)行返回的函數(shù)，顯示15

另外，在回調(diào)函數(shù)中，我們也可以通過(guò)apply或者call方法手動(dòng)設(shè)置this的指向。

var obj = {
    fullname:"not set",
    showName:function(firstname,lastname){
        this.fullname = firstname + " " +lastname
    }
}

function getFullname(firstname,lastname,callback,callbackobj){
    callback.call(callbackobj,firstname,lastname)   
}

getFullname("zhang","heihei",obj.showName,obj)
console.log(obj.fullname)   // zhang heihei

函數(shù)借用

call和apply的存在可以讓我們借用其他對(duì)象的函數(shù)來(lái)處理。最典型的例子就是我們可以通過(guò)函數(shù)借用來(lái)讓類數(shù)組對(duì)象使用數(shù)據(jù)的方法。

var arrayLikeObj = {
    "0":"haha",
    "1":1,
    "2":true,
    "3":[1,2,3],
    length:4
}

var newArr = Array.prototype.slice.call(arrayLikeObj,0)  // ["haha",1,true,Array[3]]

var index = Array.prototype.indexOf.apply(arrayLikeObj,1)   //1

這樣操作的好處就是既可以保留對(duì)象上的那些屬性，又可以隨時(shí)使用數(shù)組的方法。

總結(jié)

三個(gè)函數(shù)的最大區(qū)別在于：bind函數(shù)是返回一個(gè)函數(shù)（內(nèi)部實(shí)現(xiàn)也是用的apply）供后續(xù)調(diào)用，而call和apply是立即調(diào)用返回執(zhí)行結(jié)果。

另外，在箭頭函數(shù)中，apply和call會(huì)失效，因?yàn)椋^函數(shù)的this是確定的，是所在的執(zhí)行上下文，而不是調(diào)用的時(shí)候的函數(shù)使用者。