了解Object.create()和new SomeFunction()之间的区别


390

最近,我偶然发现了Object.create()JavaScript中的方法,并试图推断出它与通过创建对象的新实例有何不同new SomeFunction(),以及何时要使用一个实例。

考虑以下示例:

var test = {
  val: 1,
  func: function() {
    return this.val;
  }
};
var testA = Object.create(test);

testA.val = 2;
console.log(test.func()); // 1
console.log(testA.func()); // 2

console.log('other test');
var otherTest = function() {
  this.val = 1;
  this.func = function() {
    return this.val;
  };
};

var otherTestA = new otherTest();
var otherTestB = new otherTest();
otherTestB.val = 2;
console.log(otherTestA.val); // 1 
console.log(otherTestB.val); // 2

console.log(otherTestA.func()); // 1
console.log(otherTestB.func()); // 2

请注意,在两种情况下都观察到相同的行为。在我看来,这两种情况之间的主要区别是:

  • Object.create()实际上,中使用的对象构成了新对象的原型,而new Function()从声明的属性/函数中使用的对象并不构成原型。
  • 您不能Object.create()像使用函数语法那样使用语法创建闭包。给定JavaScript的词法(与块)类型范围,这是合乎逻辑的。

以上说法正确吗?我想念什么吗?您什么时候可以使用另一个?

编辑:链接到上述代码示例的jsfiddle版本:http : //jsfiddle.net/rZfYL/


Answers:


247

Object.create中使用的对象实际上形成了新对象的原型,而与new Function()一样,声明的属性/函数不构成原型。

是的,Object.create构建一个对象,该对象直接从作为第一个参数传递的对象继承。

使用构造函数,新创建的对象将从构造函数的原型继承,例如:

var o = new SomeConstructor();

在上面的示例中,o直接继承自SomeConstructor.prototype

这里有一个区别,Object.create您可以创建一个不继承任何对象的对象,Object.create(null);另一方面,如果您设置SomeConstructor.prototype = null;了新创建的对象将继承自的对象Object.prototype

您不能像使用功能语法那样使用Object.create语法创建闭包。给定JavaScript的词法(与块)类型范围,这是合乎逻辑的。

好吧,您可以创建闭包,例如使用属性描述符参数:

var o = Object.create({inherited: 1}, {
  foo: {
    get: (function () { // a closure
      var closured = 'foo';
      return function () {
        return closured+'bar';
      };
    })()
  }
});

o.foo; // "foobar"

请注意,我在说的是ECMAScript 5th Edition Object.create方法,而不是Crockford的shim。

该方法已开始在最新的浏览器上本地实现,请检查此兼容性表


2
@CMS 2个问题。1)Object.create(null)上的作用域链是否仍终止于全局范围(例如浏览器中的“窗口”),还是终止于自身?2)我仍然不清楚为什么引入了Object.create(例如,缺少解决此功能的功能是什么?)以及为什么有人会用它代替new Function();
马特2010年

9
@ Matt,1)范围链实际上不是一个相关概念,范围链与标识符解析有关,例如:foo;在当前词法环境中如何解决。2)为了提供一种实现继承的简便方法,这是一个非常强大的构造。IMO我会使用它,因为它确实很简单而且轻巧,但是对于生产代码,我们仍然需要等待一段时间,直到ES5得到广泛支持。关于缺少的功能,缺少创建“原始”对象的事实,Object.create(null);实现可靠的类似于哈希表的对象非常有用...
CMS

@CMS谢谢。因此,简单地使用“ Object.create”创建对象时,便可以选择应作为其原型的对象。
2014年

@CMS好,所以Object.create(null)意味着您hasOwnProperty()在迭代时不必使用废话,因为它不会继承任何东西???我喜欢-谢谢。当然,每个人仍然会做,hasOwnProperty因为不是每个人都会使用它,Object.create(null)所以我不确定这是否是真正的好处...到目前为止,我发现其他Object.create()完全没有说服力的“好处” 。
user949300

424

