javascript:带有回调和“this"的原型 [英] javascript: prototypes with callbacks and 'this'

问题描述

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

I've create a prototype based class Person that opens a WebSocket connection and defines callback functions as prototype methods.

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

Because inside the callback this will refer to the WebSocket object I used another variable to hold on to the Person's this. However when I deal with multiple instances the variable gets overwritten.

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

Here is a small snipped that shows the issue:

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，那么在尝试通过套接字发送消息时，我收到以下错误:

If more than one Person is created, then when trying to send a message via the socket I get the following error:

未捕获的错误:INVALID_STATE_ERR:DOM 异常 11

Uncaught Error: INVALID_STATE_ERR: DOM Exception 11

所以似乎 self 是全局定义的，我尝试在回调中获取 Person 的 this 句柄失败.关于如何实现这一目标的任何建议?

So it seems that self is defined globally and my attempt to get a handle to the Person's this inside the callback fails. Any suggestions on how to achieve that?

推荐答案

当你这样做时:

self = this

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

You are implicitly creating a global variable which (since it's global) will have the same value for all instances. Local variables, must have var, let or const in front of them like one of these:

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

但是，这不是您的解决方案.您需要使用 this 代替.而且，如果您要为 websocket 提供回调，并且您想要与之关联的人，我建议您只在 websocket 上放置一个对 Person 对象的引用，这样您就可以从那里检索它.而且，每条语句结束时缺少的分号是怎么回事?无论如何，这里有一些固定的代码:

But, that isn't your solution here. You need to be using this instead. And, if you're going to supply a callback for the websocket and you want the person associated with that, I would suggest you just put a reference to the Person object on the websocket so you can then retrieve it from there. And, what's with all the missing semicolons to end each statement? Anyway, here is some fixed up code:

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
    }
}

这篇关于javascript:带有回调和“this"的原型的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！