web前端高级JavaScript - 深挖call方法的底层实现原理并封装自己的call方法

深挖call的底层实现原理

在js中有3个方法可以改变函数中this的指向，那就是call、apply和bind。关于三个方法的更多详细请参考web前端高级 - JavaScript中函数内的this指向。这里只讲一下call的底层实现原理。下面来我们来看一段代码：

let obj = {
   
	name:'Alvin'
}

let name = 'window'
function fn(){
   
	console.log(this.name);
}
fn();//window
fn.call(obj);//Alivn

上面的代码中，当我们直接调用fn函数时输出了全局变量name的值“window”，说明这个时候函数fn中的this指向的是window。当我们执行fn.call(obj)时结果输出了obj对象中的name值“Alvin”，则表明这个时候函数fn中的this已经指向了对象obj了。仅从表象上我们可以分析得知：

• 函数fn被调用执行了
• 函数fn中的this指向发生了变化，不再指向window而是指向了传给call的参数obj了。

结合以上两点我们来尝试自己封装一个call函数

封装自己的call函数

根据上面分析出来的两点结论，我们再来分析一下如果我们自己要去封装一个call函数应该如何去实现

• 首先call函数应该接收至少一个参数[obj]
• 然后让调用call的函数fn执行，并且让函数fn内部的this指向call第一个参数obj

function _call(obj){
   

}

• 那么问题又来了࿱