很简单地说,new X就是Object.create(X.prototype)带有附加运行constructor功能。(并给实际对象constructor一个机会,该机会return应该是表达式的结果而不是this。)

而已。:)

其余的答案只是令人困惑,因为显然没有其他人阅读其中一个的定义new。;)


23
+1简单明了!(尽管Object.create(null)似乎是一个不错的选择-也许应该提一下)。
user949300 2014年

保持简单就是要走的路
Bill

这只是留下的问题“等等,等等功能都有原型?什么是那些之间的关系对象的原型?”
Qwertie

3
@Qwertie:在JS中,一切都是对象。:)他们从Java复制了代码,然后从SmallTalk复制了代码,而SmallTalk一直进行到最后。这是“出现”的一个很好的例子,使生活总体上更轻松。
Evi1M4chine

@ Evi1M4chine实际上在Java中,函数不是对象(就此而言,它们也不是基元)...并且对象没有原型,因此比较似乎不合适。JS与其他流行的OO语言的工作方式不同的事实是造成混淆的主要原因(而且浏览器没有提供一种简单的方法来可视化包含功能和原型的对象网络,这也无济于事)。PS我发现此链接有用:davidwalsh.name/javascript-objects-deconstruction
Qwertie '16

204

这是两个调用在内部执行的步骤:(
提示:唯一的区别在于步骤3)


new Test()

  1. 创建new Object()对象
  2. 设置obj.__proto__Test.prototype
  3. return Test.call(obj) || obj; // normally obj is returned but constructors in JS can return a value

Object.create( Test.prototype )

  1. 创建new Object()对象
  2. 设置obj.__proto__Test.prototype
  3. return obj;

所以基本上Object.create不执行构造函数。


@Ray所以使用object.create我们的字体具有构造函数中提到的函数的属性吗?

