Question

我找到了包含这些行的代码

var data = function() {
    function Metadata() { /*some initialization here*/ }

    Metadata.prototype = Object.create(Backend.prototype);
    Metadata.prototype.constructor = Metadata;

    return Metadata;
}

我很难理解实际发生了什么，以及如何使用返回的对象。如果我理解正确，data现在将是一个应该像这样初始化的对象

var d = new data()

但我不理解以下几行以及使用Object.create()代替new关键字的原因：

Metadata.prototype = Object.create(Backend.prototype);
Metadata.prototype.constructor = Metadata;

他们做了什么？他们有必要吗？ Object.create和new之间有什么区别？

Answer 1

这两行是Metadata扩展Backend的典型方式。

JavaScript中的类被定义为函数。如果在函数上定义prototype，则可以使用new关键字（或Object.create）来创建类的实例。原型上的函数/属性将位于您创建的类的新实例上。

在上面的代码中，Metadata.prototype被设置为Backend的实例，因此Metadata.prototype将继承调用Backend.prototype上的方法/属性。

您可以在Inheritance and the prototype chain找到更多信息。

Answer 2

JavaScript是一种基于原型的语言。 这意味着它不像其他语言那样使用 class 关键字。相反，JavaScript使用 functions 作为类在您的示例中，数据变量可以同化为类：

var Data = function() { ... }

要创建此类的实例，我们使用 new 关键字将对象类型的结果分配给变量。

var data = new Data()

自ECMA Script 6 以来，我们可以使用实例化方法Object.create()来创建具有指定原型对象和属性的未启动对象。它接受参数，该对象应该是新创建的对象的原型。（它还复制构造函数）

因此，以下行是一种使元数据扩展Backend对象并保留自己的构造函数的方法：

// Metadata extends Backend
Metadata.prototype = Object.create(Backend.prototype);
Metadata.prototype.constructor = Metadata;

但此代码并不完全等同于 Metadata.prototype = new Backend();。见这个例子：

//Base class
var Backend = function(){ this.publicProperty='SomeValue'; }

//Extension class 1
var Metadata1 = function() { }
Metadata1.prototype = Object.create(Backend.prototype);
Metadata1.prototype.constructor = Metadata1;

//Extension class 2
var Metadata2 = function() { }
Metadata2.prototype = new Backend();


/*
 *  Then the results are different (see code snippet at the end of this post)
 */
//result1 = 'undefined'
var data1 = new Metadata1();
var result1 = data1.publicProperty;

//result2 = 'SomeValue'
var data2 = new Metadata2();
var result2 = data2.publicProperty;

实际上两者非常相似，主要区别在于new关键字实际上运行构造函数代码，而Object.create不会执行代码。

另一个区别是，使用Object.create，您可以创建一个不从任何内容继承的对象（Object.create(null)）。
如果您执行Metadata.prototype = null，则新创建的对象将继承自Object.prototype

注意：在某些较旧的浏览器（IE8及以下版本）中，您可以将此等效代码用于Object.create：

Object.create = function(o){
    function F(){}
    F.prototype=o;
    return new F();
}

以下是显示两种方法之间差异的工作代码段

//Base class
var Backend = function(){ this.publicProperty='SomeValue'; }

//Extension class 1
var Metadata1 = function() { }
Metadata1.prototype = Object.create(Backend.prototype);
Metadata1.prototype.constructor = Metadata1;

//Extension class 2
var Metadata2 = function() { }
Metadata2.prototype = new Backend();


//result: 'undefined'
var data1 = new Metadata1();
$("#result1").text("result1: " +  (typeof data1.publicProperty=='undefined' ? 'undefined' : data1.publicProperty));

//result: 'SomeValue'
var data2 = new Metadata2();
$("#result2").text("result2: " +  (typeof data2.publicProperty=='undefined' ? 'undefined' : data2.publicProperty));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="result1"></div>
<div id="result2"></div>

Answer 3

在JavaScript中没有类，而是我们有可以使用new关键字调用的构造函数来创建新对象，因此我们将获得与类和instanciation相同的行为。

这两行用于表示继承，并使Metadata扩展Backend，在行中：

Metadata.prototype = Object.create(Backend.prototype);

我们定义Metadata的原型，该对象应该是新创建的对象的原型。

在这一行中：

Metadata.prototype.constructor = Metadata;

我们定义Metadata的构造函数，它将用于创建Metadata的新实例。

继承可以像这样测试：

var meta = new Metadata(); 

console.log('Is meta an instance of Metadata? ' + (meta instanceof Metadata)); // true
console.log('Is meta an instance of Backend? ' + (meta instanceof Backend)); // true

您可以在Object.create() documentaion这里找到另一个例子来了解更多信息。

Answer 4

Object.create是一个ES6方法，它创建一个以给定对象为原型的对象。

Metadata.prototype = Object.create(Backend.prototype);

因此上面的行意味着Metadata继承了Backend的所有属性和方法。它在某种程度上类似于ES6之前的以下行：

Metadata.prototype = new Backend();

但是，Metadata也会从constructor继承Backend属性：

var metaData = new Metadata();
metaData.constructor; // function Backend()

这看起来很奇怪，因为metaData实际上是使用Metadata构建的，所以我们修复它：

Metadata.prototype.constructor = Metadata;

var metaData = new Metadata();
metaData.constructor; // function Metadata()

请注意，这不会与instanceof运算符混淆：

metaData instanceof Metadata // true
metaData instanceof Backend  // true

使用＆＃39; Object.create（）＆＃39;了解原型对象的创建。而不是＆＃39; new＆＃39;关键词

4 个答案: