JavaScript之手撕call、apply(1)

前端大妹纸

于 2024-05-16 12:53:21 发布

阅读量269

点赞数 3

分类专栏：程序员文章标签： python 学习面试

本文链接：https://blog.csdn.net/m0_58269070/article/details/138956907

版权

程序员专栏收录该内容

175 篇文章 1 订阅

订阅专栏

在这里插入图片描述

感谢每一个认真阅读我文章的人，看着粉丝一路的上涨和关注，礼尚往来总是要有的：

①　2000多本Python电子书（主流和经典的书籍应该都有了）

②　Python标准库资料（最全中文版）

③　项目源码（四五十个有趣且经典的练手项目及源码）

④　Python基础入门、爬虫、web开发、大数据分析方面的视频（适合小白学习）

⑤ Python学习路线图（告别不入流的学习）

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化学习资料的朋友，可以戳这里获取

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

作用

改变this指向

常见用法

判断数据类型：typeof方法只返回七种值：string、number、boolean、undefined、object、function、symbol。所以使用typeof是无法区分array和普通对象的。

arr = []
typeof(arr)  // "object"
obj = {}
typeof(obj)  // "object"

Object.prototype.toString方法可以判断所有的类型，但Array、String等都重写了该方法，因此就需要借助call/apply来实现

Object.prototype.toString.call(arr) // "[object Array]"
Object.prototype.toString.call(obj) // "[object Object]"

类数组调用数组的方法
ES6未发布之前，没有Array.from方法可以将类数组转为数组，采用Array.prototype.slice.call(arguments)或[].slice.call(arguments)将类数组转化为数组。

当然别的数组方法也可以类似调用，例如push方法：

var arraylike = {
    0: 1,
    length: 1
}
Array.prototype.push.call(arrlike, 1) // {0: 1, 1: 2, length: 2}

apply求数组的最大值与最小值
JavaScript中没有给数组提供类似max和min函数，只提供了Math.max/min，用于求多个数的最值，所以可以借助apply方法，直接传递数组给Math.max/min

const arr = [1,10,11,33,4,52,17]
Math.max.apply(Math, arr)
Math.min.apply(Math, arr)

手撕call

初步模拟

首先看一个简单例子，分析一下call函数执行过程：

var obj = {
    value: 1
}
function fun() {
    console.log(this.value)
}
fun.call(obj) // 1

可见call函数调用大致执行了两部：

call改变了this指向，this->obj
fun函数执行

那该如何模拟上面的效果那？如果在obj上定义函数fun，之后obj.fun执行是不是就达成了上述的效果。

所以call的模拟步骤大约是：

将函数fn设为thisArg的对象的方法
执行thisArg.fn
删除该函数

Function.prototype.myCall = function (thisArg) {
    // this为调用myCall的函数
    thisArg.func = this;
    thisArg.func();
    delete(thisArg.func);
}

完善

上面实现了call的最初版代码，还有几个地方有待解决：

未传入thisArg参数：当未传入thisArg或传入null时，函数的this->window

thisArg = thisArg || window

传入arg1，arg2等参数：ES6可以通过rest参数来实现，ES6以前可以通过arguments来实现

// ES5
const args = []
for (let i = 1; i<arguments.length; i++) {
    args.push('argumens['+ i + ']')
}
eval('thisArg.func(' + args +')')

eval()函数计算JavaScript字符串，并把它作为脚本代码来执行。
array在与字符串相加时，会调用array.toString方法([1,2,3].toString() // "1,2,3")。

函数可以拥有返回值
举个例子：

const obj = {
    value: 1
}
function func(name, age) {
    return {
        name,
        age,
        value: this.value
    }
}
func.call(obj, 'zcxiaobao', 24)
// {
// age: 24,
// name: "zcxiaobao",
// value: 1,
// }

不过很好解决，因此只需将eval执行之后的结果返回即可。

接着我们来看一下完整版的代码：

Function.prototype.myCall = function (thisArg) {
    thisArg = thisArg || window;
    thisArg.func = this;
    const args = []
    for (let i = 1; i<arguments.length; i++) {
        args.push('arguments['+ i + ']')
    }
    const result = eval('thisArg.func(' + args +')')
    delete thisArg.func;
    return result;
}

如果使用ES6语法进行模拟代码会简单很多

如果你也是看准了Python，想自学Python，在这里为大家准备了丰厚的免费学习大礼包，带大家一起学习，给大家剖析Python兼职、就业行情前景的这些事儿。