@sortednoun,只要属性是私有的且未在原型上指定,是的,它们不会被继承,并且您也不会在新对象中使用它们(我会添加,您可以期望获得最终的原型属性从父级开始,直到父级构造函数至少执行一次。
卡马菲瑟

与大多数构造函数一样,方法是在返回的对象中定义的,new基本上所有函数都是重复的,而Object.create没有。
SparK

61

让我尝试解释(有关Blog的更多信息):

  1. 当您编写Car构造函数时var Car = function(){},这就是内部的情况: 创建javascript对象时的原型链图 我们有一个{prototype}隐藏链接Function.prototype无法访问,而一个prototype链接可以Car.prototype访问并且实际constructorCar。Function.prototype和Car.prototype都具有指向的隐藏链接Object.prototype
  2. 当我们想使用new运算符和create方法创建两个等效的对象时,我们必须这样做:Honda = new Car();Maruti = Object.create(Car.prototype)不同对象创建方法的原型链图 怎么了?

    Honda = new Car();—当您创建这样的对象时,{prototype}将指向hidden 属性Car.prototype。因此,在这里,{prototype}本田对象的始终为Car.prototype—我们没有任何选择来更改{prototype}对象的属性。如果我想更改新创建的对象的原型怎么办?
    Maruti = Object.create(Car.prototype)—在创建这样的对象时,您可以选择一个额外的选项来选择对象的{prototype}属性。如果要将Car.prototype用作,{prototype}则将其作为函数中的参数传递。如果你不希望任何{prototype}对你的对象,那么你可以通过null这样的:Maruti = Object.create(null)

结论-通过使用该方法,Object.create您可以自由选择对象{prototype}属性。在中new Car();,您没有那种自由。

OO JavaScript中的首选方式:

假设我们有两个对象ab

var a = new Object();
var b = new Object();

现在,假设a有一些方法b也要访问。为此,我们需要对象继承(仅当我们要访问这些方法时才a应作为对象的原型b)。如果我们检查的原型ab那么我们会发现,它们共享原型Object.prototype

Object.prototype.isPrototypeOf(b); //true
a.isPrototypeOf(b); //false (the problem comes into the picture here).

问题—我们想要对象a作为的原型b,但是在这里我们b使用原型创建了对象Object.prototype解决方案— ECMAScript 5引入了Object.create(),可以轻松实现这种继承。如果我们创建这样的对象b

var b = Object.create(a);

然后,

a.isPrototypeOf(b);// true (problem solved, you included object a in the prototype chain of object b.)

因此,如果您要进行面向对象的脚本编写,那么Object.create()对于继承非常有用。


因此,它有点类似于没有构造函数调用的对象创建?我们将享受全班的所有好处。obj instanceof类也将为true。但是我们不是通过new调用Class函数。
Praveen

@Anshul您说过a.isPrototypeOf(b);返回的false结果是正确的,因为两个对象都不同并且指向不同的内存。new操作员执行此操作的正确方法在这里。- jsfiddle.net/167onunp
Sagar Karira

为什么不将b的prototype属性设置为a,而不是这样做呢?
大赦国际

也喜欢您博客上的文章。帮助我更好地理解了这个概念。谢谢。
stable_daddy17年

1
结论说明了一切。
kushalvm

44

这个:

var foo = new Foo();

var foo = Object.create(Foo.prototype);

非常相似。一个重要的区别是new Foo实际上运行构造函数代码,而Object.create不会执行诸如

function Foo() {
    alert("This constructor does not run with Object.create");
}

请注意,如果使用的是两参数版本,Object.create()则可以执行更强大的操作。


1
很好的解释。我可能会补充,Object.create以这种最简单的形式使用它,您可以在利用原型继承的同时从代码中省略构造函数。
Ricky Boyce 2015年

23

区别在于所谓的“伪古典与原型继承”。建议在代码中仅使用一种类型,而不是将两种类型混合使用。

在伪古典继承中(使用“ new”运算符),假设您先定义一个伪类,然后从该类创建对象。例如,定义一个伪类“ Person”,然后从“ Person”创建“ Alice”和“ Bob”。

在原型继承中(使用Object.create),您可以直接创建一个特定的人“ Alice”,然后使用“ Alice”作为原型来创建另一个人“ Bob”。这里没有“班级”。都是对象。

在内部,JavaScript使用“原型继承”。“伪古典”方式只是一些糖。

有关两种方法的比较,请参见此链接


21
function Test(){
    this.prop1 = 'prop1';
    this.prop2 = 'prop2';
    this.func1 = function(){
        return this.prop1 + this.prop2;
    }
};

Test.prototype.protoProp1 = 'protoProp1';
Test.prototype.protoProp2 = 'protoProp2';
var newKeywordTest = new Test();
var objectCreateTest = Object.create(Test.prototype);

/* Object.create   */
console.log(objectCreateTest.prop1); // undefined
console.log(objectCreateTest.protoProp1); // protoProp1 
console.log(objectCreateTest.__proto__.protoProp1); // protoProp1

/* new    */
console.log(newKeywordTest.prop1); // prop1
console.log(newKeywordTest.__proto__.protoProp1); // protoProp1

摘要:

1)关于new关键字,有两点需要注意;

a)函数用作构造函数

b)function.prototype对象传递给__proto__属性...或__proto__不支持的位置,它是新对象查找属性的第二个位置

2)与Object.create(obj.prototype)您一起构造一个对象(obj.prototype)并将其传递给预期的对象..区别在于现在新对象__proto__也指向obj.prototype(请为此xj9引用ans)


15

对象创建变体。


变体1:' new Object() '->不带参数的对象构造函数。

var p1 = new Object(); // 'new Object()' create and return empty object -> {}

var p2 = new Object(); // 'new Object()' create and return empty object -> {}

console.log(p1); // empty object -> {}

console.log(p2); // empty object -> {}

// p1 and p2 are pointers to different objects
console.log(p1 === p2); // false

console.log(p1.prototype); // undefined

// empty object which is in fact Object.prototype
console.log(p1.__proto__); // {}

// empty object to which p1.__proto__ points
console.log(Object.prototype); // {}

