call apply和bind的原理

2021-09-02 00:25:51 字數 1892 閱讀 4746

call

作用：

call() 方法就是使用乙個指定this值和若干個指定引數值的前提下呼叫摸個函式或方法。`

var foo =


function


bar(


)// 如果不對this進行繫結執行bar() 會返回undefined


bar.


call


(foo)


// 1
也就是說call()改變了this的指向，指向了foo

下面進行一下模擬實現

試想當呼叫call的時候，也就是類似於

var foo =


}foo.


bar(


)//1
這樣就把this指向到foo上了，但是會給foo物件加了乙個屬性，有些瑕疵，不過不要緊，執行完刪除這個屬性就可以完美實現了。

也就是說步驟可以是這樣

將函式設為物件的屬性

執行這個函式

刪除這個函式

下面就試著去實現一下：

// context是指this指向的物件，如上文的foo


function.prototype.


call2


=function


(context)


var foo =


function


bar(


)bar.


call2


(foo)


// 1
但是這樣有乙個小缺陷就是call()不僅能指定this到函式，還能傳入給定引數執行函式，比如：

var foo =


function


bar(name, age)


bar.


call


(foo,


'black',17


)// black


// 17


// 1
特別要注意的一點是，傳入的引數的數量是不確定的，所以我們要使用arguments物件，去除除去第乙個之外的引數，放到乙個陣列中：

function.prototype.


call2


=function


(context)


var foo =


function


bar(name, age)


bar.


call2


(foo,


'black'


,'18'


)// black 18 1
還有一點需要注意的是，如果不傳入引數，預設指向window，所以最終版**：

function.prototype.


call2


=function


(context)


function.prototype.


=function


(context)
bind

bind方法的主要作用就是將函式繫結至某個物件，bind方法會建立乙個函式，函式體內this物件的值會被繫結到傳入bind() 函式的值。

function.prototype.


bind2


=function


(context)


}
共同點：

都可以改變函式執行的上下文環境；

不同點：

call apply和bind的用法

在改變this指向的時候，經常會把這三個方法混淆，下面就詳細的整理一下三者的用法和區別 var a var b b.sayname.call a,1,2,3 輸出 張三 6第乙個引數是改變 this 指向的物件 第二個引數必須是乙個陣列 使用後會自動執行 var a var b var arr 1,...

call apply和bind方法詳解

call方法 使用乙個指定的this值和單獨給出的乙個或多個引數來呼叫函式。var obj function getname name getname.call obj mei var obj function getname name,age 這兩種方法的用途很多，下面我就舉幾個例子。1.基本用法...

js中call,apply和bind方法

語法 任意函式.call 任意物件，引數1，引數2 特徵 call能呼叫函式，後面可傳入多個引數，用逗號隔開 3.價值 任意物件都能呼叫任意函式 功能 function fn a,b var obj2 fn.call obj2,你好 6 這樣就能為obj2新增乙個屬性abc，值為 你好6 原因是使用...