本文深入解析JavaScript中call()函数的核心机制，重点阐述this关键字在不同调用场景下的指向规则。通过对比直接调用、对象方法及new实例，结合具体代码示例，清晰展示B.call(A)的含义：即借用A的上下文执行B函数。文章提供通俗易懂的记忆技巧，帮助开发者快速掌握call()在参数传递和上下文绑定中的应用。
在深入探讨call()函数之前，首先需要明确JavaScript中this关键字的指向逻辑。
this指向
1.指向window：
var name = '小红'
function foo () {
console.log(this.name) //小红
}
foo() //直接调用方法指向的就是window
2.指向直接调用者：
var name = '小红'
var object = {
name: '李白',
function foo () {
console.log(this.name) //李白
}
}
object.foo() //object直接调用foo()，this指向object
3.指向new 实例：
var name = '小红'
function foo () {
this.name = '小白'
console.log(this.name) //小白
}
var fn = new foo() //this指向foo()的实例fn
this的指向问题相对直观，掌握基本规则即可。
总结起来就一句话：谁调用的函数,this就是谁
接下来介绍call()函数，它的行为可能与常规直觉略有不同，需要转换思维。
Call()指向
核心要点：B.call(A) 等价于 A调用B函数，这意味着B函数内部的this指向A。
代码示例：
function _add() {
console.log(this.test);
}
function _sub() {
this.test = 222;
console.log(this.test);
}
_add.call(_sub); //输出undefine。这时，_add的this指向_sub，
_sub里的this指向是window，所以_sub本身没有test这个属性
_add.call(new _sub())//输出222。这时，_add的this指向_sub，
_sub里的this指向是_sub实例，可以获取到_sub的test属性，所以输出222
/******************************************************/
function _add() {
this.test = 444
console.log(this.test);
}
function _sub() {
this.test = 222;
console.log(this.test);
}
_add.call(_sub); //输出444。这时，_sub里的this指向是window，
因此，_sub对象中原本没有test属性，但通过_add.call(_sub)，_add函数内部的this指向了_sub，从而为_sub创建了test属性，最终可以获取到test的值为444。
如果上述解释仍觉得晦涩难懂，这里提供一种更便捷的记忆方法。
猫吃鱼，狗吃肉，奥特曼打小怪兽。 有天狗想吃鱼了 猫.吃鱼.call(狗，鱼) // 狗调用的吃鱼的函数,所以this是狗 狗就吃到鱼了 猫成精了，想打怪兽 奥特曼.打小怪兽.call(猫，小怪兽) // 猫调用了打怪兽的函数,所以this是猫
再通俗一点解释就是：
马云会赚钱 我使用call()函数借用了马云的赚钱函数, 所以我也会赚钱了 马云.赚钱.call(我) 此时this指向我 因为是我调用的赚钱函数
到此这篇关于一文带你快速理解JavaScript中call()函数的使用的文章就介绍到这了,更多相关JavaScript call()内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！