Vue.JS + webpack构建事件发布问题

Question

在Vue.js中使用eventBus模式允许中心位置发出事件，以便订阅侦听组件可以处理此类事件。

以下代码片段是在子组件上设置侦听器，以便在发生特定UI更改时接收更新的对象server 。

今天我碰到了这个DID'T在子组件中工作的东西：

created: function() {
        eventBus.$on('serverSelected', function(server) {
            console.log('serverDetails, server=' + server.toString());
            this.server = server;
    });
},

但是这个DID工作：

created: function() {
        eventBus.$on('serverSelected', (server) => {
            console.log('serverDetails, server=' + server.toString());
            this.server = server;
    });
},

我相信唯一不同的是回调的ES6语法。 但香草JS应该还能正常工作吗？

我是JS的新手。 为什么会有不同之处？为什么只有第二个版本有效？

Answer 1

之间的主要差别function(){}和() => {}是如何精确this将在功能的范围内进行处理。

使用箭头函数 （ () => {} ）， this将在词法上处理; 意思是它将指向包含范围。

从上面链接的MDN文档中，

箭头函数不会创建自己的此上下文，因此它具有封闭上下文的原始含义

使用常规函数表达式， this所指的内容取决于方法的调用方式。 在你的情况下，它可能是指eventBus 。

再次，从MDN文档中，

在箭头函数之前，每个新函数都定义了它自己的这个值（在构造函数的情况下是一个新对象，在严格模式函数调用中是未定义的，如果函数被称为“对象方法”则是上下文对象，等等）。

这就是为什么它适用于箭头函数，而不是常规函数，因为使用箭头函数， this指向具有server属性的Vue，并且使用常规函数，它指向eventBus 。

这是一个显示差异的例子 。 弹出打开控制台以查看不同的消息。

如果您想继续使用常规函数，则需要适当地绑定this 。 一种方法是使用bind 。

created: function() {
        eventBus.$on('serverSelected', function(server) {
            console.log('serverDetails, server=' + server.toString());
            this.server = server;
    }.bind(this));
},

或者你可以使用一个闭包。

created: function() {
        const self = this
        eventBus.$on('serverSelected', function(server) {
            console.log('serverDetails, server=' + server.toString());
            self.server = server;
    });
},

另见， 如何访问正确的this回调里面？