JavaScript中apply与call的区别及用法详解

您可以直接参考后续示例，或先阅读基础介绍。

apply与call的核心作用

call和apply方法的引入旨在动态改变函数执行时的this指向。当某个对象缺乏特定方法，而其他对象拥有该方法时，可以通过call或apply借用其他对象的方法来执行操作。

call和apply是Function.prototype的方法，由JavaScript引擎内部实现。由于挂载在Function.prototype上，每个Function对象实例（即每个函数）都具备这两个属性。作为方法的属性，它们的使用场景针对函数。尽管两者作用相同，但使用方式存在差异。综上所述，call和apply用于改变调用方法时的this指针。

基础示例如下。

call方法的使用示例

call方法演示

function A() {
  this.getName = function (xx) {
    return xx;
  }
}

function B() {

}

var a = new A();
console.log( a.getName('i am A') ); //i am A

var b = new B() ;
console.log( a.getName.call(b,'i am B') ); // i am B

假设B函数未定义任何方法，而A函数拥有getName()方法。此时a.getName()执行正常，若B也需要使用getName()，可通过call(this, '参数')实现。

进一步理解：借助call或apply调用其他对象的方法，其核心在于动态改变this指向。原本a.getName()中的this指向对象a，使用call后，this被动态指向对象b，从而执行b.getName()的逻辑。

apply方法的使用示例

apply方法演示

apply与call的主要区别仅在于参数传递方式的不同。

function A() {
  this.sun = function (a ,b) {
    return a+b;
  }
}

function B() {

}

var a = new A();
console.log( a.sun(1,2) ); //3

var b = new B() ;
console.log( a.sun.call(b,2,2) ); // 4

console.log( a.sun.apply(b,[3, 3]) ); //6

常见应用场景分析

常见应用场景分析

通过document.getElementsByTagName获取的DOM节点集合属于类数组对象，无法直接使用Array原型下的push、pop等方法。可通过以下方式解决：

var domNodes = Array.prototype.slice.call(document.getElementsByTagName("*"));

经过上述转换，domNodes即可使用Array原型下的所有方法。

以上内容为本文全部讲解，希望有助于您的学习，欢迎继续支持本站。