Javascript Vue.JS+；带有事件发射的网页包生成问题

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

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

server

我今天遇到了一个在子组件中不起作用的问题：

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

但这确实奏效了：

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

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

---

我对JS很陌生。为什么有不同的版本，为什么只有第二个版本可以工作

function（）{}和

（）=>{}

之间的一个主要区别就是

这个

在函数范围内的处理方式

使用（

（）=>{}

）时，

将按词汇处理此

；这意味着它将指向包含范围

从上面链接的MDN文档中

箭头函数不会创建自己的上下文，因此 它的本义来自于封闭的上下文

对于正则函数表达式，this所指的内容取决于方法的调用方式。在您的例子中，它可能指的是

eventBus

同样，从MDN文档中

在arrow函数之前，每个新函数都定义了自己的此值 （如果是构造函数，则为新对象，在严格模式下未定义） 函数调用，如果函数作为 “对象方法”等）

这就是为什么它与arrow函数一起工作，而与regular函数不一起工作的原因，因为在arrow函数中，

此

指向具有

服务器

属性的Vue，而在regular函数中，它指向

事件总线

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

如果您想继续使用常规函数，则需要适当地绑定

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;
    });
},

---

另请参见，

您的问题是否得到了回答？