細說apply call和bind

JasinYip 發布于2019-08-22 15:04 / 2488人閱讀

摘要：會創建一個新的函數，成為綁定函數，目標函數和綁定函數有共同的函數體。新的目標函數被調用的時候，就會綁定到函數的第一個參數上，且該參數不能被重寫。當新的目標函數被創建的時候，目標函數的的值通過被設成了傳入的參數的值。

bind 概述

bind方法是綁定在了Function.prototype上。這個方法會創建一個新的函數，當被調用時，會將其this關鍵字，設置為一個提供的值。

bind()會創建一個新的函數，成為綁定函數，目標函數和綁定函數有共同的函數體。新的目標函數被調用的時候，this就會綁定到bind()函數的第一個參數上，且該參數不能被重寫。在函數調用的時候，也可以為目標函數增加新的參數，參數跟在第一個參數之后。

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的指向取決于函數的調用而不是生命的位置，所以，otherSay()被調用的this指向全局對象，這時候a并不是obj里邊定義的。所以會輸出"hello 222"。

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

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

綁定函數newSay(),目標函數otherSay().用bind執行完操作后，兩個函數共用同樣一個執行環境，不管怎么調用，兩個函數都有同樣的this值。

背后的實現

bind是綁定在了Function的原型上。它是ES5提出來的，用了ES3的apply作為背后的實現。

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

當新的目標函數被創建的時候，目標函數的this的值通過apply被設成了傳入的參數的值。因為，我們傳入我們想要的函數上下文，當函數調用的時候this就會指向了第一個參數。

函數柯里化

函數柯里化的概念是只傳給函數一部分參數就能調用他，讓他返回一個新的函數去處理另外的參數。

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

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

用bind()可以實現函數的柯里化

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

這是一個很簡單的函數，很好理解。

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

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

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

使用bind函數，可以將greet函數柯里化，我們只需要指定最后一個參數來執行柯里化之后的新函數，因為前邊兩個參數，d都在greet里邊定義好了。

apply和call 概述

這兩個方法放在一起將，因為兩個函數基本上沒有區別。
兩個函數都是寫到了Function.prototype上面。本質上這兩個方法可以幫助我們實現函數借用和指定函數的this值。apply()允許我們傳入一個參數數組來傳給函數，供這個函數使用。

改變this

當我們使用這兩個函數的時候，傳入的第一個參數作為this的目標指向。

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

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

我們看到，加了一行代碼，我們改變了showAge中的this指向，開始的時候，全局函數showAge中的指向是全局對象，但是，我們通過apply函數，把this指向了一個對象Man，這個時候，會立即返回函數的執行結果15

apply和bind不一樣的地方在于，bind不會立即返回結果，會返回一個新的函數，我們調用這個函數，才會返回結果

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

var Man = {
    age:15
}

showAge.bind(Man)    // 并不會立即執行
showAge.bind(Man)()   // 執行返回的函數，顯示15

另外，在回調函數中，我們也可以通過apply或者call方法手動設置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

函數借用

call和apply的存在可以讓我們借用其他對象的函數來處理。最典型的例子就是我們可以通過函數借用來讓類數組對象使用數據的方法。

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

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

總結

三個函數的最大區別在于：bind函數是返回一個函數（內部實現也是用的apply）供后續調用，而call和apply是立即調用返回執行結果。

另外，在箭頭函數中，apply和call會失效，因為，箭頭函數的this是確定的，是所在的執行上下文，而不是調用的時候的函數使用者。

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

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

「干貨」細說 call、apply 以及 bind 的區別和用法

摘要：的調用者，將會指向這個對象。此外，還可以擴展自己的其他方法。的使用最后來說說。不同的是，方法的返回值是函數，并且需要稍后調用，才會執行。而和則是立即調用。總結和的主要作用，是改變對象的執行上下文，并且是立即執行的。前言上一篇文章《「前端面試題系列4」this 的原理以及用法》中，提到了 call 和 apply。它們最主要的作用，是改變 this 的指向。在平時的工作中，除了...

GraphQuery 2019-08-26 13:28 評論0 收藏0
手寫call、apply、bind及相關面試題解析

摘要：我是前端我的全名是我是一個前端指向接收多個參數，第一個是返回值返回值是一個函數上下文的，不會立即執行。柯里化相關講解請移步簡版的實現就算完成了歡迎吐槽點贊它們有什么不同？怎么用？ call 接收多個參數，第一個為函數上下文也就是this，后邊參數為函數本身的參數。 let obj = { name: 一個 } ...

TwIStOy 2019-08-23 14:48 評論0 收藏0
this全面解析(二)

摘要：在傳統的面向類的語言中，構造函數是類中的一些特殊方法，使用初始化類是會調用類中的構造函數。在上一節中我們詳細介紹了this的兩種綁定方式，默認綁定和隱式綁定，在這一節我們繼續介紹this的另外兩種綁定方式顯示綁定和new綁定。那么，我們要解決的問題當然就是上一節中我們提到的：this丟失！顯式綁定在隱式綁定中，我們必須在一個對象的內部包含一個指向函數的屬性，并通過這個屬性間接引用...

iflove 2019-08-19 17:56 評論0 收藏0
淺談細說 JS 函數(call,apply,重載)

摘要：什么是函數引用的原話函數是一組可以隨時隨地運行的語句。函數是由這樣的方式進行聲明的關鍵字函數名一組參數，以及置于括號中的待執行代碼。什么是函數？引用 W3School 的原話: 函數是一組可以隨時隨地運行的語句。函數是 ECMAScript 的核心。函數是由這樣的方式進行聲明的：關鍵字 function、函數名、一組參數，以及置于括號中的待執行代碼。函數的基本語法是這樣的：...

U2FsdGVkX1x 2019-08-21 10:42 評論0 收藏0
細說 Javascript 函數篇（二） : this 的工作機制

摘要：與其他編程語言相比，對的使用是一套完全不同的機制。在五種情況下的值是各有不同的。調用一個函數時在這里，同樣指向全局對象。此時在函數內，指向新建的對象。盡管，晚綁定初看上去是個不好的決定，但實際上這是原型式繼承工作的基礎。與其他編程語言相比，Javascript 對 this 的使用是一套完全不同的機制。this 在五種情況下的值是各有不同的。全局作用域下 this; 當在全...

ZoomQuiet 2019-08-21 12:16 評論0 收藏0