javascript中的apply()以及call()方法的使用

最新推荐文章于 2025-01-02 17:56:12 发布

原创最新推荐文章于 2025-01-02 17:56:12 发布 · 176 阅读

0 ·

CC 4.0 BY-SA版权

前端同时被 2 个专栏收录

3 篇文章

订阅专栏

javascript

3 篇文章

订阅专栏

本文介绍了JavaScript中this的使用。this是只读变量，在不同上下文引用会改变，最外层代码中指向全局对象，函数内则因调用方式而异。还讲解了Function对象的apply和call方法，它们能让函数的this引用指向特定对象，且传参方式不同。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

关于this的使用

this 在javascript中是一个只读的变量。在不同的上下文语境当中，this的引用会有改变。

this 引用的规则：

在最外层的代码中，this引用的是全局对象。浏览器的环境下，就是Window对象。
在函数内，this引用根据函数调用的方式的不同而有所不同。

函数内部的this引用规则：

函数的调用方式	this引用的引用对象
构造函数调用	所生成的对象
方法调用	接收方对象
apply或是call调用	由apply或call的参数指定的对象
其他方式的调用	全局对象

apply 和 call 方法

Function对象的方法。通过他们调用的函数的this引用，可以指向任意特定对象。可以理解为他们能够显示的指定接收方对象。

示例：

var applyDemo = {
    x: "applyDemo",
    printX: function() {console.log("x: " + this.x)}
}
applyDemo.printX();

var newObj = {x: "newObj"};
applyDemo.printX.apply(newObj);
applyDemo.printX.call(newObj);

输出：

x: applyDemo
x: newObj
x: newObj

可以看出使用 apply 和 call 的方法，printX 方法中的 this 引用指向了newObj。

两者的区别在于给 Function 传参时，apply 是通过数组将所有的参数传入，而 call 是将参数分开一个一个传。

示例：

var applyDemo = {
    x: "applyDemo",
    printX: function(a, b) {console.log("x: " + this.x + ", a: " + a  + ", b: " + b )}
}
applyDemo.printX(1, 2);

var newObj = {x: "newObj"};
applyDemo.printX.apply(newObj, [1, 2]);
applyDemo.printX.call(newObj, 1, 2);

输出：

x: applyDemo, a: 1, b: 2
x: newObj, a: 1, b: 2
x: newObj, a: 1, b: 2