JavaScript：解释继承、__proto__ 和原型的图表答案

【问题标题】：JavaScript: Diagram to explain inheritance, __proto__ and prototypeJavaScript：解释继承、__proto__ 和原型的图表
【发布时间】：2015-05-23 05:45:36
【问题描述】：

我有以下代码：

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

Shape.prototype.describeLocation = function() {
    return 'I am located at ' + this.x + ', ' + this.y;
};

var myShape = new Shape(1, 2);

function Circle(x, y, radius) {
    Shape.call(this, x, y);  // call parent constructor
    this.radius = radius;
}

var myFirstCircle = new Circle(3, 4, 10);

Circle.prototype = Object.create(Shape.prototype);

Circle.prototype.calculateArea = function() {
    return 'My area is ' + (Math.PI * this.radius * this.radius);
};

var mySecondCircle = new Circle(3, 4, 10);

我想要一个直观的*解释：

Circle.prototype = Object.create(Shape.prototype);引起的变化
__proto__ 和 prototype 对象之间的联系
mySecondCircle 如何从Shape 继承describeLocation() 方法
为什么calculateArea() 方法适用于mySecondCircle 而不适用于myFirstCircle：

> myFirstCircle.calculateArea()
Uncaught TypeError: undefined is not a function

> mySecondCircle.calculateArea()
"My area is 314.1592653589793"

* 当试图理解有关继承的 JavaScript 问题时，图表确实是 worth a thousand words, 我发现这些问题中的图表非常有帮助： 1, 2, 3, 4.

【问题讨论】：

哦，这是一个不错的图表链接集合 :-)

标签： javascript inheritance prototype

【解决方案1】：

全尺寸——image、page。

Circle.prototype（原始）是作为function Circle(...) {...}的副作用而创建的

Circle.prototype（重新定义）由Circle.prototype = Object.create(Shape.prototype);创建

我还制作了这个动画版本来显示对象的创建顺序：

全尺寸——image、page。

【讨论】：

你用什么软件画的？

【解决方案2】：

为什么 mySecondCircle 存在 calculateArea() 方法但 myFirstCircle 不存在：

通过重新分配 Circle.prototype，您将取消引用已创建实例所使用的原型。以下代码演示：

var org = {name:"org"}
var copy1 = org;//copy1===org
org={name:"changed"};org!==copy1
var copy2 = org;//copy2===org
org.name="again";//copy2.name === "again"

当我们通过将完全不同的对象分配给 org（取消引用它）来更改 org 名称时，copy1 和 org 不再指向同一个对象。

当我们设置 org(mutate org) 的 name 属性时，copy2 和 org 仍然指向同一个对象。

【讨论】：