Javascript constructor: Accessing outside variable

Question

I try to access an object which is global; it's a kind of a preset.

var perks = {health: 100, attack: 10};

var player = function(hp) {
   this.stats = perks;

   //Changing some standard values..
   this.stats["health"] = hp; 
}

var Peter = new player(200);
var Steven = new player(300);

I hope you get my intention; the problem is, that it won't work correct, and I'm not even sure what it does wrong. If I create more than one player, e.g. Steven, Collin and James, every player has the same perks. In this example Peter and Steven both have 300 health.

If I change the line

this.stats = perks;

to

this.stats = {health: 100, attack: 10};

everything works like intended. Peter and Steven both have their own stats. How do I access the global var perks?

because both of them refers to the same instance of perks

Arun P Johny
– Arun P Johny

2015-05-05 12:09:25 +00:00
Commented May 5, 2015 at 12:09 — Arun P Johny
– Arun P Johny, Commented May 5, 2015 at 12:09

Andrew Surzhynskyi · Accepted Answer · 2015-05-07 12:12:01Z

It happens because in JavaScript object does not copy that way, thats why all of your players using the same perks object. There is a few ways to solve it:

Create new object with a function (object own constructor).

function createPerks() {
    return {
        health: 100,
        attack: 10
    };
}

var player = function(hp) {
    this.stats = createPerks();

    //Changing some standard values..
    this.stats["health"] = hp; 
}

var Peter = new player(200);
var Steven = new player(300);

Create new object each time and use constants for default values:

var BASE_HEALTH = 100;
var BASE_ATTACK = 10;

var player = function(hp) {
    this.stats = {
        health: BASE_HEALTH,
        attack: BASE_ATTACK
    };

    //Changing some standard values..
    this.stats["health"] = hp; 
}

var Peter = new player(200);
var Steven = new player(300);

Use Object.create (works in IE9+, but shimable for older browsers):

var perks = {health: 100, attack: 10};

var player = function(hp) {
    this.stats = Object.create(perks);

    //Changing some standard values..
    this.stats["health"] = hp; 
}

var Peter = new player(200);
var Steven = new player(300);

Keep in mind that Object.create does not clone an object but inherit one object from another.

Object.create shim for old browsers by Douglas Crockford:

if (typeof Object.create !== 'function') {
    Object.create = function (o) {
        function F() {}
        F.prototype = o;
        return new F();
    };
}

Zee · Accepted Answer · 2015-05-05 12:10:45Z

1

The moment you write this.stats = perks; both of them refer to the same object that is {health: 100, attack: 10}. So any changes made to any one of them will always affect the other.

As var Steven = new player(300); is the last value you assigned. All your players will now have {health: 300, attack: 10}

answered May 5, 2015 at 12:10

Zee

8,4805 gold badges39 silver badges59 bronze badges

Collectives™ on Stack Overflow

Javascript constructor: Accessing outside variable

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related