箭头函数中的WebSocket回调没有在词法上设置'this'

Question

我正在尝试在Angular 2中创建一个WebSocket服务.这是我到目前为止所拥有的:

import {Injectable} from "angular2/core"
@Injectable()
export class ServerService {

    public ws:WebSocket;

    public myData = {};

    constructor() {
        let ws = new WebSocket('ws://localhost:8080/');

        ws.onopen = (event:Event) => {
            console.log("Socket has been opened!");
        };

        ws.onmessage = (event:Event) => {
            this.myData = JSON.parse(event.data);
        };
    };
}

问题是,在onmessage运行时,this关键字变为WebSocket对象,而不是我的ServerService对象.

似乎我的箭头功能充当了标准功能.可能是什么导致了这个？还有另一种方法可以回到ServerService对象吗？

Answer 1

好的，因此，在看到Abdulrahmans的示例工作很繁琐之后，我发现我的环境可能存在问题。原来我的TypeScript正在编译到ES5，并且正在输出：

function ServerService() {
                var _this = this;
                this.myData = {};
                var ws = new WebSocket('ws://localhost:8080');
                ws.onopen = function (event) {
                    console.log("Socket has been opened!");
                };
                ws.onmessage = function (event) {
                    _this.myData = JSON.parse(event.data);
                };
            }

我的箭头函数确实被删除了，但是被功能上应该等效的东西代替了。它可以在Firefox中正常工作，但不能在Chrome（我正在调试的地方）中工作。

我将TypeScript编译器切换为输出ES6，现在我的JavaScript中具有箭头功能，并且我的代码在两种浏览器中都能正常工作。