javascript:带有回调和 'this' 的原型(prototype)

Question

我创建了一个基于原型(prototype)的类 Person，它打开一个 WebSocket 连接并将回调函数定义为原型(prototype)方法。

因为在回调中 this 将引用 WebSocket 对象，我使用另一个变量来保存 Person 的 this。但是，当我处理多个实例时，变量会被覆盖。

这是一个显示问题的小片段:

function Person(name){
    self = this
    self.name = name
}

Person.prototype = {
    getName : function(){
        return self.name
    },

    openConnection : function(host, port){
        self.pointCount = 0
        self.ws = new WebSocket("ws://" + host + ":" + port)
        self.ws.onopen = self.onOpenConnection
    },

    onOpenConnection : function()   {
        console.log(this) // prints the websocket
        console.log(self) // prints the person
        self.ws.send(self.name) // works only if one person exists
    }
}

var p1 = new Person("Jonh")
var p2 = new Person("Adam")

console.log(p1.getName()) // Prints Adam
console.log(p2.getName()) // Prints Adam

p1.openConnection("localhost", 7000) // opens connection for p1
p2.openConnection("localhost", 7000) // opens another connection for p1    

如果创建了多个 Person，那么在尝试通过套接字发送消息时，我会收到以下错误:

Uncaught Error: INVALID_STATE_ERR: DOM Exception 11

看来 self 是全局定义的，我试图在回调中获取 Person 的 this 句柄的尝试失败了。关于如何实现这一点有什么建议吗？

Answer 1

当你这样做时:

self = this

您正在隐式创建一个全局变量，该变量(因为它是全局的)对所有实例都具有相同的值。局部变量，必须在它们前面有 var、let 或 const，例如以下之一:

var self = this;
const self = this;
let self = this;

但是，这不是您的解决方案。您需要改用 this。而且，如果您要为 websocket 提供回调并且您想要与之相关联的人，我建议您只需在 websocket 上放置对 Person 对象的引用，以便您可以从那里检索它。而且，每条语句末尾缺少的分号是怎么回事？不管怎样，这里有一些固定的代码:

function Person(name){
    this.name = name;
}

Person.prototype = {
    getName : function(){
        return this.name;
    },

    openConnection : function(host, port){
        this.pointCount = 0;
        this.ws = new WebSocket("ws://" + host + ":" + port);
        // save person reference on the web socket
        // so we have access to the person from web socket callbacks
        this.ws.person = this;   
        this.ws.onopen = this.onOpenConnection;
    },

    onOpenConnection : function()   {
        // "this" will be the websocket
        // "this.person" is the person object
        console.log(this); // prints the websocket
        console.log(this.person); // prints the person
        this.send(this.person.name); // works only if one person exists
    }
}