手写一个call函数实现


阅读次数: 次   
字数：2.3k字 | 预计阅读时长：10分钟

call()和apply()

call()方法调用一个函数，其具有一个指定的this值和分别地提供的参数（参数的列表）

call()和apply()的区别在于，call()方法接受的是若干参数的列表，而apply()方法接受的是一个包含多个参数的数组

举个例子：

1
2
3
4
5
6
var func = function(arg1, arg2) {
    ...
};
    
func.call(this,arg1,arg2); // 使用call时，将参数以参数列表的形式传入
func.apply(this, [arg1, arg2]); // 使用apply时，将参数以一个数组的形式传入

call的模拟实现

先看下面一个简单的例子

1
2
3
4
5
6
7
8
9
10
var value = 1;
var foo = {
    value: 1
};

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

bar.call(foo); // 1

当bar这个函数调用call这个方法时，将要绑定this的对象foo传递了进去，这样一来，bar这个函数中的this将指向foo这个对象，而且最终代码执行结果为1

通过上面的介绍以及代码的执行结果我们可以知道，call()主要有以下两点:

  1. call()改变了this的指向
  2. 函数bar执行了

模拟实现第一步

如果把bar函数定义到foo对象（函数也是对象）中，例如:

1
2
3
4
5
6
7
8
9
var value = 1;
var foo = {
    value: 1,
    bar: function() {
        console.log(this.value);
    }
};

foo.bar(); // 1

由foo这个对象来调用其属性bar()，这样的话，执行效果是一样的。

这个改动就可以实现：改变了this的指向并且执行了函数bar

但是这样写是有副作用的，即给foo额外添加了一个属性，怎么解决呢？

解决方法很简单，用delete删除掉就好了。

所以只要实现下面3步就可以模拟实现了。

  1. 将函数设置为对象的属性：foo.fn = bar
  2. 执行函数：foo.fn()
  3. 删除函数：delete foo.fn

接下来还有一个问题，我们要模拟的call方法是每个函数都可以进行调用的，那么如何做到每个函数中都可以调用这个方法呢？

将call方法定义到函数原型中

  1. 首先，我们待实现的mycall这个方法需要定义在函数原型中，因此我们可以先写出这样的代码：
1
2
3
Function.prototype.mycall = function() {
    
}
  1. 然后，在函数内部进行具体的实现：
1
2
3
4
5
Function.prototype.mycall = function() {
    foo.fn = bar;
    foo.fn();
    delete foo.fn;
}

目前的代码只能bar函数作为属性添加到foo函数中，直接写死了。因此，我们需要进行完善。

  • foo是谁？

    • 待绑定this的对象(上下文对象)，应该作为mycall()函数的参数传入

  • 要给foo绑定哪个函数？

    • 看哪个函数调用mycall方法了，哪个函数调用mycall方法，就给foo绑定哪个函数

  • 如何获取待绑定的函数呢？

    • 可以使用this。我们知道函数中的this指向函数的调用者。mycall()方法是被其他函数调用的，因此mycall方法中的this就指向这个函数。

完善后的代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// 第一版
Function.prototype.mycall = function(context) {
    context.fn = this;   // foo.fn = bar
    context.fn();  		 // foo.fn()
    delete context.fn;	 // delete foo.fn
}

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

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

bar.mycall(foo); // 1

模拟实现第二步

第一版有一个问题，那就是函数bar不能接收参数，所以我们可以从arguments中获取参数，取出第二个参数到最后一个参数放到数组中。为什么要抛弃第一个参数呢？因为第一个参数是context。

image-20200806102358103

这里回顾一个问题：arguments是一个类数组对象，它保存着一个函数接收到的参数，即使函数声明中没有定义形参，在调用函数时，也一样可以直接传参，传递的参数可以通过arguments对象通过下标来访问

1
2
3
4
5
function func() {
    console.log(arguments);
}

func(1, 2, 3, 4); // [Arguments] { '0': 1, '1': 2, '2': 3, '3': 4 }

参数已经可以进行获取了，现在要考虑的是如何将参数提取出来，并传入context.fn()中

现在我们来将代码添加进去参数部分：

  1. 首先，我们来打印出arguments对象接收到的参数
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// 第一版
Function.prototype.mycall = function (context) {
    context.fn = this; // foo.fn = bar
    context.fn();
    delete context.fn; // delete foo.fn

    for (let i = 1; i < arguments.length; i++) {
        console.log(arguments[i]);
    }
}

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

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

bar.mycall(foo, 'CoderLeiShuo', 23);

输出结果为：

1
2
3
1
CoderLeiShuo
23

可以看到，我们获取到了需要的参数CoderLeiShuo和23，现在我们需要让这两个参数传入到context.fn()中，即这样：context.fn(CoderLeiShuo,23)。

我们可以这样写：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// 第一版
Function.prototype.mycall = function (context) {
    context.fn = this; // foo.fn = bar
    
    // 这里直接通过arguments对象将参数传入fn()函数中
    context.fn(arguments[1],arguments[2]);
    
    delete context.fn; // delete foo.fn
}

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

function bar(name, age) {
    console.log(this.value);
    console.log('我是' + name + '今年' + age + '岁');
}

bar.mycall(foo, 'CoderLeiShuo', 23);

输出结果为：

1
2
1
我是CoderLeiShuo今年23岁

但是，我们向函数中传入的参数是不定长的，因此必须动态获取，不能直接通过下标来访问。我们可以将arguments中的需要的相关参数提取出来，保存到一个数组中。

使用ES3的方案可以这样做：

1
2
3
4
var args = [];
for (let i = 1; len = arguments.length; i++) {
    args.push()
}

