path: root/files/es/web/javascript/reference/global_objects/object/create/index.html

---
title: Object.create()
slug: Web/JavaScript/Reference/Global_Objects/Object/create
tags:
  - ECMAScript5
  - JavaScript
  - 'Null'
  - Objeto
  - Referencia
  - metodo
  - polyfill
translation_of: Web/JavaScript/Reference/Global_Objects/Object/create
original_slug: Web/JavaScript/Referencia/Objetos_globales/Object/create
---
<div>{{JSRef}}</div>

<p>El método <code><strong>Object.create()</strong></code> crea un objeto nuevo, utilizando un objeto existente como el prototipo del nuevo objeto creado.</p>

<div>{{EmbedInteractiveExample("pages/js/object-create.html")}}</div>



<div>La fuente de este ejemplo interactivo se almacena en un repositorio de GitHub. Si desea contribuir al proyecto de ejemplos interactivos, clone https://github.com/mdn/interactive-examples y envíenos una solicitud de extracción (pull request).</div>

<h2 id="Sintaxis" name="Sintaxis">Sintaxis</h2>

<pre class="syntaxbox notranslate">Object.create(<var>proto</var>[, <var>propertiesObject</var>])</pre>

<h3 id="Parámetros" name="Parámetros">Parámetros</h3>

<dl>
 <dt><em>proto</em></dt>
 <dd>Objeto el cual debe ser el prototipo del nuevo objeto creado.</dd>
 <dt><em>propertiesObject</em></dt>
 <dd>Opcional. Si se especifica y no es {{jsxref("undefined")}}, un objeto cuyas propiedades enumerables propias (es decir, aquellas propiedades definidas sobre si mismo y <em>no</em> son propiedades enumerable a lo largo de su cadena de prototipos) espefica descriptores de propiedad para ser agregadas al objeto recien creado, con los nombres de propiedad correspondiente. Estas propiedades corresponden al segundo argumento de {{jsxref("Object.defineProperties")}}.</dd>
</dl>

<h3 id="Description" name="Description">Valor devuelto</h3>

<p>Un nuevo objeto con el prototipo y propiedades del objeto especificado.</p>

<h3 id="Excepciones">Excepciones</h3>

<p>Una excepción {{jsxref("TypeError")}} si el parámetro <code>propertiesObject</code> es {{jsxref("null")}} o un objeto envolvente no primitivo.</p>

<h2 id="Ejemplos" name="Ejemplos">Ejemplos</h2>

<h3 id="Herencia_clásica_con_Object.create">Herencia clásica con <code>Object.create()</code></h3>

<p>Debajo se encuentra un ejemplo de cómo usar <code>Object.create()</code> para lograr herencia clásica. Este es para herencia simple, la cual es todo lo que soporta JavaScript.</p>

<pre class="brush: js notranslate">// Shape - superclase
function Shape() {
  this.x = 0;
  this.y = 0;
}

// método de la superclase
Shape.prototype.move = function(x, y) {
    this.x += x;
    this.y += y;
    console.info("Shape moved.");
};

// Rectangle - subclase
function Rectangle() {
  Shape.call(this); // llama al contructor de la superclase.
}

// subclase extiende superclase
Rectangle.prototype = Object.create(Shape.prototype);
Rectangle.prototype.constructor = Rectangle;

var rect = new Rectangle();

console.log('¿Es rect una instancia de Rectangle?',
  rect instanceof Rectangle); // true
console.log('¿Es rect una instancia de Shape?',
  rect instanceof Shape); // true
rect.move(1, 1); // Imprime, 'Shape moved.'
</pre>

<p>Si desea heredar desde múltiples objetos, entonces los mixins son una posibilidad.</p>

<pre class="brush: js notranslate">function MyClass() {
  SuperClass.call(this);
  OtherSuperClass.call(this);
}

// inherit one class
MyClass.prototype = Object.create(SuperClass.prototype);
// mixin another
Object.assign(MyClass.prototype, OtherSuperClass.prototype);
// re-assign constructor
MyClass.prototype.constructor = MyClass;

MyClass.prototype.myMethod = function() {
  // do something
};
</pre>

