通过自己实现函数 call,apply,bind 来了解他们的原理

我们知道函数中的call,apply,bind都是可以修改函数的this指向。关于函数的this指向问题可以转到Javascript this 指向问题这篇文章。

Javascript this 指向问题一篇中我们知道函数运行时候this是取决于调用这个函数的对象。如果一个函数定义在了全局,那么这个this就指向window。

来看一段代码

1
2
3
4
5
6
7
8
9
10
11
12
13
var name = "tal"
var sex = "boy"

var tal = {
name: "踏浪",
sex: "男"
}

function person() {
console.log(this.name)
console.log(this.sex)
}
person() // tal boy

上面的person是定义在全局中的一个函数,person()调用的时候相当于是window.person(),是由window调用的,所以,this.namethis.sex都需要在window对象中寻找,即全局变量中找。所以,最后的值会是talboy

再来。我们来调用一下原生的call函数

1
2
3
4
5
6
7
8
9
10
11
12
13
var name = "tal"
var sex = "boy"

var tal = {
name: "踏浪",
sex: "男"
}

function person() {
console.log(this.name)
console.log(this.sex)
}
person.call(tal) // 踏浪 男

在调用了call函数以后,最后的值是踏浪 男。得到的是对象tal中的两个属性值。此时函数中的this指向了对象tal。结合上面的例子,直接调用person函数的时候,相当于是window.person()的执行,所以那时this指向了window。那现在既然指向了tal,换言之,就是相当于tal.person()执行了。

call 的实现

所以我们可以这样实现mycall函数

1
2
3
4
5
Function.prototype.mycall = function (context) {
context.fn = this
context.fn()
delete context.fn
}

mycall接收一个参数,即一个对象,最终的this指向这个对象。函数内部实现在这个传入的对象中绑定上我们需要执行的这个函数,即context.fn = this一行。最后调用context.fn()。因为我们这样操作修改了传入对象的属性(添加了一个fn属性),所以最后需要删除这个fn属性。这样,第一版的call的实现已经完成。

接下来,原生 call 函数是可以接收参数的

1
2
3
4
5
6
7
8
9
10
11
var tal = {
name: "踏浪",
sex: "男"
}

function person(age) {
console.log(age)
console.log(this.name)
console.log(this.sex)
}
person.call(tal, 18) // 踏浪 男

那我们自己实现的mycall要想能够接收参数,怎么实现呢

1
2
3
4
5
6
7
8
9
10
Function.prototype.mycall = function (context) {
var args = [];
var len = arguments.length;
for (var i = 1; i < len; i++) {
args.push(arguments[i]);
}
context.fn = this
eval('context.fn(' + args.join(",") + ')')
delete context.fn
}

因为我们需要在 mycall 调用的时候传递参数,而且参数的个数不确定,所以需要使用 arguments 。同时因为第一个参数以及确定了是我们需要的一个对象,this指向这个对象。所以 arguments 需要从 1 开始。我们用一个数组把需要的东西存放起来。

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

如果是这样的话,我传递过去后数组 args = [18, "成都"] 里面的每一项要怎么传递到 context.fn() 里面并且执行呢?或许你会想到时候 join(",") 方法,OK,没有问题。

1
2
var res = args.join(",");
context.fn(res);

这样么?不是。res的值是 18,成都 没问题,但是这就是一个字符串而已,我们要实现传递两个参数,所以,想到了把字符串与函数拼接。即有了 'context.fn(' + args.join() + ')'。这样最后就可以了。但是这只是一个字符串,怎么运行呢?这个时候就需要用到 ES3中的eval 直接传递这个参数进度即可。

上面的 join 方法其实就是把一个数组转换成了字符串,除了 join,你还能想到什么呢?对。可以使用字符转换来实现。

1
2
3
res = "" + args + ""
// or
res = args.toString()

因为每一个隔开的方式是 , 所以可以使用上面的两种,其他的就不行咯。

所以最终的 mycall

1
2
3
4
5
6
7
8
9
10
Function.prototype.mycall = function (context) {
var args = [];
var len = arguments.length;
for (var i = 1; i < len; i++) {
args.push(arguments[i]);
}
context.fn = this
eval('context.fn(' + args.join(",") + ')')
delete context.fn
}

apply的实现

有个实现call的过程,在来实现apply就容易多了。唯一不同的就是apply传递的参数是一个数组,而call是具体的每一项。只需要在参数上面做处理即可。

1
2
3
4
5
6
7
8
9
10
11
12
13
Function.prototype.myapply = function (context) {
var args = [];
var array = arguments[1];
if ( typeof array !== "object" || !(array instanceof Array) ) {
throw new Error("The 2'rd args must be Array.")
}
for (var i = 0; len = array.length, i < len; i++) {
args.push('array[' + i + ']');
}
context.fn = this
eval('context.fn(' + args.toString() + ')')
delete context.fn
}

这里的 arguments[1] 是一个数组了。我们需要对它遍历,并且判断它是不是一个数组。其余的与 call 一样。

bind的实现

原生的bind有两种方式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var tal = {
name: "踏浪",
sex: "男"
}

function person(age) {
console.log(age)
console.log(this.name)
console.log(this.sex)
}

person.bind(tal)(18)

// 或者
person.bind(tal, 18)()

所以。使用bind都需要调用两次,而第一次就是返回一个函数。原函数的参数可以在bind中调用,也可以在第二次运行时候调用。所以,根据调用bind时候传递的参数的个数确定最后是返回那种函数,有了下面的这段代码。

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
Function.prototype.mybind = function (context) {
var args = [];
var len = arguments.length;
for (var i = 1; i < len; i++) {
args.push(arguments[i]);
}
context.fn = this
if (len === 1) {
// 如果 mybind 的参数的个数只有一个,那么剩余参数在调用的时候传入
return function(){
var sub_args = [];
for (var i = 0; len = arguments.length, i < len; i++) {
sub_args.push('arguments[' + i + ']');
}
eval('context.fn(' + sub_args.toString() + ')')
delete context.fn
}
} else {
return function(){
// 这里不能使用 arguments,这里面的 arguments 是这个 return 函数的而不是最开始的。
var str = 'context.fn('
for (var i = 0; len = args.length, i < len; i++) {
str += "args["+i+"],"
}
var newStr = str.replace(/,$/, ")")
eval(newStr)
delete context.fn
}
}
}

总结

通过自己实现 call, apply, bind 这三种方法,能够更深刻的理解到这三个函数的原理,同时涉及到的只是点也多:this指向,arguments类数组,每一个对象都要的toSting方法(另一个是valueOf),eval方法的使用(不是滥用,webpack中就使用了这个方法),函数对象可以使用 delete 删除(使用var 定义的无法使用delete删除)。或许你已经明白了,但是代码种东西,还是自己动动手,印象更深刻。

文章作者: 踏浪
文章链接: https://www.lyt007.cn/技术/通过自己实现函数-call-apply-bind-来了解他们的原理.html
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 踏浪 - 前端技术分享
支付宝
微信打赏