我们相信:世界是美好的,你是我也是。平行空间的世界里面,不同版本的生活也在继续...

使用函数原型链上的call()方法,并不是一个常规的函数调用的方式,但还是有一些使用场景的。在本文中,苏南大叔就主要描述.call()方法的使用姿势。当然,本文是非常的简单易懂,是为后续文章做铺垫的一个文章而已,高手依然请飘过。

苏南大叔:javascript,如何理解函数原型链上的call()方法? - 函数原型链上的call方法
javascript,如何理解函数原型链上的call()方法?(图3-1)

大家好,这里是苏南大叔的程序如此灵动博客,这里记录苏南大叔和计算机代码的故事。本文描述javascript编程中,.call()的用法。测试环境:node@16.14.2

基本思路

.call()存在于任何一个函数或者方法上,是个function就可以调用.call()。举例如下:

function test(a, b) {
    return a + b;
}
console.log(test(1, 2));           //3
console.log(test.call("", 1, 2));  //3

两个输出都为3

苏南大叔:javascript,如何理解函数原型链上的call()方法? - 最简单的情况
javascript,如何理解函数原型链上的call()方法?(图3-2)

但是,使用.call()的时候,多第一个参数。那么,这第一个参数是用来做什么的呢?

修改this.指向

有关this.,有如下两种情况

  • 对于没有定义在任何对象上的function,实际上也有this.指向,指向的是个全局对象(似乎是个不可抗的变量)。
  • 对于定义在某个object上面的方法,this.指向,很好理解。

下面拿一个对象变量做例子,来说明问题。

var sunan = {
    c: 3,
    test: function (a, b) {
        return a + b + this.c;
    }
}
console.log(sunan.test(1, 2));                 // 6
console.log(sunan.test.call({ c: 4 }, 1, 2));  // 7

在这个例子里面,.call()的第一个参数,传入了一个新的对象,它覆盖了原有的数据。c属性由3变成了4,而test方法依然存在。

苏南大叔:javascript,如何理解函数原型链上的call()方法? - 第一个参数改变this指向
javascript,如何理解函数原型链上的call()方法?(图3-3)

相关链接

总结

函数.call(),任何函数或方法都可以执行。其第一个参数可以传入一个对象改变函数体里面的this.。如果函数是个不涉及this.的函数。那么,第一个参数就可以随便传递,写啥都可以,不影响逻辑。

如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留作者链接。

 【福利】 腾讯云最新爆款活动!1核2G云服务器首年50元!

 【源码】本文代码片段及相关软件,请点此获取更多信息

 【绝密】秘籍文章入口,仅传授于有缘之人   js