Object.create()

  • Revision slug: JavaScript/Reference/Global_Objects/Object/create
  • Revision title: Object.create
  • Revision id: 301399
  • Created:
  • Creator: eliranmal
  • Is current revision? No
  • Comment

Revision Content

Summary

Creates a new object with the specified prototype object and properties.

Method of Object
Implemented in JavaScript 1.8.5
ECMAScript Edition ECMAScript 5th Edition

Syntax

Object.create(proto [, propertiesObject ])

Parameters

proto
The object which should be the prototype of the newly-created object.
propertiesObject
If specified and not undefined, an object whose enumerable own properties (that is, those properties defined upon itself and not enumerable properties along its prototype chain) specify property descriptors to be added to the newly-created object, with the corresponding property names.

Description

Throws a TypeError exception if the proto parameter isn't null or an object.

Examples

var o;

// create an object with null as prototype
o = Object.create(null);


o = {};
// is equivalent to:
o = Object.create(Object.prototype);


// Example where we create an object with a couple of sample properties.
// (Note that the second parameter maps keys to *property descriptors*.)
o = Object.create(Object.prototype, {
  // foo is a regular "value property"
  foo: { writable:true, configurable:true, value: "hello" },
  // bar is a getter-and-setter (accessor) property
  bar: {
    configurable: false,
    get: function() { return 10 },
    set: function(value) { console.log("Setting `o.bar` to", value) }
}})


function Constructor(){}
o = new Constructor();
// is equivalent to:
o = Object.create(Constructor.prototype);
// Of course, if there is actual initialization code in the Constructor function, the Object.create cannot reflect it


// create a new object whose prototype is a new, empty object
// and a adding single property 'p', with value 42
o = Object.create({}, { p: { value: 42 } })

// by default properties ARE NOT writable, enumerable or configurable:
o.p = 24
o.p
//42

o.q = 12
for (var prop in o) {
   console.log(prop)
}
//"q"

delete o.p
//false

//to specify an ES3 property
o2 = Object.create({}, { p: { value: 42, writable: true, enumerable: true, configurable: true } });

Cross-browser compatibility

Based on Kangax's compat table.

{{ CompatibilityTable() }}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 5 {{ CompatGeckoDesktop("2") }} 9 11.60 5
Feature Firefox Mobile (Gecko) Android IE Mobile Opera Mobile Safari Mobile
Basic support {{ CompatGeckoDesktop("2") }} {{ CompatVersionUnknown() }} {{ CompatUnknown() }} 11.50 {{ CompatVersionUnknown() }}

Polyfill

if (!Object.create) {
    Object.create = function (o) {
        if (arguments.length > 1) {
            throw new Error('Object.create implementation only accepts the first parameter.');
        }
        function F() {}
        F.prototype = o;
        return new F();
    };
}

This polyfill covers the main use case which is creating a new object for which the prototype has been chosen but doesn't take the second argument into account.

See also

{{ languages( {"zh-cn": "zh-cn/JavaScript/Reference/Global_Objects/Object/create" } ) }}

Revision Source

<h2 id="Summary" name="Summary">Summary</h2>
<p>Creates a new object with the specified prototype object and properties.</p>
<table class="standard-table">
  <thead>
    <tr>
      <th class="header" colspan="2">Method of <a href="/en/JavaScript/Reference/Global_Objects/Object" title="en/JavaScript/Reference/Global_Objects/Object"><code>Object</code></a></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Implemented in</td>
      <td>JavaScript 1.8.5</td>
    </tr>
    <tr>
      <td>ECMAScript Edition</td>
      <td>ECMAScript 5th Edition</td>
    </tr>
  </tbody>
</table>
<h2 id="Syntax" name="Syntax">Syntax</h2>
<p><code>Object.create(<em>proto</em> [, <em>propertiesObject</em> ])</code></p>
<h2 id="Parameters" name="Parameters">Parameters</h2>
<dl>
  <dt>
    proto</dt>
  <dd>
    The object which should be the prototype of the newly-created object.</dd>
  <dt>
    propertiesObject</dt>
  <dd>
    If specified and not undefined, an object whose enumerable own properties (that is, those properties defined upon itself and <em>not</em> enumerable properties along its prototype chain) specify property descriptors to be added to the newly-created object, with the corresponding property names.</dd>
