call初步理解

原创于 2020-12-14 21:11:40 发布 · 354 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

javaScript 专栏收录该内容

36 篇文章

订阅专栏

这篇博客深入探讨了JavaScript中`Function.prototype.call`方法的本质。通过实例解析，展示了如何利用call改变函数内部的`this`指向，以及连续调用call的连锁反应。文章以fn1.call(fn2)和fn1.call.call(fn2)为例，揭示了函数调用的层次和最终执行的逻辑。读者将了解到JavaScript中函数调用的深层原理。

call的本质是一个函数

Function.prototype.call = function(context){
　　// this表示某函数,函数里面的this先被替换成context,然后再执行
　　this.bind(context)();
}

Function.prototype.call.call(context);
// 相当于
this.bind(context)();
// this指Function.prototype.call,于是相当于
Function.prototype.call.bind(context)();
// 因为Function.prototype.call这个函数里面的this变成了context
context.bind(context)();

Function.prototype.call.call.call(context);
// 相当于
this.bind(context)();/
 Function.prototype.call.bind(context)(); // 因为Function.prototype.call这个函数里面的this变成了context context.bind(context)();

function fn1(){
　　console.log(1)
}
function fn2(){
　　console.log(2)
}
// Function.prototype.call(fn2);this指当前的实例fn1,fn1里面的this是fn2
fn1.call(fn2);
// Function.prototype.call.call(fn2);this指Function.prototype.call,Function.prototype.call里面的this是fn2
fn1.call.call(fn2);
// 相当于
fn2();
//其实只要超过一个call,都是fn2()