Javascript 调用并应用构造函数

Question

我了解调用(和应用)方法在以下示例中的工作原理。

var Bob = {
  name: "Bob",
  greet: function() {
   alert("Hi, I'm " + this.name);
  }
}

var Alice = {
 name: "Alice",
};

Bob.greet.call(Alice);   // Hi, I'm Alice

据我了解，上面发生的事情是 Bob 对象的greet 方法在 Alice 的范围内被调用。

有人可以解释一下下面的示例中幕后发生的事情，其中​​ call 方法用于允许继承的构造函数吗？

function Product(name, price) {
  this.name = name;
  this.price = price;

}

function Food(name, price) {
  Product.call(this, name, price);
  this.category = 'food';
}

var chicken = new Food('chicken','40');
console.log(chicken);  //{ name= "chicken", price="40", category="food"}

我无法在第一个示例和第二个示例之间建立联系，其中第一个示例的 call 方法是在正在执行某些操作(警报)的函数上调用的，而在第二个示例中，call 方法是在正在初始化一些属性的构造函数。

Answer 1

这是一种“借用”Product 的构造函数来初始化新 Food 的方法。

当您使用 new 调用函数时，您将 this 设置为新实例。然后，您将执行 Product.call (即调用 Product 函数并在 Product 函数内设置 this 来是您的新 Food 实例(即 Food 内的 this))，并传递您的 name 和 价格。

在 Product.call(this, name,price); 之后，您应该会发现 this.name 和 this.price 已设置.

这不允许继承，您也无法获得继承；它只是在新的 Food 实例上执行构造函数 Product 。

要获得继承，您还必须将 Food 的 prototype 设置为新的 Product 实例；

function Product(name, price) {
  this.name = name;
  this.price = price;
}

Product.prototype.showPriceIn = function (currency) {
    alert(this.price + currency);
} 

function Food(name, price) {
  Product.call(this, name, price);
  this.category = 'food';
}

Food.prototype = new Product;

var chicken = new Food('chicken','40');
chicken.showPriceIn("$");

http://jsfiddle.net/hPWMN/

---

注意:要小心地说“Bob 是在 Alice 的范围中调用的”；这不是真的。 Bob 没有继承 Alice 的作用域，greet 函数中 this 的值只是更改为 Alice。继承作用域意味着 Bob 可以访问私有(private)变量等，但他却没有。