Difference between these two Javascript code constructs

Question

I happened to chance by the following javascript code and it works beautifully.

var Mario = {
  name: 'Mario',
  sayHello: function(name) {
    return 'Hi I\'m ' + this.name;
  }
};

var Luigi = {
   name: 'xoxox'
};

alert(Mario.sayHello.call(Luigi , name));

However, when i change the property 'name' to something else (say 'xyz'), like so :

var Mario = {
  xyz: 'Mario',
  sayHello: function(xyz) {
    return 'Hi I\'m ' + this.xyz;
  }
};

var Luigi = {
   xyz: 'xoxox'
};

alert(Mario.sayHello.call(Luigi , xyz));

It doesn't work!!

What does this behaviour signify and why isn't it working? Can someone explain?

do you have global variable name?

Grundy
– Grundy

2013-11-25 13:51:24 +00:00
Commented Nov 25, 2013 at 13:51 — Grundy
– Grundy, Commented Nov 25, 2013 at 13:51
yep you have global var name in window

Grundy
– Grundy

2013-11-25 13:53:26 +00:00
Commented Nov 25, 2013 at 13:53 — Grundy
– Grundy, Commented Nov 25, 2013 at 13:53

Lim H. · Accepted Answer · 2013-11-25 13:53:17Z

2

Well, technically, your name example doesn't work. It is executed because there is a variable called name in the global namespace (window.name).

answered Nov 25, 2013 at 13:53

Lim H.

10.1k9 gold badges51 silver badges76 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Alberto Zaccagni · Accepted Answer · 2013-11-25 13:53:43Z

0

Both are not working, the reason being you are passing a second, not defined, value to the invocation of call, you might want to do

var Mario = {
  name: 'Mario',
  sayHello: function() {
    return 'Hi I\'m ' + this.name;
  }
};

var Luigi = {
   name: 'xoxox'
};

alert(Mario.sayHello.call(Luigi));

There is no need to pass name, since that's already in the object.

answered Nov 25, 2013 at 13:53

Alberto Zaccagni

31.8k11 gold badges75 silver badges108 bronze badges

Comments

Tibos · Accepted Answer · 2013-11-25 14:04:47Z

The mistake is here:

var Mario = {
  name: 'Mario',
  sayHello: function(name) {
    return 'Hi I\'m ' + this.name;
  }
};

sayHello is a function that gets name as a parameter and does nothing with it. Instead it returns a string with the property name of the object the function was called on.

Mario.sayHello() // Hi I'm Mario
Mario.sayHello.call({ name: 'Foo'}) // Hi I'm Foo

When you do Mario.sayHello(myname), the function sayHello is called in the context of Mario with the name parameter initialized to whatever is in myname (could even be an error if myname does not exist).

If you want to give the property-name as parameter you can do:

var Mario = {
  name: 'Mario',
  sayHello: function(name) {
    return 'Hi I\'m ' + this[name];
  }
};

var Luigi = {
   xyz: 'xoxox'
};

alert(Mario.sayHello.call(Luigi , 'xyz')); // Hi I'm xoxox

Collectives™ on Stack Overflow

Difference between these two Javascript code constructs

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related