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在函数范围内的处理方式。

使用arrow function（() => {}），this将以词汇方式处理;这意味着它将指向包含范围。

从上面链接的MDN文档中

箭头函数不会创建自己的上下文，所以这有它的原始含义来自封闭的上下文

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

同样，来自MDN文档，

在箭头函数之前，每个新函数都定义了自己的这个值（构造函数中的新对象，在严格模式下未定义）函数调用，如果函数被调用为上下文对象＆＃34;对象方法＆＃34;等。）。

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

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

如果您想继续使用常规功能，则需要适当地绑定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;
    });
},

另见How to access the correct this inside a callback?

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

1 个答案: