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

发布时间：2020-12-17 17:46:10 所属栏目：安全来源：网络整理

导读：我正在尝试在Angular 2中创建一个WebSocket服务.这是我到目前为止所拥有的： import {Injectable} from "angular2/core"@Injectable()export class ServerService { public ws:WebSocket; public myData = {}; constructor() { let ws = new WebSocket('ws:/

我正在尝试在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对象吗？

解决方法

好吧,所以在看到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中有箭头函数,我的代码在两个浏览器中都按预期工作.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!