JavaScript原型和構造函數

Question

我有以下一段代碼旨在學習JavaScript。

function Pizza(type, slices) {
    this.type = type;
    this.slices = slices;
}


Pizza.prototype.divvyUp = function () {
    alert("The " + this.type + " pizza has been divvied up!");
};

var sausagePizza = new Pizza("sausage", 8);


sausagePizza.constructor.prototype.divvyUp();
sausagePizza.divvyUp();
if (sausagePizza.constructor.prototype.divvyUp === sausagePizza.divvyUp)
{
    alert("yes they are equal");
}

問題是當執行以下兩行代碼時：

sausagePizza.constructor.prototype.divvyUp();
sausagePizza.divvyUp();

盡管它們旁邊的if語句批准就它們的類型和值而言它們是相等的。 但是第一行給我的結果是這樣的：“未定義的披薩已被分割開”，第二行卻給了我一些不同的結果，顯示為“香腸披薩已被分割開”。 我非常困惑，為什么當這兩個if語句相等時，為什么這兩個this.type之間的第一行不能讀取this.type變量值，並在divvyUp()函數內的警報消息中拋出未定義的內容。

Answer 1

兩者之間的區別在於在函數調用中如何綁定“ this”。

左側的對象。 函數調用之前是“ this”綁定到的對象。

sausagePizza.constructor.prototype.divvyUp();
//sausagePizza.constructor.prototype is left of the .divvyUp()
//so it is bound to this. However, the prototype object does not have
//a type property so it this.type returns undefined

但是，對於香腸香腸比薩，構造函數確實創建了那些屬性。

sausagePizza.divvyUp()
//here sausage pizza is to left of .dizzyUp() and "this" is bound to it.

編輯：要了解Java語言中的原型，可能需要完全闡明所有內容。 First Function是對象，這意味着它們具有屬性。 每個函數都具有一些基本屬性。 其中之一就是原型，它最初是一個空對象。

function Pizza(type, slices) {
  this.type = type;
  this.slices = slices;
}
console.log(Pizza.prototype) // prints {} an empty object

Pizza.prototype.divvyUp = function () {
  alert("The " + this.type + " pizza has been divvied up!");
};
console.log(Pizza.prototype) // prints {divvyUp: [Function]}

現在，當我們在函數前面使用new運算符時，它將創建一個新的空對象，設置對象__proto__和構造函數屬性，然后將綁定了“ this”的函數作為新對象運行。

var sausagePizza = new Pizza("sausage", 8);
console.log(sausagePizza) // {type: "sausage", slices: 8}
//Objects in javascript can have hidden properties. 
//If we unhide the relevant ones for this example
//sausagePizza really looks like this.

{
   constructor: Pizza, //the function
   __proto__: Pizza.prototype, //the object on the function
   type: "sausage",
   slices: 8
}

所以 。 操作員實際上通過查看左側的對象以尋找右側的鍵（例如）來工作。 如果在左側的屬性對象中找不到要查找的密鑰，則它將在對象的__proto__中查找該密鑰。 所以當你這樣做

sausagePizza.divvyUp()
//Javascript first looks into sausagePizza for divvyUp.
//It does not find it.
//then it looks for divvyUp in sausagePizza.__proto__
//it find divvyUp there and then () calls the function
//if javascript had not found divvyUp in sausagePizza.__proto__ then it would have
//looked into sausagePizza.__proto__.__proto__ if it existed, and so on