伟波前端

# call和apply的模拟实现

# Call

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

举个例子：

var foo = {
    value: 1
};

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

bar.call(foo); // 1
1
2
3
4
5
6
7
8
9

注意两点：

call 改变了 this 的指向，指向到 foo

bar 函数执行了

# 模拟实现

// 第三版
Function.prototype.call2 = function (context, ...rest) {
    var context = context || window
    context.fn = this;
    var result = context.fn(...rest);
    delete context.fn
    return result;
}

// 测试一下
var value = 2;

var obj = {
    value: 1
}

function bar(name, age) {
    console.log(this.value);
    return {
        value: this.value,
        name: name,
        age: age
    }
}

bar.call2(null); // 2

console.log(bar.call2(obj, 'kevin', 18));
// 1
// Object {
//    value: 1,
//    name: 'kevin',
//    age: 18
// }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

# apply

apply的模拟实现 apply 的实现跟 call 类似，在这里直接给代码：

Function.prototype.apply1 = function (context, ...rest) {
    var context = context || window;
    context.fn = this;
    var result = context.fn(rest);
    delete context.fn
    return result;
}
1
2
3
4
5
6
7
8

# 参考

  • https://github.com/mqyqingfeng/Blog/issues/11

# 今日图 - 掏 哎呦 难受！

4a20e50778d1ec02fb7fe03a860310f2.jpg