了解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仍然在这些情况下不正确的，但你没有问他们。） ）