JavaScript 中 call、apply和bind的用法區別

ECMAScript 規範給所有函數都定義了 call 與 apply 兩個方法,它們的應用非常廣泛,它們的作用也是一模一樣,只是傳參的形式有區別而已。

JavaScript 中 call、apply和bind的用法區別JavaScript 中 call、apply和bind的用法區別

其實是一個很簡單的東西,認真看十分鐘就從一臉懵B 到完全 理解!

先看明白下面:

例 1
JavaScript 中 call、apply和bind的用法區別JavaScript 中 call、apply和bind的用法區別

obj.objAge;  // 17
obj.myFun()  // 小張年齡 undefined

例 2
JavaScript 中 call、apply和bind的用法區別JavaScript 中 call、apply和bind的用法區別

shows()  // 盲僧

比較一下這兩者 this 的差別,第一個打印裏面的 this 指向 obj,第二個全局聲明的 shows() 函數 this 是 window ;

1,call()、apply()、bind() 都是用來重定義 this 這個對象的!

如:
JavaScript 中 call、apply和bind的用法區別JavaScript 中 call、apply和bind的用法區別

obj.myFun.call(db);    // 德瑪年齡 99
obj.myFun.apply(db);    // 德瑪年齡 99
obj.myFun.bind(db)();   // 德瑪年齡 99

以上出了 bind 方法後面多了個 () 外 ,結果返回都一致!

由此得出結論,bind 返回的是一個新的函數,你必須調用它纔會被執行。

2,對比call 、bind 、 apply 傳參情況下
JavaScript 中 call、apply和bind的用法區別JavaScript 中 call、apply和bind的用法區別

obj.myFun.call(db,'成都','上海');     // 德瑪 年齡 99  來自 成都去往上海
obj.myFun.apply(db,['成都','上海']);      // 德瑪 年齡 99  來自 成都去往上海  
obj.myFun.bind(db,'成都','上海')();       // 德瑪 年齡 99  來自 成都去往上海
obj.myFun.bind(db,['成都','上海'])();   // 德瑪 年齡 99  來自 成都, 上海去往 undefined

微妙的差距!

從上面四個結果不難看出:

call 、bind 、 apply 這三個函數的第一個參數都是 this 的指向對象,第二個參數差別就來了:

call 的參數是直接放進去的,第二第三第 n 個參數全都用逗號分隔,直接放到後面 obj.myFun.call(db,'成都', ... ,'string' )。

apply 的所有參數都必須放在一個數組裏面傳進去 obj.myFun.apply(db,['成都', ..., 'string' ])。

bind 除了返回是函數以外,它 的參數和 call 一樣。

當然,三者的參數不限定是 string 類型,允許是各種類型,包括函數 、 object 等等!

本文地址:https://www.linuxprobe.com/the-difference-in.html

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章