JavaScript之手撕call、apply

文末有福利领取哦~

👉一、Python所有方向的学习路线

Python所有方向的技术点做的整理，形成各个领域的知识点汇总，它的用处就在于，你可以按照上面的知识点去找对应的学习资源，保证自己学得较为全面。

👉二、Python必备开发工具

👉三、Python视频合集

观看零基础学习视频，看视频学习是最快捷也是最有效果的方式，跟着视频中老师的思路，从基础到深入，还是很容易入门的。

👉 四、实战案例

光学理论是没用的，要学会跟着一起敲，要动手实操，才能将自己的所学运用到实际当中去，这时候可以搞点实战案例来学习。（文末领读者福利）

👉五、Python练习题

检查学习结果。

👉六、面试资料

我们学习Python必然是为了找到高薪的工作，下面这些面试题是来自阿里、腾讯、字节等一线互联网大厂最新的面试资料，并且有阿里大佬给出了权威的解答，刷完这一套面试资料相信大家都能找到满意的工作。

👉因篇幅有限，仅展示部分资料，这份完整版的Python全套学习资料已经上传

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

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

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

fn.call(thisArg, arg1, arg2,…)
fn.apply(thisArg, [arg1, arg2,…])

#### 参数


* `thisArg`(可选)：
	+ `fn`函数的`this`指向`thisArg`
	+ `thisArg`传入`null，undefined`：非严格模式下：fn函数`this->window`；严格模式：`this->undefined`
	+ 值为原始值(数字，字符串，布尔)时，this指向包装类
* `arg1,arg2`(可选): 传给fn的参数
	+ apply传递的第二个参数为数组


#### 作用


改变`this`指向


### 常见用法


1. 判断数据类型：`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]”

2. 类数组调用数组的方法  
 `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}

3. `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`的最初版代码，还有几个地方有待解决：


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

thisArg = thisArg || window

2. 传入`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) {

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

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

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