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

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

谁能解释一下下面示例中幕后发生的事情，其中​​ 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"}

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

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)变量等，而他没有。