瞭解Object.create

Question

閱讀Object.create文檔後。我做了一些測試。 這是我的代碼。請檢查它。

function Shape() { 
    this.x = 0; 
    this.y = 0; 
} 

Shape.prototype.move = function(x, y) { 
    this.x += x; 
    this.y += y; 
    console.info("Shape moved."); 
}; 

Rectangle=Object.create(Shape); 

Rectangle.move(); //?? why move function is not found ? 

由於文件說Object.create(proto[,propertiesObject]);proto應該是新創建的對象的原型。 所以，Rectangle.prototype應該等於Shape。但事實上並非如此。顯然我不明白這部分文件。我仍然發現Rectangle.__proto__==Shape是真的。 OK，即使Rectangle.__proto__==Shape是真的，爲什麼Rectangle找不到move的功能？ move的功能不在原型鏈中嗎？我以爲move函數在Rectangle.__proto__.prototype，它應該在鏈中找到。爲什麼不能？謝謝。

Answer 1

原型必須是實際的對象。在這種情況下，您應該傳遞Shape的原型，而不是Shape函數。

function Shape() { 
    this.x = 0; 
    this.y = 0; 
} 

Shape.prototype.move = function(x, y) { 
    this.x += x; 
    this.y += y; 
    console.info("Shape moved."); 
}; 

Rectangle=Object.create(Shape.prototype, {a:1}); 

Rectangle.move(); // it will call now 
Rectangle.a; // 1 
Rectangle.x; // NaN ??? 
Rectangle.y; // NaN ??? 

注意Object.create()是不一樣的使用new關鍵字 - 這可能是你正在尋找替代。

function Shape() { 
    this.x = 0; 
    this.y = 0; 
} 

Shape.prototype.move = function(x, y) { 
    this.x += x; 
    this.y += y; 
    console.info("Shape moved."); 
}; 

Rectangle=new Shape; 

Rectangle.move(1,2); // works properly now 
Rectangle.a; // undefined, we never made one 
Rectangle.x; // 1 
Rectangle.y; // 2 

如JavaScript實際中查找構造函數及其.prototype找到原型遞歸，它不會查找形狀的原型，因爲它不是直接設置，也不是用來創建Rectangle的new構造：

function Shape() { 
    this.x = 0; 
    this.y = 0; 
} 

Shape.prototype.move = function(x, y) { 
    this.x += x; 
    this.y += y; 
    console.info("Shape moved."); 
}; 

Rectangle = Object.create(Shape); 
Rectangle.constructor; // Function() 
Rectangle.constructor.prototype; // That's Function.prototype 
/* as you can see Shape.prototype is never touched by the prototype chain */ 

Rectangle.__proto__; // Shape(), not the prototype (doesn't have any direct properties on it) 

Rectangle.move(1,2); // TypeError: Rectangle.move is not a function 
Rectangle.a; // does not exist 
Rectangle.x; // function never called on Rectangle, so also doesn't exist 
Rectangle.y; // function never called on Rectangle, so also doesn't exist 

Answer 2

也許這將幫助你瞭解一點點：

https://www.youtube.com/watch?v=DwYPG6vreJg&feature=player_detailpage#t=739s

在這裏，他解釋說，它不會像你說的那樣工作。 你的論點，即

我以爲move功能在Rectangle.__proto__.prototype

是正確的。你可以找到move作爲Rectangle.__proto__.prototype.move，但它並不意味着，你可以找到它Rectangle.move。原型鏈中斷。我認爲它在視頻中有詳細描述。

去想想這些代碼部分：

function Shape() { 
    this.x = 0; 
    this.y = 0; 
} 

Shape.__proto__.move = function(x, y) { 
    this.x += x; 
    this.y += y; 
    console.info("Shape moved."); 
}; 

Rectangle=Object.create(Shape); 

Rectangle.move(); 

或：

function Shape() { 
    this.x = 0; 
    this.y = 0; 
} 

Shape.prototype.move = function(x, y) { 
    this.x += x; 
    this.y += y; 
    console.info("Shape moved."); 
}; 

Rectangle=Object.create(Shape); 

Rectangle.prototype.move(); 

（x和y仍然在這些情況下不正確的，但你沒有問他們。） ）