Question

通过以下javascript代码我偶然发现它并且效果很好。

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

var Luigi = {
   name: 'xoxox'
};

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

然而，当我将属性'name'更改为其他内容（比如'xyz'）时，就像这样：

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

var Luigi = {
   xyz: 'xoxox'
};

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

它不起作用!!

这种行为表示什么，为什么不起作用？有人可以解释一下吗？

Answer 1

从技术上讲，您的name示例不起作用。执行它是因为全局命名空间（name）中有一个名为window.name的变量。

Answer 2

两者都不起作用，原因是你要将第二个未定义的值传递给call的调用，你可能想要这样做

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

var Luigi = {
   name: 'xoxox'
};

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

无需传递name，因为它已经存在于对象中。

Answer 3

错误在于：

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

sayHello是一个将名称作为参数并且不对其执行任何操作的函数。相反，它返回一个字符串，其中包含调用该函数的对象的属性name。

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

执行Mario.sayHello(myname)时，函数sayHello在Mario的上下文中被调用，name参数初始化为myname中的任何内容（如果myname不存在，甚至可能是错误）。 / p>

如果您想将属性名作为参数，您可以这样做：

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

这两个Javascript代码构造之间的区别

3 个答案: