object 个实例的属性被另一个实例破坏

Question

我是 node.js/javascript 的新手，来自 C# 世界：我的问题可能是关于将 C# 习惯转换为 javascript...

我创建了一个小 node.js 应用程序来重现我运行遇到的问题。在应用程序中，创建了两个 'Kid'。他们每个人都抓住一个气球，并使它以或多或少的力量（参数）弹跳。当气球停止跳动时，我们会从触发的事件中获取日志..

我的问题是第一个实例化的孩子似乎被最后一个实例化了。暗恋似乎发生在调用 'bounce' 函数时。

这是我期待的日志序列：

Mike arrived in the garden. The kid wants to play with a balloon....

Elia arrived in the garden. The kid wants to play with a balloon....

Ensure that Mike's name is Mike...

Ensure that Elia's name is Elia...

Mike just got a balloon and wrote his/her name on it !

Mike makes the balloon bounce (force 10) !

Elia just got a balloon and wrote his/her name on it !

Elia makes the balloon bounce (force 4) !

Elia's balloon has stopped bouncing... The name written on it is Elia.

10.Mike's balloon has stopped bouncing... The name written on it is Mike.

这是我得到的日志序列：

Mike arrived in the garden. The kid wants to play with a balloon....

Elia arrived in the garden. The kid wants to play with a balloon....

Ensure that Mike's name is Mike...

Ensure that Elia's name is Elia...

Elia just got a balloon and wrote his/her name on it !

Elia makes the balloon bounce (force 10) !

Elia just got a balloon and wrote his/her name on it !

Elia makes the balloon bounce (force 4) !

Elia's balloon has stopped bouncing... The name written on it is Elia.

10.Elia's balloon has stopped bouncing... The name written on it is Elia.

组成应用程序的三个文件。

app.js

const Kid = require('./kid.js');

var mike = new Kid('Mike');
var elia = new Kid('Elia');

console.log(`Ensure that Mike's name is ${mike.name}...`);
console.log(`Ensure that Elia's name is ${elia.name}...`);

mike.bounce(10);
elia.bounce(4);

kid.js

const Balloon = require('./balloon.js');
var self;

function Kid(name){
    self=this;
    this.name=name;

    console.log(`${this.name} arrived in the garden. The kid wants to play with a balloon....`);
}

Kid.prototype.bounce = function(force1To10) {
    var balloon = new Balloon(self.name); 
    balloon.bounce(force1To10);    
    balloon.on('balloonStopped',(kidnameWrittenOnIt)=>{
        console.log(`${self.name}'s balloon has stopped bouncing... The name written on it is ${kidnameWrittenOnIt}.`);
    });
};

module.exports=Kid;

balloon.js

const timers = require("timers");
var inherits = require('util').inherits;  
var EventEmitter = require('events').EventEmitter;
var self;

function Balloon(kidName) {
    self = this;
    this.kidName = kidName;

    this.bounce = function(kidsPower1To10){
        console.log(`${self.kidName} makes the balloon bounce (force ${kidsPower1To10}) !`);
        timers.setTimeout(() => {
            self.emit('balloonStopped',self.kidName);
        }, kidsPower1To10*1000); 
    }

    console.log(`${this.kidName} just got a balloon and wrote his/her name on it !`);
}

inherits(Balloon, EventEmitter);
module.exports = Balloon;

要执行：

node app.js

提前感谢您提供任何有用的信息！

Answer 1

确实问题出在bounce方法中。您引用一个全局 self 变量，该变量将引用第二个人。因此，如果您对第一个人调用 bounce，它仍会引用其中的第二个人。

解决方法是直接使用this代替self，或者在每个方法中定义self：

function Kid(name){
    this.name=name;

    console.log(`${this.name} arrived in the garden. The kid wants to play with a balloon....`);
}

Kid.prototype.bounce = function(force1To10) {
    var balloon = new Balloon(this.name); 
    balloon.bounce(force1To10);
    balloon.on('balloonStopped',(kidnameWrittenOnIt)=>{
        console.log(`${this.name}'s balloon has stopped bouncing... The name written on it is ${kidnameWrittenOnIt}.`);
    });
};

现在您仍然需要注意，当您引用 bounce 方法时，请确保 this 已正确绑定。当您确实调用 mike.bounce(10) 或 elia.bounce(2) 时会出现这种情况，但是当您开始将 bounce 方法分配给另一个变量并调用该另一个变量时会出现陷阱。在那种情况下 this 将是未定义的。

Class 符号

您还可以使用 class 语法对上述代码进行编码：

class Kid {
    constructor(name) {
        this.name=name;
        console.log(`${this.name} arrived in the garden. The kid wants to play with a balloon....`);
    } 
    bounce(force1To10) {
        var balloon = new Balloon(this.name); 
        balloon.bounce(force1To10);
        balloon.on('balloonStopped',(kidnameWrittenOnIt)=>{
            console.log(`${this.name}'s balloon has stopped bouncing... The name written on it is ${kidnameWrittenOnIt}.`);
        });
    }
}

object 个实例的属性被另一个实例破坏

object instance's properties crushed by another instance

javascript

instance

node.js

Class 符号