手写 call 方法

手写一个call函数

call() 方法在使用一个指定的 this 值和若干个指定的参数值的前提下调用某个函数或方法。

举个栗子：

var foo = {
    value: 1
};

function bar() {
    console.log(this.value);
}

bar.call(foo); // 1

注意两点：

1. call 改变了 this 的指向，指向到 foo
2. bar 函数执行了

本质就是利用了函数的隐式绑定, 函数是谁的属性, this 就会默认指向这个对象, 但是箭头函数除外

第一版

1. 将函数设为目标对象的属性, 从而利用隐式绑定来改变 this 指向
2. 执行该函数
3. 删除该函数

Function.prototype.call2 = function(context) {
    // 首先要获取调用call的函数，用this可以获取
    context.fn = this;
    // 此时context 是这样的 context = {value:1, bar}
    context.fn();
    delete context.fn;
}

// 测试一下
var foo = {
    value: 1
};

function bar() {
    console.log(this.value);
}

bar.call2(foo); // 1

第二版

call 函数还能给定参数执行函数

只需稍加改造就可以实现

1. call方法 需要接收参数
2. 需要把参数传入需要执行的函数, 其实就是拿过来拿过去

// 我们使用es6的 rest api 来接收所有的参数
// rest: [234, 234242]
Function.prototype.call2 = function(context, ...rest){
    // 首先要获取调用call的函数，用this可以获取
    context.fn = this;
    //把参数集合 rest 展开放进这个函数即可
    context.fn(...rest);
    delete context.fn;
}

// 测试一下
var foo = {
    value: 1
};

function bar(value1,value2) {
    console.log(this.value,value1, value2); // 1,234,234242
}

bar.call2(foo, 234,234242); // 1