极简实现系列——手写call和apply

极简实现系列 是用最简单的代码实现一些常见的方法，目的是为了帮助理解原理，所以并没有考虑太多限制条件

---

 

 

 先来看看call方法，引用MDN上的介绍：

call() 方法使用一个指定的 this 值和单独给出的一个或多个参数来调用一个函数。

什么意思呢，看个简单的例子：

let obj = {
    value: 1
}
function fn(){
    console.log(this.value)
}
fn.call(obj) // 1

 call方法把this指向obj

第一版

该怎么改变指向呢，大家试想一下，假如obj是一个这样的对象

let obj = {
    value: 1,
    fn: function(){
       console.log(this.value)
    }
}

obj.fn() // 1

这样是不是就行了呢，感觉好像可以，总结一下总共就3步：

1：将函数设为对象的属性  obj.fn = fn

2：执行该函数  obj.fn()

3：删除该函数  delete obj.fn

ok  我们来试一试

Function.prototype.myCall = function(context){
    context.fn = this 
    context.fn()
    delete context.fn
}

let obj = {
    value: 1
}
function fn(){
    console.log(this.value)
}
fn.myCall(obj) // 1

在控制台试一试是可以的，至此第一版已经完成了。

第二版 

 第一版还是有一些不满足需求的，call是可以传多个参数的，这个用es6的rest参数非常简单，直接看代码就行

Function.prototype.myCall = function(context, ...arg){
    context.fn = this 
    context.fn(...arg)
    delete context.fn
}

let obj = {
    value: 1
}
function fn(a, b){
    console.log(this.value)
    console.log(a)
    console.log(b)
}
fn.myCall(obj, 2,3) // 1 2 3

 第三版

第二版已经基本完成了，还有一点点小的不足，call第一个参数是可以传null的，传null时指向window。 并且函数可能有返回值。

我们再改进一下

Function.prototype.myCall = function(context, ...arg){
    context = context || window // 做个判断
    context.fn = this 
    let result = context.fn(...arg)
    delete context.fn
    return result // 返回函数执行结果
}

let obj = {
    value: 1
}
function fn(a, b){
    console.log(this)
    return a + b
}
console.log(fn.myCall(null, 2,3)) // Window 5

完事~ 

 

apply的话基本是一样的，只是第二个参数变成了数组

Function.prototype.myApply = function(context, arg){
    context = context || window // 做个判断
    context.fn = this 
    let result = context.fn(...arg)
    delete context.fn
    return result // 返回函数执行结果
}

let obj = {
    value: 1
}
function fn(a, b){
    console.log(this)
    return a + b
}
console.log(fn.myApply (null, [2,3])) // Window 5