console.log(p1.__proto__ === Object.prototype); // true

// null, which is in fact Object.prototype.__proto__
console.log(p1.__proto__.__proto__); // null

console.log(Object.prototype.__proto__); // null

在此处输入图片说明


变体2:' new Object(person) '->带参数的对象构造函数。

const person = {
    name: 'no name',
    lastName: 'no lastName',
    age: -1
}

// 'new Object(person)' return 'person', which is pointer to the object ->
//  -> { name: 'no name', lastName: 'no lastName', age: -1 }
var p1 = new Object(person);

// 'new Object(person)' return 'person', which is pointer to the object ->
//  -> { name: 'no name', lastName: 'no lastName', age: -1 }
var p2 = new Object(person);

// person, p1 and p2 are pointers to the same object
console.log(p1 === p2); // true
console.log(p1 === person); // true
console.log(p2 === person); // true

p1.name = 'John'; // change 'name' by 'p1'
p2.lastName = 'Doe'; // change 'lastName' by 'p2'
person.age = 25; // change 'age' by 'person'

// when print 'p1', 'p2' and 'person', it's the same result,
// because the object they points is the same
console.log(p1); // { name: 'John', lastName: 'Doe', age: 25 }
console.log(p2); // { name: 'John', lastName: 'Doe', age: 25 }
console.log(person); // { name: 'John', lastName: 'Doe', age: 25 }

在此处输入图片说明


版本3.1:“ Object.create(person) ”。将Object.create与简单对象“ person”一起使用。'Object.create(person)'将创建(并返回)新的空对象,并将属性'__proto__'添加到同一新的空对象。该属性“ __proto__”将指向对象“人”。

const person = {
        name: 'no name',
        lastName: 'no lastName',
        age: -1,
        getInfo: function getName() {
           return `${this.name} ${this.lastName}, ${this.age}!`;
    }
}

var p1 = Object.create(person);

var p2 = Object.create(person);

// 'p1.__proto__' and 'p2.__proto__' points to
// the same object -> 'person'
// { name: 'no name', lastName: 'no lastName', age: -1, getInfo: [Function: getName] }
console.log(p1.__proto__);
console.log(p2.__proto__);
console.log(p1.__proto__ === p2.__proto__); // true

console.log(person.__proto__); // {}(which is the Object.prototype)

// 'person', 'p1' and 'p2' are different
console.log(p1 === person); // false
console.log(p1 === p2); // false
console.log(p2 === person); // false

// { name: 'no name', lastName: 'no lastName', age: -1, getInfo: [Function: getName] }
console.log(person);

console.log(p1); // empty object - {}

console.log(p2); // empty object - {}

// add properties to object 'p1'
// (properties with the same names like in object 'person')
p1.name = 'John';
p1.lastName = 'Doe';
p1.age = 25;

// add properties to object 'p2'
// (properties with the same names like in object 'person')
p2.name = 'Tom';
p2.lastName = 'Harrison';
p2.age = 38;

// { name: 'no name', lastName: 'no lastName', age: -1, getInfo: [Function: getName] }
console.log(person);

// { name: 'John', lastName: 'Doe', age: 25 }
console.log(p1);

// { name: 'Tom', lastName: 'Harrison', age: 38 }
console.log(p2);

// use by '__proto__'(link from 'p1' to 'person'),
// person's function 'getInfo'
console.log(p1.getInfo()); // John Doe, 25!

// use by '__proto__'(link from 'p2' to 'person'),
// person's function 'getInfo'
console.log(p2.getInfo()); // Tom Harrison, 38!

在此处输入图片说明


变体3.2:' Object.create(Object.prototype) '。使用Object.create和内置对象->'Object.prototype'。'Object.create(Object.prototype)'将创建(并返回)新的空对象,并将属性'__proto__'添加到同一新的空对象。该属性“ __proto__”将指向对象“ Object.prototype”。

// 'Object.create(Object.prototype)' :
// 1. create and return empty object -> {}.
// 2. add to 'p1' property '__proto__', which is link to 'Object.prototype'
var p1 = Object.create(Object.prototype);

