乐趣区

50行javaScript代码实现简单版的-call-apply-bind-中级前端面试基础必备

jiezi

在实现自己的 call,apply,bind 前，需要复习一下this.

所谓的 this 其实可以理解成一根指针：

其实 this 的指向，始终坚持一个原理：this 永远指向最后调用它的那个对象, 这就是精髓。最关键所在

this的四种指向：

当 this 所在的函数被普通调用时，指向window，如果当前是严格模式，则指向undefined

function test() {console.log(this);
};

test();
指向 window 输出下面的代码：// Window {speechSynthesis: SpeechSynthesis, caches: CacheStorage, localStorage: Storage, sessionStorage: Storage, webkitStorageInfo: DeprecatedStorageInfo…}
严格模式
'use strict';
function test() {console.log(this);
};
test();
// undefined

当 this 所在当函数被以 obj.fn() 形式调用时，指向obj

var obj = {
  name: 'segmentFault',
  foo: function() {console.log(this.name);
  }
}
obj.foo();
// 'segmentFault'

还可以这么做

function test() {console.log(this.name);
}
var obj = {
  name: 'qiutc',
  foo: test
}
obj.foo();
// 'qiutc'

当 call,apply 加入后，this的指向被改变了

  function a() {console.log(this.name);
    }
    const b = {name: "segmentFault"}
    a.call(b,1,2,3)
    
    
    // 输出 segmentFault 和 1,2,3

    function a(a,b,c) {console.log(this.name);
        console.log(a,b,c)
    }

    a.apply(b,[1,2,3])
    // 输出 segmentFault 和 1,2,3

遇到 bind 后：

    function a() {console.log(this.name);
    }
    const b = {name: "segmentFault"}
    a.bind(b, 1, 2, 3)

此时控制台并没有代码输出，因为 bind 会重新生成并且返回一个函数，这个函数的 this 指向第一个参数

    function a() {console.log(this.name);
    }
    const b = {name: "segmentFault"}
    const c = a.bind(b, 1, 2, 3)
    c()
    // 此时输出 segmentFault

正式开始自己实现call :

在函数原型上定义自己的 myCall 方法：

 Function.prototype.myCall = function (context, ...arg) {const fn = Symbol('临时属性')
        context[fn] = this
        context[fn](...arg)
        delete context[fn]
    }

四行代码实现了简单的call，思路如下：

  • 通过对象属性的方式调用函数，这个函数里面的 this 指向这个对象
  • 每次调用新增一个 symbol 属性，调用完毕删除
  • 这个 symbol 属性就是调用 mycall 方法的函数
  • 函数形参中使用 ...arg 是将多个形参都塞到一个数组里，在函数内部使用 arg 这个变量时，就是包含所有形参的数组
  • 在调用 context[fn](...arg) 时候，...arg是为了展开数组，依次传入参数调用函数

为了简化，今天都不做类型判断和错误边际处理，只把原理讲清楚。

自己实现apply

在函数原型上定义自己的 myApply 方法：

// 实现自己的 myApply
    Function.prototype.myApply = function (context, arg) {const fn = Symbol('临时属性')
        context[fn] = this
        context[fn](...arg)
        delete context[fn]
    }

    const obj2 = {a: 1}

    test.myApply(obj2, [2, 3, 4])

同理，只是 apply 传递的第二个参数是数组，这里我们只需要在调用时，将参数用 ... 把数组展开即可

自己实现bind：

bind跟 apply,call 的本质区别，bind不会改变原函数的 this 指向，只会返回一个新的函数（我们想要的那个 this 指向），并且不会调用。但是 apply 和bind会改变原函数的 this 指向并且直接调用

bind在编写框架源码，例如 koa 等中用得特别多：

 // 实现自己的 myBind
    Function.prototype.myBind = function (context, ...firstarg) {
        const that = this
        const bindFn = function (...secoundarg) {return that.myCall(context, ...firstarg, ...secoundarg)
        }
        bindFn.prototype = Object.create(that.prototype)
        return bindFn
    }

    var fnbind = test.myBind(obj, 2)
    fnbind(3)

同理 自己定义好原型上的 myBind 方法
this 劫持 保留最初的调用 mybind 方法的那个对象
返回一个新的函数 这个新的函数内部 this 指向已经确定，使用的是我们的 mycall 方法

学习需要循序渐进，建议根据本文顺序去封装一遍，是比较轻松的，当然 bind 还需要判断是否是 new 调用.

完整版本bind



Function.prototype.myBind = function (objThis, ...params) {const thisFn = this; // 存储源函数以及上方的 params(函数参数)
    // 对返回的函数 secondParams 二次传参
    let fToBind = function (...secondParams) {console.log('secondParams',secondParams,...secondParams)
        const isNew = this instanceof fToBind // this 是否是 fToBind 的实例 也就是返回的 fToBind 是否通过 new 调用
        const context = isNew ? this : Object(objThis) // new 调用就绑定到 this 上, 否则就绑定到传入的 objThis 上
        return thisFn.call(context, ...params, ...secondParams); // 用 call 调用源函数绑定 this 的指向并传递参数, 返回执行结果
    };
    fToBind.prototype = Object.create(thisFn.prototype); // 复制源函数的 prototype 给 fToBind
    return fToBind; // 返回拷贝的函数
};

觉得写得不错可以给个star，欢迎加入我们的前端交流群～：

退出移动版