手写一个 JavaScript 的 apply、call 函数

在 JavaScript 中 call、apply 用来干吗？

以前我有提到过 call、apply 主要用来改变函数运行时的执行环境（this），对于执行环境（this）以及 call、apply 用法不了解的，能够参考以前的文章：JavaScript 函数做用域、执行环境(this)、call、apply、bind 的用法。

call、apply 函数实现分析：

call 函数实现分析：

语法实现：
fun.call(context, arg0, arg1, arg2 ...)
参数分析：
context：指定 fun 函数运行时的执行环境（this 值），通常不指定默认为null，此时指向全局对象（window || global）。
arg0, arg1, arg2 ...：fun 运行时的具体参数。

经过分析，咱们能够发现，fun 使用 call 方法运行时，会使 fun 的 this 绑定到传入的 context 对象中，而后拿着以后的参数运行 fun 函数。与 初始的 fun() 的区别在于，改变了 this 的指向。那么如何改变 this 指向呢。咱们以前都见过这样一个例子：

const obj = {
    name: 'obj',
    sayName: function() {
        console.log(this.name)
    }
}
obj.sayName() // obj

能够看到，对象内部方法在执行时 this 是指向 对象自己的。那么咱们能够利用这一点，来将要执行 call 方法的 fun 的 this 指向到对应的对象上，即让 fun 变成 context 的一个属性方法，执行完毕后，再将该方法 delete 掉，以去掉 context 对于 fun 的影响，代码实现以下：

Function.prototype.call_test = function(context) {
   // 当 context 未定义或定义为 null 时，将 context 指向 window
   context = context || window
   // 将要执行的 fun(即this) 变成给 context 的 属性方法
   context._callFn = this
   context._callFn() // 执行属性方法（即将 函数的 this 强行关联到 context 对象上）
   delete context._callFn // 删除 对象关联的属性方法，以去除后续 对 fun 执行的影响
}

const obj2 = {
    name: 'test'
}

obj.sayName.call_test(obj2) // test

能够看到，咱们写的 call_test 方法成功模实现了 call 改变 this 的功能，接下来还要去处理函数运行时参数的问题，每一个函数体有一个内置的 arguments 变量，用来存储函数应用时的参数，咱们可使用 arguments 变量来获取函数运行时的具体参数：

Function.prototype.call_test = function(context) {
   // 当 context 未定义或定义为 null 时，将 context 指向 window
   context = context || window
   // 将要执行的 fun(即this) 变成给 context 的 属性方法
   context._callFn = this
   
   const args = [...arguments].slice(1) // 首先把 arguments 类数组变成数组，再拿到去除第一个参数的新数组
   
   context._callFn(...args) // 执行包含参数的属性方法，将参数数组展开为一个个参数
   delete context._callFn // 删除 对象关联的属性方法，以去除后续 对 fun 执行的影响
}

const person = {
    name: 'person',
    say(age) {
        console.log(this)
        console.log(`我叫${this.name}我今年${age}`)
    }
}

const person1 = {
    name: 'person1'
}

person.say.call_test(person1, 22) // 我叫person1我今年22

浏览器 console 跑了一遍， 666~

apply 实现分析：

语法实现：
fun.call(context, [args])
参数分析：
context：指定 fun 函数运行时的执行环境（this 值），通常不指定默认为 null，此时指向全局对象（window || global）。
[args]：fun 运行时的参数数组。

其实 apply 方法跟 call 方法实现没有多大区别，惟一就在于对待 参数 的处理行为，apply 方法要求参数以数组或类数组的形式传递（ES5 以后支持类数组对象），具体实现以下：

Function.prototype.apply_test = function(context) {
   // 当 context 未定义或定义为 null 时，将 context 指向 window
   context = context || window
   // 将要执行的 fun(即this) 变成给 context 的 属性方法
   context._callFn = this
   
   const args = [...arguments].slice(1) // 首先把 arguments 类数组变成数组，再拿到去除第一个参数的新数组
   
   context._callFn(args) // 执行包含参数的属性方法
   delete context._callFn // 删除 对象关联的属性方法，以去除后续 对 fun 执行的影响
}

const person = {
    name: 'person',
    say(age) {
        console.log(this)
        console.log(`我叫${this.name}我今年${age}`)
    }
}

const person1 = {
    name: 'person1'
}

person.say.call_test(person1, [22]) // 我叫person1我今年22（因此参数较少是，仍是用 call 看着舒服点哈~）

至此，咱们完成了 call、apply 方法的手动实现。实现的难点在于，要想到将函数设置成 context 的属性方法，来实现 执行环境（this） 的绑定，调用完成后须要delete该属性，以移除影响，不想删的童鞋能够在浏览器里试一试，会出现啥奇葩状况，在这里不展开了。这里只是给你们提供个简单的实现思路，到实际应用中仍是要考虑其余问题的，这里暂时也不作展开。感兴趣的能够了解下还有那些问题，好比不让用 ES6 语法怎么办？好比 ‘_callFn’ 被占用了怎么办等等，思考是个好习惯，但愿咱们的拿来主义少一些。