javascript：prototypes with callbacks and'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.

因为里面的回调这个将引用WebSocket对象我使用另一个变量保持 Person 。

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 的这个里面的回调失败。

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 ，如下所示：

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 in front of them like this:

var self = this;

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

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：prototypes with callbacks and'this'的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！