Question

我正在尝试掌握Javascript的某些概念。这是小情况

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

// superclass method
Shape.prototype.move = function(x, y) {
  this.x += x;
  this.y += y;
  console.info('Shape moved.');
};

// Rectangle - subclass
function Rectangle() {
  Shape.call(this); // call super constructor.
}

// subclass extends superclass
Rectangle.prototype = Object.create(Shape.prototype)

现在，如果我输入

Rectangle.prototype instanceof Shape
true

现在，是否意味着 Object.create（在我的第一个代码段的最后一行）返回的对象的类型是{{1} }？看来是的。虽然我没有在任何地方请求它，但我只是指定了该对象的原型，它应该与Shape相同。

我无法在Shape.prototype文档中找到此文档。有人可以解释是否是这种情况，并且（也可能）为什么就是这种情况？

额外：此外，似乎使用了行

Object.create

我是继承方法，而不是Rectangle.prototype = Object.create(Shape.prototype)构造函数中声明的实例变量？因为原型对Shape构造函数中指定的属性一无所知？例如Shape和x。

Answer 1

window.addEventListener("DOMContentLoaded", function(){

  // Shape - superclass
  function Shape() {
    this.x = 0;
    this.y = 0;
  }

  // superclass method
  Shape.prototype.move = function(x, y) {
    this.x += x;
    this.y += y;
    outputArea.innerHTML += '<br>Shape moved.';
  };

  // Rectangle - subclass
  function Rectangle() {
    Shape.call(this); // call super constructor.
  }

    // subclass extends superclass
  Rectangle.prototype = Object.create(Shape.prototype)
  
  var outputArea = document.getElementById("output");
  
  // Shape doesn't inherit from Shape:
  outputArea.innerHTML += "<br>Shape instance of Shape: " + (Shape instanceof Shape);
  
  // Shape is a constructor function and functions inherit from Object:
  outputArea.innerHTML += "<br>Shape instance of Object: " + (Shape instanceof Object);  
  outputArea.innerHTML += "<br>Shape.prototype is: " + typeof Shape.prototype;
 
  // Rectangle isn't an instance - it's a constructor function:
  outputArea.innerHTML += "<br>Rectangle instance of Shape: " + (Rectangle instanceof Shape);
  
  // But, Rectangle's prototype is an actual instance of Shape:
  outputArea.innerHTML += "<br>Rectangle.prototype instance of Shape: " + (Rectangle.prototype instanceof Shape);
  
  // But, if we make an instance of Rectangle...
  var r = new Rectangle();
  
  // Shape's constructor will be called (executed) with the new Rectangle object instance serving as the "this" object.
  
  // r IS an instance of Rectangle which IS an instance of Shape:
  outputArea.innerHTML += "<br>r instance of Shape: " + (r instanceof Shape);
  
  // Use the inherited methods that use the instance fields:
  r.move(10,20);
  outputArea.innerHTML += "<br>r.x = " + r.x;
  outputArea.innerHTML += "<br>r.y = " + r.y;

});

<div id="output"></div>

当你写道：

 // subclass extends superclass
 Rectangle.prototype = Object.create(Shape.prototype)

您要求Rectangle继承的对象是与Shape原型类型相同的新对象。因此，Rectangle继承了Shape为其定义的所有内容，因此Rectangle是Shape的实例。

Object.create(obj)返回一个对象的新实例，该实例的原型设置为您传递给create()方法的对象类型。这就是如何建立继承，如果一个对象从另一个继承，可以说该对象是另一个对象的实例。

Answer 2

这是否意味着Object.create（在我的第一个代码段的最后一行）返回的对象类型是Shape？

没有。没有Shape类型。 ECMAScript只有以下类型：Undefined，Null，Boolean，Number，String，Symbol，Object。

Object.create返回的值属于Object类型。

我刚刚指定了该对象的原型，它应该与Shape.prototype相同。

是的，这正是你得到的。 Object.create返回一个新的不可调用的普通对象，其[[Prototype]]是参数。

默认情况下，instanceof运算符仅检查原型链，即属性继承。它并不能确保所谓的实例确实是由构造函数构造的。

object.Create返回的对象类型

2 个答案: