手写call，apply#

这应该是面试最傻逼的题目了，这类 native code ，用js怎么能实现的完美呢？？？

首先先理解一下call, apply具体做了些啥事情

原理#

1. 调用形式#

首先调用call或者apply的都是函数

1
function Person(address){
2
    this.name = 'weng';
3
    this.address = address;
4
}
5

6
const obj = {
7
    age: 23,
8
}
9

10
Person.call(obj, 'fujian'); // 这里new
11

12
console.log(obj);

2. 传入的参数#

call和apply 的区别在于传参的写法不同： call 是一个一个参数传，而apply是以数组的形式传入

1
const args = [1,2,3,4];
2
Fn.call(obj, ...args);
3
Fn.apply(obj, args);

实现#

首先先写一个_call的方法

那这个_call要挂在哪里呢？对，就是Fn函数的原型上，那要怎么挂呢？直接原型挂

1
Function.prototype._call = function(target, ...args){
2
}

target指向对象，args就是其他参数

1. 判断是否是函数(this)来调用_call#

1
Function.prototype._call = function(target, ...args){
2
    if(typeof this !== 'function'){
3
        throw new Error('must be a function')
4
    }
5
}

2. 判断传进来的target是否为基本数据类型#

如果target是基本数据类型，是无法将函数附加到target上面的，通过instanceof可以顺着原型链找到Object的构造函数的数据类型才可以被附加函数。否者就直接把这个数据返回，因为我看call就是这样做的

1
Function.prototype._call = function(target, ...args){
2
    if(typeof this !== 'function'){
3
        throw new Error('must be a function')
4
    }
5
    if(!target instanceof Object){
6
        return target
7
    }
8
}

3. 对象是否是被冻结或者封闭的状态#

这里的对象如果被冻结或者处于封闭的状态那么，后续调用函数给对象做赋值操作也会失效，所以这里还需要判断一层，具体的对象冻结和对象封闭可以看看这Object.freeze() 和 Object.seal()

1
Function.prototype._call = function(target, ...args){
2
    if(typeof this !== 'function'){
3
        throw new Error('must be a function')
4
    }
5
    if(!target instanceof Object){
6
        return target
7
    }
8
    if(Object.isFrozen(target) || Object.isSeal(target)){
9
        return target
10
    }
11
}

3. target必须是目标对象，如果不传值，默认为window#

1
Function.prototype._call = function(target, ...args){
2
    if(typeof this !== 'function'){
3
        throw new Error('must be a function')
4
    }
5
    if(!(target instanceof Object){
6
        return target
7
    }
8
    if(Object.isFrozen(target) || Object.isSeal(target)){
9
        return target
10
    }
11
    target = target || window;
12
}

4. 隐式绑定，改变构造函数的调用者间接改变 this 指向#

1
Function.prototype._call = function(target, ...args){
2
    if(typeof this !== 'function'){
3
        throw new Error('must be a function')
4
    }
5
    if(!(target instanceof Object){
6
        return target
7
    }
8
    if(Object.isFrozen(target) || Object.isSeal(target)){
9
        return target
10
    }
11
    target = target || window;
12
    target.fn = this; // 隐式绑定，改变构造函数的调用者间接改变 this 指向
13
    let result = target.fn(...args)
14
    return result;
15
}

这里我看很多人用了 target.fn去将this指向这个参数，但是万一这个fn本身就在target当中声明了呢？

这里我的想法是以一个符号作为键，保存这个键名，之后调用和赋值就不怕出问题了，因为声明新得符号的引用只是暂时的，也不可能存在重复的情况，之后删除也方便

改善之后的代码为：

1
Function.prototype._call = function(target, ...args){
2
    if(typeof this !== 'function'){
3
        throw new Error('must be a function')
4
    }
5
    if(!(target instanceof Object){
6
        return target
7
    }
8
    if(Object.isFrozen(target) || Object.isSealed(target)){
9
        return target
10
    }
11
    target = target || window;
12
    const fn = Symbol('fn');
13
    target[fn] = this; // 隐式绑定，改变构造函数的调用者间接改变 this 指向
14
    let result = target[fn](...args);
15
    delete target[fn]; // 这里要把这玩意删了
16
    return result;
17
}

测试#

正常传#

1
function Person(address) {
2
    this.name = "weng";
3
    this.address = address;
4
}
5

6
let obj = {
7
    name: "weng",
8
};
9
let arr = [1, 2, 3, 4];
10

11
let set = new Set([1, 2, 3, 4]);
12
let map = new Map([
13
    ["key1", 1],
14
    ["key2", 2],
15
]);
16

17
let stringObj = new String("2121");
18
let numberObj = new Number(1212);
19
let booleanObj = new Boolean(false);
20

21
Person._call(obj, "fujian");
22
Person._call(arr, "fujian");
23
Person._call(set, "fujian");
24
Person._call(map, "fujian");
25
Person._call(stringObj, "fujian");
26
Person._call(numberObj, "fujian");
27
Person._call(booleanObj, "fujian");
28

29
console.log(obj);
30
console.log(arr);
31
console.log(set);
32
console.log(map);
33
console.log(stringObj);
34
console.log(numberObj);
35
console.log(booleanObj);

打印出来的是酱紫的

传基本数据类型数据#

1
const symb = Symbol("dsadas");
2
const num = 1212;
3
const str = "1212";
4
const isNull = null;
5
const isUndefined = undefined;
6
const isBoolean = false;
7

8
Person._call(symb, "fujian");
9
Person._call(num, "fujian");
10

11
Person._call(str, "fujian");
12
Person._call(isNull, "fujian");
13
Person._call(isUndefined, "fujian");
14
Person._call(isBoolean, "fujian");
15

16
console.log(symb, num, str, isNull, isUndefined, isBoolean);

最终打印出来的是酱紫的

传一个冻结或者封闭的对象#

1
const obj = Object.freeze({
2
    key: 1,
3
});
4
const obj2 = Object.seal({
5
    key: 2,
6
});
7

8
Person._call(obj, "fujian");
9
Person._call(obj2, "fujian");
10

11
console.log(obj);
12
console.log(obj2);

打印结果是这样：

直接调用#

1
Person.call();

那这时候作用对象在浏览器里头就是window了，构造函数里头的赋值操作可以在window对象里头体现。

最终代码#

优化了一哈子

1
Function.prototype._call = function (target, ...args) {
2
    if (typeof this !== "function") {
3
      throw new Error("must be a function");
4
    }
5
    if (
6
      !(target instanceof Object) ||
7
      Object.isFrozen(target) ||
8
      Object.isSealed(target)
9
    ) {
10
      return target;
11
    }
12
    target = target || window;
13
    const fn = Symbol("fn");
14
    target[fn] = this; // 隐式绑定，改变构造函数的调用者间接改变 this 指向
15
    let result = target[fn](...args);
16
    delete target[fn];
17
    return result;
18
};

不晓得对不对反正自己感觉一般