Webpack插件中的apply方法与JavaScript中用于改变this指向的apply方法是否相同？

我在编写Webpack插件时了解到，插件类必须定义一个apply方法，示例代码如下：

class TestPlugin { 
  apply(compiler) { 
    // do something with compiler 
  } 
}

运行Webpack时，会调用每个插件的apply方法并传入compiler对象。但我对JavaScript中函数的apply方法存在疑惑，比如这段代码：

function foo() { } 
foo.apply(object)

这段代码的作用是改变函数内部的this指向。那么Webpack插件中的apply方法与JavaScript中这种用于改变this指向的apply方法是否为同一概念？在此提前致谢。

解答 #

这两者完全不是同一个概念，只是名字恰好撞了而已，具体区别可以从这几个角度理解：

1. 本质与定义不同 #

• JavaScript的Function.prototype.apply()是所有函数天生继承的内置方法，核心作用是调用函数时手动指定其内部的this指向，还能以数组形式给函数传参。比如你写的foo.apply(object)，就是让foo执行时，内部的this指向object。
• Webpack插件里的apply方法是官方约定的插件入口规范，是你自定义插件类时必须声明的一个普通类方法。Webpack启动时会自动实例化插件类，然后调用这个apply方法，把compiler对象传进去，让插件能介入构建流程。

2. 使用场景与目的不同 #

• Function.prototype.apply()是JS语言层面的工具方法，用来灵活控制函数的执行上下文，常见场景比如借用其他对象的方法、批量传递参数等。
• Webpack的apply方法是插件和Webpack核心交互的入口——你得在这个方法里注册Webpack的各种钩子（比如compiler.hooks.run.tap），才能实现修改构建流程、输出产物等插件功能。

3. 调用方式不同 #

• Function.prototype.apply()是由开发者主动调用的，用来触发目标函数并切换其上下文。
• Webpack插件的apply方法是由Webpack核心代码自动调用的，你只需要按规则定义它就行，不用自己手动执行。

举个更直观的例子，假设我们写了一个简单插件：

class MyWebpackPlugin {
  apply(compiler) {
    console.log(this); // 这里的this指向MyWebpackPlugin的实例
    compiler.hooks.run.tap('MyPlugin', () => {
      console.log('Webpack开始构建啦');
    });
  }
}

// Webpack内部大概是这么调用插件的：
const pluginInstance = new MyWebpackPlugin();
pluginInstance.apply(compiler); // 只是调用实例上的apply方法，和Function.prototype.apply毫无关系

你看，Webpack只是调用了插件实例的apply方法，完全没用到JS内置apply的上下文切换功能——只是刚好这个方法名字叫apply罢了。

内容的提问来源于stack exchange，提问作者Courage