對于 call / apply / bind 來說，他們的首要目的是用于改變執行上下文的 this 指針。

call / apply

對 call / apply 的使用，一般都如下，用于改變執行環境的上下文。只是 call 接受的是一個一個的參數，而 apply 則是接受的是一個參數數組。

const obj1 = {a: 1,myFunc(var1) {console.log(this.a + var1)} } const obj2 = {a: 2 }const myFunc = obj1.myFuncmyFunc(1) // NaN obj1.myFunc(1) // 2 myFunc.call(obj2, 1) // 3 myFunc.apply(obj2, [1]) // 3

bind

bind 是 ES2015 出的一個方法，也是用于改變函數內部的 this 指向。但不一樣的是，bind 方法不是直接執行的，而是生成一個新的已被改變過的函數。

const obj1 = {a: 1,myFunc(var1) {console.log(this.a + var1)} } const obj2 = {a: 2 }const myFunc = obj1.myFunc const bindMyFunc1 = myFunc.bind(obj1) const bindMyFunc2 = myFunc.bind(obj2)myFunc(1) // NaN bindMyFunc1(1) // 2 bindMyFunc2(1) // 3

通過上面的例子就可以看出來，bind 方法就可以生成一個新的 this 指向的 function。

手動寫 bind 函數

僅僅作為簡單實現的話，我們僅需要注意改變 this 指向和預置參數即可。

function bind(fn, _this, ...args) {if(typeof fn !== 'function') {throw new Error('bind fn need to be function')}return function(...innerArgs) {return fn.apply(_this, [...args, ...innerArgs])} }

當然這個手動實現的 bind 方法是只實現了最主要的功能，對函數的原型鏈和作為構造函數的方式都是沒有考慮到的。這里可以參考 MSDN 的 polyfill 方法。

if (!Function.prototype.bind) {Function.prototype.bind = function(oThis) {if (typeof this !== 'function') {// closest thing possible to the ECMAScript 5// internal IsCallable functionthrow new TypeError('Function.prototype.bind - what is trying to be bound is not callable');}var aArgs = Array.prototype.slice.call(arguments, 1),fToBind = this,fNOP = function() {},fBound = function() {// this instanceof fBound === true時,說明返回的fBound被當做new的構造函數調用return fToBind.apply(this instanceof fBound? this: oThis,// 獲取調用時(fBound)的傳參.bind 返回的函數入參往往是這么傳遞的aArgs.concat(Array.prototype.slice.call(arguments)));};// 維護原型關系if (this.prototype) {// Function.prototype doesn't have a prototype propertyfNOP.prototype = this.prototype; }// 下行的代碼使fBound.prototype是fNOP的實例,因此// 返回的fBound若作為new的構造函數,new生成的新對象作為this傳入fBound,新對象的__proto__就是fNOP的實例fBound.prototype = new fNOP();return fBound;}; }

轉載于:https://www.cnblogs.com/YikaJ/p/10683142.html

總結

以上是生活随笔為你收集整理的call / apply / bind的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。