JavaScript深入之call和apply的模拟实现

简介: JavaScript深入系列第十篇,通过call和apply的模拟实现,带你揭开call和apply改变this的真相

222.png


JavaScript深入系列第十篇,通过call和apply的模拟实现,带你揭开call和apply改变this的真相


call


一句话介绍 call:


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


举个例子:


var foo = {
    value: 1
};
function bar() {
    console.log(this.value);
}
bar.call(foo); // 1复制代码


注意两点:


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


模拟实现第一步


那么我们该怎么模拟实现这两个效果呢?


试想当调用 call 的时候,把 foo 对象改造成如下:


var foo = {
    value: 1,
    bar: function() {
        console.log(this.value)
    }
};
foo.bar(); // 1复制代码


这个时候 this 就指向了 foo,是不是很简单呢?


但是这样却给 foo 对象本身添加了一个属性,这可不行呐!


不过也不用担心,我们用 delete 再删除它不就好了~


所以我们模拟的步骤可以分为:


  1. 将函数设为对象的属性
  2. 执行该函数
  3. 删除该函数


以上个例子为例,就是:


// 第一步
foo.fn = bar
// 第二步
foo.fn()
// 第三步
delete foo.fn复制代码


fn 是对象的属性名,反正最后也要删除它,所以起成什么都无所谓。


根据这个思路,我们可以尝试着去写第一版的 call2 函数:


// 第一版
Function.prototype.call2 = function(context) {
    // 首先要获取调用call的函数,用this可以获取
    context.fn = this;
    context.fn();
    delete context.fn;
}
// 测试一下
var foo = {
    value: 1
};
function bar() {
    console.log(this.value);
}
bar.call2(foo); // 1复制代码


正好可以打印 1 哎!是不是很开心!(~ ̄▽ ̄)~


模拟实现第二步


最一开始也讲了,call 函数还能给定参数执行函数。举个例子:


var foo = {
    value: 1
};
function bar(name, age) {
    console.log(name)
    console.log(age)
    console.log(this.value);
}
bar.call(foo, 'kevin', 18);
// kevin
// 18
// 1复制代码


注意:传入的参数并不确定,这可咋办?


不急,我们可以从 Arguments 对象中取值,取出第二个到最后一个参数,然后放到一个数组里。


比如这样:


// 以上个例子为例,此时的arguments为:
// arguments = {
//      0: foo,
//      1: 'kevin',
//      2: 18,
//      length: 3
// }
// 因为arguments是类数组对象,所以可以用for循环
var args = [];
for(var i = 1, len = arguments.length; i < len; i++) {
    args.push('arguments[' + i + ']');
}
// 执行后 args为 [foo, 'kevin', 18]复制代码


不定长的参数问题解决了,我们接着要把这个参数数组放到要执行的函数的参数里面去。


// 将数组里的元素作为多个参数放进函数的形参里
context.fn(args.join(','))
// (O_o)??
// 这个方法肯定是不行的啦!!!复制代码


也许有人想到用 ES6 的方法,不过 call 是 ES3 的方法,我们为了模拟实现一个 ES3 的方法,要用到ES6的方法,好像……,嗯,也可以啦。但是我们这次用 eval 方法拼成一个函数,类似于这样:


eval('context.fn(' + args +')')复制代码


这里 args 会自动调用 Array.toString() 这个方法。


所以我们的第二版克服了两个大问题,代码如下:


// 第二版
Function.prototype.call2 = function(context) {
    context.fn = this;
    var args = [];
    for(var i = 1, len = arguments.length; i < len; i++) {
        args.push('arguments[' + i + ']');
    }
    eval('context.fn(' + args +')');
    delete context.fn;
}
// 测试一下
var foo = {
    value: 1
};
function bar(name, age) {
    console.log(name)
    console.log(age)
    console.log(this.value);
}
bar.call2(foo, 'kevin', 18); 
// kevin
// 18
// 1复制代码


(๑•̀ㅂ•́)و✧


模拟实现第三步


模拟代码已经完成 80%,还有两个小点要注意:


1.this 参数可以传 null,当为 null 的时候,视为指向 window


举个例子:


var value = 1;
function bar() {
    console.log(this.value);
}
bar.call(null); // 1复制代码


虽然这个例子本身不使用 call,结果依然一样。