完整代码如下：

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
// 第一版
Function.prototype.mycall = function (context) {
    context.fn = this; // foo.fn = bar

    const args = [];
    for (let i = 1; i < arguments.length; i++) {
        args.push(arguments[i]);
    }
    console.log(args);

    context.fn(args); // foo.fn()
    delete context.fn; // delete foo.fn

}

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

function bar(name, age) {
    console.log(this.value);
    console.log('我是' + name + '今年' + age + '岁');
}

bar.mycall(foo, 'CoderLeiShuo', 23);

输出结果：

1
2
3
[ 'CoderLeiShuo', 23 ]
1
我是CoderLeiShuo,23今年undefined岁

显然这样直接将提取后的参数数组传入context.fn()是不行的。因为args是一个数组，传入时会被当作一个完整的参数传入，输出结果就变成了“我是CoderLeiShuo,23今年undefined岁”

这样的话，我们必须想办法，让context.fn([CoderLeiShuo, 23])变成context.fn(CoderLeiShuo, 23)。自然可以想到，先将参数数组拆分，然后使用,进行拼接，然后再传入context.fn中

于是：

1
context.fn(args.join(','));

但是这样仍旧不行，我们可以打印看一下args数组元素的拼接结果：

1
'CoderLeiShuo,23'

拼接后的结果变成了一个字符串，如果把这个字符串传入，这个字符串仍然会被当作一个参数去解析

我们不妨这样做：

1
'context.fn(' + args + ')' // 'context.fn(CoderLeiShuo,23)'

这样的话，整行代码都将变成字符串，通过eval()函数我们就可以执行代码字符串了。

1
eval('context.fn(' + args + ')') // context.fn(CoderLeiShuo, 23)

看似这里已经成功了，但是这里其实是一个严重问题的。我们可以先运行一下代码，看看结果：

直接报错了：CoderLeiShuo is not defined

image-20200806113611827

原因在于，原本的字符串'CoderLeiShuo'在拼接以后变成了CoderLeiShuo，被当成了一个变量（一个没有定义的变量）传入到context.fn()中

args是一个数组，在和字符串进行拼接时，会自动调用数组的toString()方法。如下代码：

1
2
3
4
5
6
7
8
9
var args = ["a1", "b2", "c3"];
console.log(args);
// ["a1", "b2", "c3"]

console.log(args.toString());
// a1,b2,c3

console.log("" + args);
// a1,b2,c3

字符串的引号会丢失掉

只需要修改一下代码

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
Function.prototype.mycall = function (context) {
    context.fn = this; // foo.fn = bar
    const args = [];
    for (let i = 1; i < arguments.length; i++) {
        // 这里修改一下数组保存的元素
        args.push('arguments[' + i + ']');
    }
    
    console.log(args);
    console.log('context.fn(' + args + ')');

    eval('context.fn(' + args + ')');
    
    delete context.fn; // delete foo.fn
}

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

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

bar.mycall(foo, 'CoderLeiShuo', 23);

修改完代码之后:

  • args数组中保存的元素为['arguments[1]', 'arguments[2]']
  • 'context.fn('+ args + ')'变为context.fn(arguments[1], arguments[2])
  • eval语句就会正常执行了。

最终输出结果为：

1
2
3
4
[ 'arguments[1]', 'arguments[2]' ]
context.fn(arguments[1],arguments[2])
1
我是CoderLeiShuo今年23岁

所以说，第二个版本就实现了，代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// 第二版
Function.prototype.mycall = function (context) {
    context.fn = this; // foo.fn = bar
    const args = [];
    for (let i = 1; i < arguments.length; i++) {
        args.push('arguments[' + i + ']');
    }
	eval('context.fn(' + args + ')');
    delete context.fn; // delete foo.fn
}

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

function bar(name, age) {
    console.log(this.value); // 1
    console.log(name); // CoderLeiShuo
    console.log(age); // 23
}

bar.mycall(foo, 'CoderLeiShuo', 23);

模拟第三步

目前的代码还有几个细节需要注意：

  • this参数可以传null或undefined，此时this应该指向window
  • this参数可以传基本数据类型，原生的call会自动调用Object()转换
  • 函数是可以有返回值的

实现上面的三点很简单，代码如下：

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
35
36
37
38
39
40
41
42
43
44
45
46
// 第三版
Function.prototype.call2 = function (context) {
    context = context ? Object(context) : window; // 实现细节 1 和 2
    context.fn = this;

    var args = [];
    for(var i = 1, len = arguments.length; i < len; i++) {
        args.push('arguments[' + i + ']');
    }

    var result = eval('context.fn(' + args +')');

    delete context.fn
    return result; // 实现细节 2
}

// 测试一下
var value = 2;

var obj = {
    value: 1
}

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

function foo() {
    console.log(this);
}

bar.call2(null); // 2
foo.call2(123); // Number {123, fn: ƒ}

bar.call2(obj, 'kevin', 18);
// 1
// {
//    value: 1,
//    name: 'kevin',
//    age: 18
// }

执行结果为：

image-20200806160318672

本文作者： CoderLeiShuo
本文链接：https://coderleishuo.github.io/lele/23004.html
版权声明： 本作品采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 进行许可。转载请注明出处！
知识共享许可协议
好的东西应该像粥，是用时间熬出来的—— CoderLeiShuo
赏

谢谢你请我吃糖果

支付宝
微信

扫一扫，分享到微信

微信分享二维码

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

姓名：乐乐<br>性别：男<br>爱好：保密<br>血型：A型<br> 星座：双子座<br>目标：实现自己的价值<br>喜欢的人：保密