</dl>
<h2 id="Description" name="Description">Description</h2>
<p><code><span style="font-family: Verdana,Tahoma,sans-serif;">Throws a </span><span style="font-family: Courier New;">TypeError</span></code><code><span style="font-family: Verdana,Tahoma,sans-serif;"> exception if the proto parameter isn't null or an object</span></code>.</p>
<h2 id="Examples" name="Examples">Examples</h2>
<pre class="brush: js">
var o;

// create an object with null as prototype
o = Object.create(null);


o = {};
// is equivalent to:
o = Object.create(Object.prototype);


// Example where we create an object with a couple of sample properties.
// (Note that the second parameter maps keys to *property descriptors*.)
o = Object.create(Object.prototype, {
  // foo is a regular "value property"
  foo: { writable:true, configurable:true, value: "hello" },
  // bar is a getter-and-setter (accessor) property
  bar: {
    configurable: false,
    get: function() { return 10 },
    set: function(value) { console.log("Setting `o.bar` to", value) }
}})


function Constructor(){}
o = new Constructor();
// is equivalent to:
o = Object.create(Constructor.prototype);
// Of course, if there is actual initialization code in the Constructor function, the Object.create cannot reflect it


// create a new object whose prototype is a new, empty object
// and a adding single property 'p', with value 42
o = Object.create({}, { p: { value: 42 } })

// by default properties ARE NOT writable, enumerable or configurable:
o.p = 24
o.p
//42

o.q = 12
for (var prop in o) {
   console.log(prop)
}
//"q"

delete o.p
//false

//to specify an ES3 property
o2 = Object.create({}, { p: { value: 42, writable: true, enumerable: true, configurable: true } });
</pre>
<h2 id="Cross-browser_compatibility">Cross-browser compatibility</h2>
<p>Based on <a class="external" href="http://kangax.github.com/es5-compat-table/">Kangax's compat table</a>.</p>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Chrome</th>
        <th>Firefox (Gecko)</th>
        <th>Internet Explorer</th>
        <th>Opera</th>
        <th>Safari</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>5</td>
        <td>{{ CompatGeckoDesktop("2") }}</td>
        <td>9</td>
        <td>11.60</td>
        <td>5</td>
      </tr>
    </tbody>
  </table>
</div>
<div id="compat-mobile">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Firefox Mobile (Gecko)</th>
        <th>Android</th>
        <th>IE Mobile</th>
        <th>Opera Mobile</th>
        <th>Safari Mobile</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>{{ CompatGeckoDesktop("2") }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>11.50</td>
        <td>{{ CompatVersionUnknown() }}</td>
      </tr>
    </tbody>
  </table>
</div>
<h3 id="Polyfill">Polyfill</h3>
<pre class="brush: js">
if (!Object.create) {
    Object.create = function (o) {
        if (arguments.length &gt; 1) {
            throw new Error('Object.create implementation only accepts the first parameter.');
        }
        function F() {}
        F.prototype = o;
        return new F();
    };
}
</pre>
<p>This polyfill covers the main use case which is creating a new object for which the prototype has been chosen but doesn't take the second argument into account.</p>
<h2 id="See_also" name="See_also">See also</h2>
<ul>
  <li><code><a href="/en/JavaScript/Reference/Global_Objects/Object/defineProperty" title="en/Core JavaScript 1.5 Reference/Global Objects/Object/defineProperty">Object.defineProperty</a></code></li>
  <li><a class="internal" href="/en/JavaScript/Reference/Global_Objects/Object/defineProperties" title="en/Core JavaScript 1.5 Reference/Global Objects/Object/defineProperties">Object.defineProperties</a></li>
  <li><a class="internal" href="/en/JavaScript/Reference/Global_Objects/Object/isPrototypeOf" title="En/Core JavaScript 1.5 Reference/Global Objects/Object/IsPrototypeOf">Object.prototype.isPrototypeOf</a></li>
  <li>John&nbsp;Resig's post on <a class="external" href="http://ejohn.org/blog/objectgetprototypeof/" title="http://ejohn.org/blog/objectgetprototypeof/">getPrototypeOf</a></li>
</ul>
<p>{{ languages( {"zh-cn": "zh-cn/JavaScript/Reference/Global_Objects/Object/create" } ) }}</p>
Revert to this revision