<p>{{jsxref("Object.assign()")}} copia las propiedades del prototipo <em>OtherSuperClass</em> al prototipo de <em>MyClass</em>, haciéndolas disponibles en todas las instancias de <em>MyClass</em>. <code>Object.assign()</code> se introdujo con ES2015 y <a href="/es/docs/Web/JavaScript/Referencia/Objetos_globales/Object/assign#Polyfill">tiene polyfill</a>. Si el soporte para navegadores antiguos es necesario, se puede utilizar <code><a href="https://api.jquery.com/jQuery.extend/">jQuery.extend()</a></code> o <code><a href="https://lodash.com/docs/#assign">_.assign()</a></code>.</p>

<h3 id="Usando_el_argumento_propertiesObject_con_Object.create">Usando el argumento <code>propertiesObject</code> con <code>Object.create()</code></h3>

<pre class="brush: js notranslate">var o;

// crea un objeto con un prototipo como null
o = Object.create(null);


o = {};
// esto equivale a:
o = Object.create(Object.prototype);


// Ejemplo en donde creamos un objeto con un par de propiedades de ejemplo.
// (Note que el segundo parámetro mapea claves para los *descriptores de propiedad*.)
o = Object.create(Object.prototype, {
  // foo es un habitual "propiedad de valor"
  foo: { writable:true, configurable:true, value: "hello" },
  // bar es una propiedad getter-and-setter (de acceso)
  bar: {
    configurable: false,
    get: function() { return 10 },
    set: function(value) { console.log("Setting `o.bar` to", value) }
}});


function Constructor(){}
o = new Constructor();
// es equivalente a:
o = Object.create(Constructor.prototype);
// Por supuesto, si hay un código de inicialización en la
// función Constructor, el Object.create no puede reflejar esta.


// crear un nuevo objeto cuyo prototipo es un nuevo, objeto vacío
// y agregar una única propiedad 'p', con el valor 42
o = Object.create({}, { p: { value: 42 } })

// por defecto las propiedades NO SON editables, enumerables o configurables:
o.p = 24
o.p
// 42

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

delete o.p
// false

// <span style="font-size: 1rem;">para especificar una propiedad en ES3</span>

o2 = Object.create({}, { p: {
      value: 42,
      writable: true,
      enumerable: true,
      configurable: true }
});
</pre>

<h2 id="Objetos_personalizados_y_nulos">Objetos personalizados y nulos</h2>

<p>Un objeto nuevo creado de un objeto completamente personalizado (especialmente uno creado de un objeto nulo, que es básicamente un objeto personalizado sin miembros) puede comportarse de manera inesperada. Esto es especialmente cierto cuando se depura, ya que las funciones comunes  de conversión/detección de propiedad de objeto pueden generar errores, o simplemente perder información (especialmente si se atrapan excepciones de manera silenciosa que ignoran los errores). Por ejemplo, aquí hay dos objetos:</p>

<pre class="brush: js notranslate">oco = Object.create( {} );   // Crea un objeto normal
ocn = Object.create( null ); // Crea un objeto "null"

&gt; console.log(oco) // {} -- Parece normal
&gt; console.log(ocn) // {} -- Parece normal aquí también, hasta este momento

oco.p = 1; // Crea una propiedad simple en un objeto normal
ocn.p = 0; // Crea una propiedad simple en un objeto "null"

&gt; console.log(oco) // {p: 1} -- Todavía parece normal
&gt; console.log(ocn) // {p: 0} --Todavía parece normal aquí también. PERO ESPERA...
</pre>

<p>Como se muestra arriba, todo parece normal hasta ahora. Sin embargo, al intentar usar estos objetos, sus diferencias se hacen evidentes rápidamente:</p>

<pre class="brush: js notranslate">&gt; "oco is: " + oco // Muestra "ocn is: [object Object]"

&gt; "ocn is: " + ocn // Arroja error: Cannot convert object to primitive value
</pre>

<p>Probar solo algunas de las funciones incorporadas más básicas muestra la magnitud del problema más claramente:</p>

<pre class="brush: js notranslate">&gt; alert(oco) // Muestra: [object Object]
&gt; alert(ocn) // Arroja error: Cannot convert object to primitive value

