如何访问不同对象的属性？

Question

I´m new to objects and OOP and I wanted to know, how I could get an object name and if theres another way to access properties of objects,besides the one that I described below.

Okay, let´s take this example:

function giveMeSomeName() {
    console.log(this)
};

giveMeSomeName();

Console will return the object, which this points to, in this case "Window"

var myObject = {
    giveMeSomeName: function() {
        console.log(this)
    }
}

Console will return the object, which this points to, in this case "Object"

1. In this case the referring Object will be "myObject". Let´s assume I dont have this information, all I have is the console telling me, that this points towards an Object. Is there a way to get the exact name(in this case I would be looking for "myObject") of the object where this is pointing to?

Let´s move on to my second question and extend the second code snippet by one line(this.age = "20"):

var myObject = {
    giveMeSomeName: function() {
        console.log(this)
        this.age = "20"
    }
}

If I wanted to access or manipulate "age" in another context IN this case I would go with "myObject.age += 1" for example and it would change the property "age" of the object "myObject" to 21.

2. Is there another way in terms of syntax to access "age"? this.age wont work, since this points to "Window" and not to "myObject"(where "age" is undefined). As you may realised this question correlates with the first one.

And to be concrete :

I have the following code. How could I access "enemy" in the function "enemyMovement()" (bottom line in the following code)?

var game = new Phaser.Game(500, 200, Phaser.Auto, '', 
    {
        preload: preload,
        create: create,
        update: update
    }
);

function preload() {
    game.load.image('tank', 'assets/tank.png')
    game.load.image('tankEnemy', 'assets/tankEnemy.png')
}

function create() {
    game.stage.backgroundColor = '#3598db'
    game.physics.startSystem(Phaser.Physics.ARCADE);
    game.world.enableBody = true;

    this.cursor = game.input.keyboard.createCursorKeys();
    this.tank = game.add.image(200, 75, 'tank')
    this.enemy = game.add.image(0, 0, 'tankEnemy')
}

function update() {
    if (this.cursor.left.isDown) {
        this.tank.position.x -= 3;
    }
    else if (this.cursor.right.isDown) {
        this.tank.position.x += 3;
    }
    else if (this.cursor.up.isDown) {
        this.tank.position.y -= 3;
    }
    else if (this.cursor.down.isDown) {
        this.tank.position.y += 3;
    }

    enemyMovement();
}

function enemyMovement() {
    enemy.position.x += 3;  //how can I access 'enemy' from above?
}

Thanks :)

Answer 1

When using functions as the basis for objects, you need to use the function as a "constructor function", which means that you instantiate it using the new keyword. Once you do this the usage of the this keyword within the function causes the word to bind to the object variable created during the instantiation. This is how you create instance properties. So:

 // This funciton is intended to be used to construct distinct instances of objects // Notice that the name is written in Pascal Case to alert others of this fact. function GiveMeSomeName(input) { this.myProp = input; console.log(this.myProp) }; // When using a constructor function, use the `new` keyword to generate the instance // and capture the resulting object in a variable to keep each instance separate from // the next. var myObjectInstance1 = new GiveMeSomeName("foo"); var myObjectInstance2 = new GiveMeSomeName("foo2"); 

Will create two separate instances of your object, each with different data stored in its own instance property.

Also, by convention, functions that are meant to be called as constructor functions should be named using Pascal Case (start with a capital letter) to let others know that it should be called with new and it will return an instance.

For your particular game code, each element of the game that should encapsulate its own data and behaviors should be an object, so this code:

function create() {
    game.stage.backgroundColor = '#3598db'
    game.physics.startSystem(Phaser.Physics.ARCADE);
    game.world.enableBody = true;

    this.cursor = game.input.keyboard.createCursorKeys();
    this.tank = game.add.image(200, 75, 'tank')
    this.enemy = game.add.image(0, 0, 'tankEnemy')
}

Should either be a constructor function (and called with new ) or it should itself create a new object and return that object (like a factory function would). Here's an example:

// This will be a factory function that creates and returns an object instance
function createEnemy() {
    game.stage.backgroundColor = '#3598db'
    game.physics.startSystem(Phaser.Physics.ARCADE);
    game.world.enableBody = true;

    function Enemy(){
      this.cursor = game.input.keyboard.createCursorKeys();
      this.tank = game.add.image(200, 75, 'tank')
      this.enemy = game.add.image(0, 0, 'tankEnemy')
    }

    // Create the instance and return it:
    return new Enemy();
}

Then you would simply get your enemy object and use it like this:

// Notice here we are NOT using the `new` keyword because the 
// factory function is already doing that internally. We are just
// "catching" the resulting object that is returned from the factory.
var enemy1 = createEnemy();
enemy1.tank = ...

Finally, because all of this hinges on you, the developer, remembering to use the new keyword, JavaScript now includes the object.create() method that allows you to pass an object that will serve as the prototype object and it returns a new instance for you to use.

Answer 2

In general I suggest you have a deeper look to Prototypes .

In your particular case try extending 'game' object with 'enemyMovement' function:

game.enemyMovement = function() {
    this.enemy.position.x += 3;
}

and change 'update' function:

    ...
    this.enemyMovement();
}