2.函数是可以有返回值的!


举个例子:


var obj = {
    value: 1
}
function bar(name, age) {
    return {
        value: this.value,
        name: name,
        age: age
    }
}
console.log(bar.call(obj, 'kevin', 18));
// Object {
//    value: 1,
//    name: 'kevin',
//    age: 18
// }复制代码


不过都很好解决,让我们直接看第三版也就是最后一版的代码:


// 第三版
Function.prototype.call2 = function (context) {
    var context = context || window;
    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;
}
// 测试一下
var value = 2;
var obj = {
    value: 1
}
function bar(name, age) {
    console.log(this.value);
    return {
        value: this.value,
        name: name,
        age: age
    }
}
bar.call(null); // 2
console.log(bar.call2(obj, 'kevin', 18));
// 1
// Object {
//    value: 1,
//    name: 'kevin',
//    age: 18
// }复制代码


到此,我们完成了 call 的模拟实现,给自己一个赞 b( ̄▽ ̄)d


apply的模拟实现


apply 的实现跟 call 类似,在这里直接给代码,代码来自于知乎 @郑航的实现:


Function.prototype.apply = function (context, arr) {
    var context = Object(context) || window;
    context.fn = this;
    var result;
    if (!arr) {
        result = context.fn();
    }
    else {
        var args = [];
        for (var i = 0, len = arr.length; i < len; i++) {
            args.push('arr[' + i + ']');
        }
        result = eval('context.fn(' + args + ')')
    }
    delete context.fn
    return result;
}复制代码


下一篇文章


JavaScript深入之bind的模拟实现


重要参考


知乎问题 不能使用call、apply、bind,如何用 js 实现 call 或者 apply 的功能?


深入系列


JavaScript深入系列目录地址:github.com/mqyqingfeng…


JavaScript深入系列预计写十五篇左右,旨在帮大家捋顺JavaScript底层知识,重点讲解如原型、作用域、执行上下文、变量对象、this、闭包、按值传递、call、apply、bind、new、继承等难点概念。


如果有错误或者不严谨的地方,请务必给予指正,十分感谢。如果喜欢或者有所启发,欢迎star,对作者也是一种鼓励。


目录
相关文章
|
11天前
|
JavaScript 前端开发
js中的bind,call,apply方法的区别以及用法
JavaScript中,`bind`、`call`和`apply`均可改变函数的`this`指向并传递参数。其中,`bind`返回一个新函数,不立即执行;`call`和`apply`则立即执行,且`apply`的参数以数组形式传递。三者在改变`this`指向及传参上功能相似,但在执行时机和参数传递方式上有所区别。
|
2月前
|
JavaScript 前端开发
JS高级—call(),apply(),bind()
【10月更文挑战第17天】call()`、`apply()`和`bind()`是 JavaScript 中非常重要的工具,它们为我们提供了灵活控制函数执行和`this`指向的能力。通过合理运用这些方法,可以实现更复杂的编程逻辑和功能,提升代码的质量和可维护性。你在实际开发中可以根据具体需求,选择合适的方法来满足业务需求,并不断探索它们的更多应用场景。
11 1
|
2月前
|
JavaScript 前端开发
js 中call()和apply()
js 中call()和apply()
29 1
|
3月前
|
自然语言处理 JavaScript 前端开发
JS中this的应用场景,再了解下apply、call和bind!
该文章深入探讨了JavaScript中`this`关键字的多种应用场景,并详细解释了`apply`、`call`和`bind`这三个函数方法的使用技巧和差异。
|
3月前
|
JavaScript 前端开发
this指向的几种情况以及js简单实现call、apply、bind___六卿
本文讨论了JavaScript中`this`的指向规则,并提供了`call`、`apply`和`bind`方法的简单实现,用于改变函数的`this`指向。
17 0
this指向的几种情况以及js简单实现call、apply、bind___六卿
|
3月前
|
JavaScript
js的this与call,apply,bind
js的this与call,apply,bind
|
Web App开发 JavaScript 前端开发
|
5月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
97 2
|
5月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的小区物流配送系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的小区物流配送系统附带文章源码部署视频讲解等
133 4
|
5月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的宠物援助平台附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的宠物援助平台附带文章源码部署视频讲解等
84 4