&gt; oco.toString() // Muestra [object Object]
&gt; ocn.toString() // Arroja error: ocn.toString is not a function

&gt; oco.valueOf() // Muestra{}
&gt; ocn.valueOf() // Arroja error: ocn.valueOf is not a function

&gt; oco.hasOwnProperty("p") // Muestra "true"
&gt; ocn.hasOwnProperty("p") // Arroja error: ocn.hasOwnProperty is not a function

&gt; oco.constructor // Muestra "Object() { [native code] }"
&gt; ocn.constructor // Muestra "undefined"
</pre>

<p>Como se dijo, estas diferencias pueden hacer que la depuración e incluso problemas aparentemente simples se pierdan rápidamente. Por ejemplo:</p>

<p><em>Una función simple de depuración:</em></p>

<pre class="brush: js notranslate">// mostrar nombre de propiedad de nivel superior: pares de valores de un objeto dado
function ShowProperties( b ){
  for( var i in b ){  console.log( i + ": " + b[i] + "\n" )  }
}</pre>

<p><em>Resultados no tan simples: (especialmente si la captura silenciosa de errores había ocultado los mensajes de error)</em></p>

<pre class="brush: js notranslate">ob={}; ob.po=oco; ob.pn=ocn; // crear un objeto compuesto usando los objetos de prueba de arriba como valores de propiedad

&gt; ShowProperties( ob ) // Muestra propiedades de nivel superior
- po: [object Object]
- Error: Cannot convert object to primitive value

Tenga en cuenta que solo se muestra la primera propiedad.
</pre>

<p><em>(Pero si se crea el mismo objeto simplemente en un orden diferente, al menos en algunas implementaciones ...)</em></p>

<pre class="brush: js notranslate">ob={}; ob.pn=ocn; ob.po=oco; // cree el mismo objeto compuesto nuevamente, pero cree las mismas propiedades en un orden diferente

&gt; ShowProperties( ob ) // Muestra propiedades de nivel superior
- Error: Cannot convert object to primitive value

Tenga en cuenta que ninguna propiedad se muestra.</pre>

<p>Tenga en cuenta que un orden tan diferente puede surgir estáticamente a través de codificaciones fijas dispares, como aquí, pero también dinámicamente a través del orden en que se ejecutan dichas ramas de código de adición de propiedades en tiempo de ejecución, ya que depende de entradas y / o variables aleatorias. Por otra parte, el orden de iteración real no está garantizado, independientemente de cómo son agregados los miembros.</p>

<h4 id="Algunas_NO-soluciones">Algunas NO-soluciones</h4>

<p>A good solution for the missing object-methods is not immediately apparent.</p>

<p>Adding the missing object-method directly from the standard-object does NOT work:</p>

<pre class="brush: js notranslate">ocn = Object.create( null ); // create "null" object (same as before)

ocn.toString = Object.toString; // since new object lacks method then try assigning it directly from standard-object

<span style="">&gt; ocn.toString // shows "toString() { [native code] }" -- missing method seems to be there now</span>
&gt; ocn.toString == Object.toString // shows "true" -- method seems to be same as the standard object-method

&gt; ocn.toString() // error: Function.prototype.toString requires that 'this' be a Function
</pre>

<p><br>
 Adding the missing object-method directly to new object's "prototype" does not work either, since new object does not have a real prototype (which is really the cause of ALL these problems) and one cannot be <strong>directly</strong> added:</p>

<pre class="brush: js notranslate">ocn = Object.create( null ); // create "null" object (same as before)

ocn.prototype.toString = Object.toString; // Error: Cannot set property 'toString' of undefined

ocn.prototype = {};                       // try to create a prototype
ocn.prototype.toString = Object.toString; // since new object lacks method then try assigning it from standard-object  <span style="">

&gt; ocn.toString() // error: ocn.toString is not a function</span>
</pre>

<p><br>
 Adding the missing object-method by using the standard-object<strong> </strong>as new object's prototype does not work either:</p>

<pre class="brush: js notranslate">ocn = Object.create( null );        // create "null" object (same as before)
Object.setPrototypeOf(ocn, Object); // set new object's prototype to the standard-object