// 'Object.create(Object.prototype)' :
// 1. create and return empty object -> {}.
// 2. add to 'p2' property '__proto__', which is link to 'Object.prototype'
var p2 = Object.create(Object.prototype);

console.log(p1); // {}

console.log(p2); // {}

console.log(p1 === p2); // false

console.log(p1.prototype); // undefined

console.log(p2.prototype); // undefined

console.log(p1.__proto__ === Object.prototype); // true

console.log(p2.__proto__ === Object.prototype); // true

在此处输入图片说明


变体4:“ new SomeFunction()

// 'this' in constructor-function 'Person'
// represents a new instace,
// that will be created by 'new Person(...)'
// and returned implicitly
function Person(name, lastName, age) {

    this.name = name;
    this.lastName = lastName;
    this.age = age;

    //-----------------------------------------------------------------
    // !--- only for demonstration ---
    // if add function 'getInfo' into
    // constructor-function 'Person',
    // then all instances will have a copy of the function 'getInfo'!
    //
    // this.getInfo: function getInfo() {
    //  return this.name + " " + this.lastName + ", " + this.age + "!";
    // }
    //-----------------------------------------------------------------
}

// 'Person.prototype' is an empty object
// (before add function 'getInfo')
console.log(Person.prototype); // Person {}

// With 'getInfo' added to 'Person.prototype',
// instances by their properties '__proto__',
// will have access to the function 'getInfo'.
// With this approach, instances not need
// a copy of the function 'getInfo' for every instance.
Person.prototype.getInfo = function getInfo() {
    return this.name + " " + this.lastName + ", " + this.age + "!";
}

// after function 'getInfo' is added to 'Person.prototype'
console.log(Person.prototype); // Person { getInfo: [Function: getInfo] }

// create instance 'p1'
var p1 = new Person('John', 'Doe', 25);

// create instance 'p2'
var p2 = new Person('Tom', 'Harrison', 38);

// Person { name: 'John', lastName: 'Doe', age: 25 }
console.log(p1);

// Person { name: 'Tom', lastName: 'Harrison', age: 38 }
console.log(p2);

// 'p1.__proto__' points to 'Person.prototype'
console.log(p1.__proto__); // Person { getInfo: [Function: getInfo] }

// 'p2.__proto__' points to 'Person.prototype'
console.log(p2.__proto__); // Person { getInfo: [Function: getInfo] }

console.log(p1.__proto__ === p2.__proto__); // true

// 'p1' and 'p2' points to different objects(instaces of 'Person')
console.log(p1 === p2); // false

// 'p1' by its property '__proto__' reaches 'Person.prototype.getInfo' 
// and use 'getInfo' with 'p1'-instance's data
console.log(p1.getInfo()); // John Doe, 25!

// 'p2' by its property '__proto__' reaches 'Person.prototype.getInfo' 
// and use 'getInfo' with 'p2'-instance's data
console.log(p2.getInfo()); // Tom Harrison, 38!

在此处输入图片说明


不错的总结。谢谢。今天对我有帮助!
Anandaraja_Srinivasan

11

在内部Object.create执行此操作:

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

该语法只是消除了JavaScript使用古典继承的错觉。


25
ECMAScript 5 Object.create方法的作用还不止于此,您可以通过属性描述符定义属性,还可以创建一个不继承任何对象的对象(Object.create(null);),应避免使用此类垫片,因为您无法真正模仿在ES3上的行为。更多信息
CMS 2010年

同意@CMS,但通常来说,它是适用于的简单polyfill Object.create
V. Kovpak

10

相应于此答案此video new关键字,还会执行以下操作:

  1. 创建新对象。

  2. 将新对象链接到构造函数(prototype)。

  3. 使this变量指向新对象。

  4. 使用新对象执行构造函数,并隐式执行return this;

  5. 将构造函数名称分配给新对象的property constructor

Object.create只有执行1st2nd步骤!

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.