&gt; ocn.toString() // error: Function.prototype.toString requires that 'this' be a Function
</pre>

<h4 id="Algunas_soluciones_aceptables">Algunas soluciones aceptables</h4>

<p>Again, adding the missing object-method directly from the <strong>standard-object </strong>does NOT work. However, adding the <strong>generic</strong> method directly, DOES:</p>

<pre class="brush: js notranslate">ocn = Object.create( null ); // create "null" object (same as before)

ocn.toString = toString; // since new object lacks method then assign it directly from generic version

&gt; ocn.toString() // shows "[object Object]"
&gt; "ocn is: " + ocn // shows "ocn is: [object Object]"


ob={}; ob.pn=ocn; ob.po=oco; // create a compound object (same as before)

&gt; ShowProperties(ob) // display top-level properties
- po: [object Object]
- pn: [object Object]
</pre>

<p>However, setting the generic <strong>prototype</strong> as the new object's prototype works even better:</p>

<pre class="brush: js notranslate">ocn = Object.create( null );                  // create "null" object (same as before)
Object.setPrototypeOf(ocn, Object.prototype); // set new object's prototype to the "generic" object (NOT standard-object)
</pre>

<p><em>(In addition to all the string-related functions shown above, this also adds:)</em></p>

<pre class="brush: js notranslate">&gt; ocn.valueOf() // shows {}
&gt; ocn.hasOwnProperty("x") // shows "false"
&gt; ocn.constructor // shows "Object() { [native code] }"

// ...and all the rest of the properties and methods of Object.prototype.
</pre>

<p>As shown, objects modified this way now look very much like ordinary objects.</p>

<h2 id="Polyfill">Polyfill</h2>

<p>Este polyfill cubre el caso de uso principal  el cual es la creación de un nuevo objeto para el prototipo que ha sido escogido pero no toma el segundo argumento en cuenta.</p>

<p>Note that while the setting of <code>null</code> as <code>[[Prototype]]</code> is supported in the real ES5 <code>Object.create</code>, this polyfill cannot support it due to a limitation inherent in versions of ECMAScript lower than 5.</p>

<pre class="brush: js notranslate"> if (typeof Object.create !== "function") {
    Object.create = function (proto, propertiesObject) {
        if (typeof proto !== 'object' &amp;&amp; typeof proto !== 'function') {
            throw new TypeError('Object prototype may only be an Object: ' + proto);
        } else if (proto === null) {
            throw new Error("This browser's implementation of Object.create is a shim and doesn't support 'null' as the first argument.");
        }

        if (typeof propertiesObject != 'undefined') {
            throw new Error("This browser's implementation of Object.create is a shim and doesn't support a second argument.");
        }

        function F() {}
        F.prototype = proto;

        return new F();
    };
}
</pre>

<h2 id="Especificaciones">Especificaciones</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Especificación</th>
   <th scope="col">Estado</th>
   <th scope="col">Comentario</th>
  </tr>
  <tr>
   <td>{{SpecName('ES5.1', '#sec-15.2.3.5', 'Object.create')}}</td>
   <td>{{Spec2('ES5.1')}}</td>
   <td>Definición inicial. Implementado en JavaScript 1.8.5</td>
  </tr>
  <tr>
   <td>{{SpecName('ES6', '#sec-object.create', 'Object.create')}}</td>
   <td>{{Spec2('ES2015')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName('ESDraft', '#sec-object.create', 'Object.create')}}</td>
   <td>{{Spec2('ESDraft')}}</td>
   <td></td>
  </tr>
 </tbody>
</table>

<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>

<div>{{Compat("javascript.builtins.Object.create")}}</div>

<h2 id="Ver_tambien" name="Ver_tambien">Ver también</h2>

<ul>
 <li>{{jsxref("Object.defineProperty")}}</li>
 <li>{{jsxref("Object.defineProperties")}}</li>
 <li>{{jsxref("Object.prototype.isPrototypeOf")}}</li>
 <li>{{jsxref("Reflect.construct()")}}</li>
 <li>Publicación de John Resig sobre <a class="external" href="http://ejohn.org/blog/objectgetprototypeof/">getPrototypeOf()</a></li>
</ul>