¿Cuál es la palabra clave 'nueva' en JavaScript?

La newpalabra clave en JavaScript puede ser bastante confusa cuando se encuentra por primera vez, ya que las personas tienden a pensar que JavaScript no es un lenguaje de programación orientado a objetos.

• ¿Qué es?
• ¿Qué problemas resuelve?
• ¿Cuándo es apropiado y cuándo no?

Hace 5 cosas:

1. Crea un nuevo objeto. El tipo de este objeto es simplemente objeto .
2. Establece la propiedad interna, inaccesible, [[prototipo]] (es decir, __proto__ ) de este nuevo objeto para que sea el objeto prototipo externo, accesible y accesible de la función constructora (cada objeto de función tiene automáticamente una propiedad prototipo ).
3. Hace que la thisvariable apunte al objeto recién creado.
4. Ejecuta la función constructora, utilizando el objeto recién creado cada vez que thisse menciona.
5. Devuelve el objeto recién creado, a menos que la función constructora devuelva una nullreferencia que no sea de objeto. En este caso, se devuelve esa referencia de objeto en su lugar.

Nota: la función constructora se refiere a la función después de la newpalabra clave, como en

new ConstructorFunction(arg1, arg2)

Una vez hecho esto, si se solicita una propiedad indefinida del nuevo objeto, el script verificará el objeto [[prototipo]] del objeto en su lugar. Así es como puede obtener algo similar a la herencia de clase tradicional en JavaScript.

La parte más difícil de esto es el punto número 2. Cada objeto (incluidas las funciones) tiene esta propiedad interna llamada [[prototipo]] . Puede solamente puede establecer en tiempo de creación de objeto, ya sea con nuevo , con Object.create , o basado en el literal (funciones predeterminada para Function.prototype, números a Number.prototype, etc.). Solo se puede leer con Object.getPrototypeOf (someObject) . No hay otra forma de establecer o leer este valor.

Las funciones, además de la propiedad oculta [[prototipo]] , también tienen una propiedad llamada prototipo , y es esto a lo que puede acceder y modificar para proporcionar propiedades y métodos heredados para los objetos que crea.

Aquí hay un ejemplo:

ObjMaker = function() {this.a = 'first';};
// ObjMaker is just a function, there's nothing special about it that makes 
// it a constructor.

ObjMaker.prototype.b = 'second';
// like all functions, ObjMaker has an accessible prototype property that 
// we can alter. I just added a property called 'b' to it. Like 
// all objects, ObjMaker also has an inaccessible [[prototype]] property
// that we can't do anything with

obj1 = new ObjMaker();
// 3 things just happened.
// A new, empty object was created called obj1.  At first obj1 was the same
// as {}. The [[prototype]] property of obj1 was then set to the current
// object value of the ObjMaker.prototype (if ObjMaker.prototype is later
// assigned a new object value, obj1's [[prototype]] will not change, but you
// can alter the properties of ObjMaker.prototype to add to both the
// prototype and [[prototype]]). The ObjMaker function was executed, with
// obj1 in place of this... so obj1.a was set to 'first'.

obj1.a;
// returns 'first'
obj1.b;
// obj1 doesn't have a property called 'b', so JavaScript checks 
// its [[prototype]]. Its [[prototype]] is the same as ObjMaker.prototype
// ObjMaker.prototype has a property called 'b' with value 'second'
// returns 'second'

Es como la herencia de clases porque ahora, cualquier objeto que hagas usando new ObjMaker()también parecerá haber heredado la propiedad 'b'.

Si quieres algo como una subclase, entonces haz esto:

SubObjMaker = function () {};
SubObjMaker.prototype = new ObjMaker(); // note: this pattern is deprecated!
// Because we used 'new', the [[prototype]] property of SubObjMaker.prototype
// is now set to the object value of ObjMaker.prototype.
// The modern way to do this is with Object.create(), which was added in ECMAScript 5:
// SubObjMaker.prototype = Object.create(ObjMaker.prototype);

SubObjMaker.prototype.c = 'third';  
obj2 = new SubObjMaker();
// [[prototype]] property of obj2 is now set to SubObjMaker.prototype
// Remember that the [[prototype]] property of SubObjMaker.prototype
// is ObjMaker.prototype. So now obj2 has a prototype chain!
// obj2 ---> SubObjMaker.prototype ---> ObjMaker.prototype

obj2.c;
// returns 'third', from SubObjMaker.prototype

obj2.b;
// returns 'second', from ObjMaker.prototype

obj2.a;
// returns 'first', from SubObjMaker.prototype, because SubObjMaker.prototype 
// was created with the ObjMaker function, which assigned a for us

Leí un montón de basura sobre este tema antes de finalmente encontrar esta página , donde esto se explica muy bien con buenos diagramas.

Supongamos que tiene esta función:

var Foo = function(){
  this.A = 1;
  this.B = 2;
};

Si llama a esto como una función independiente de esta manera:

Foo();

La ejecución de esta función agregará dos propiedades al windowobjeto ( Ay B). Lo agrega al windowporque windowes el objeto que llamó a la función cuando lo ejecuta así, y thisen una función está el objeto que llamó a la función. En Javascript al menos.

Ahora, llámalo así con new:

var bar = new Foo();

Lo que sucede cuando agrega newa una llamada de función es que se crea un nuevo objeto (solo var bar = new Object()) y que thisdentro de la función apunta al nuevo Objectque acaba de crear, en lugar de al objeto que llamó a la función. Entonces, barahora es un objeto con las propiedades Ay B. Cualquier función puede ser un constructor, simplemente no siempre tiene sentido.

Además de la respuesta de Daniel Howard, esto es lo que newhace (o al menos parece hacer):

function New(func) {
    var res = {};
    if (func.prototype !== null) {
        res.__proto__ = func.prototype;
    }
    var ret = func.apply(res, Array.prototype.slice.call(arguments, 1));
    if ((typeof ret === "object" || typeof ret === "function") && ret !== null) {
        return ret;
    }
    return res;
}

Mientras

var obj = New(A, 1, 2);

es equivalente a

var obj = new A(1, 2);

Para que los principiantes lo entiendan mejor

pruebe el siguiente código en la consola del navegador.

function Foo() { 
    return this; 
}

var a = Foo();       //returns window object
var b = new Foo();   //returns empty object of foo

a instanceof Window;  // true
a instanceof Foo;     // false

b instanceof Window;  // false
b instanceof Foo;     // true

Ahora puedes leer la respuesta wiki de la comunidad :)

así que probablemente no sea para crear instancias de objetos

Se usa exactamente para eso. Define un constructor de funciones así:

function Person(name) {
    this.name = name;
}

var john = new Person('John');

Sin embargo, el beneficio adicional que tiene ECMAScript es que puede ampliar con la .prototypepropiedad, para que podamos hacer algo como ...

Person.prototype.getName = function() { return this.name; }

Todos los objetos creados a partir de este constructor ahora tendrán un getNamedebido a la cadena de prototipo a la que tienen acceso.

JavaScript es un lenguaje de programación orientado a objetos y se usa exactamente para crear instancias. Está basado en prototipos, más que en clases, pero eso no significa que no esté orientado a objetos.

Javascript es un lenguaje de programación dinámico que admite el paradigma de programación orientado a objetos, y se utiliza para crear nuevas instancias de objetos.

Las clases no son necesarias para los objetos: Javascript es un lenguaje basado en prototipos .

Ya hay algunas respuestas muy buenas, pero estoy publicando una nueva para enfatizar mi observación en el caso III a continuación sobre lo que sucede cuando tiene una declaración de retorno explícita en una función que está newactivando. Echa un vistazo a los siguientes casos:

Caso I :

var Foo = function(){
  this.A = 1; 
  this.B = 2;
};
console.log(Foo()); //prints undefined
console.log(window.A); //prints 1

Arriba hay un caso simple de llamar a la función anónima señalada por Foo. Cuando llama a esta función, vuelve undefined. Como no hay una declaración de retorno explícita, el intérprete de JavaScript inserta con fuerza una return undefined;declaración al final de la función. Aquí ventana es el objeto de invocación (contextual this) que obtiene nueva Ay Bpropiedades.

Caso II :

var Foo = function(){
  this.A = 1;
  this.B = 2;
};
var bar = new Foo();
console.log(bar()); //illegal isn't pointing to a function but an object
console.log(bar.A); //prints 1

Aquí, el intérprete de JavaScript que ve la newpalabra clave crea un nuevo objeto que actúa como el objeto de invocación (contextual this) de la función anónima señalada por Foo. En este caso Ay Bpropiedades convertido en el objeto recién creado (en lugar del objeto de la ventana). Como no tiene ninguna declaración de retorno explícita, el intérprete de JavaScript inserta a la fuerza una declaración de retorno para devolver el nuevo objeto creado debido al uso de la newpalabra clave.

Caso III :

var Foo = function(){
  this.A = 1;
  this.B = 2;
  return {C:20,D:30}; 
};
var bar = new Foo();
console.log(bar.C);//prints 20
console.log(bar.A); //prints undefined. bar is not pointing to the object which got created due to new keyword.

Aquí nuevamente el intérprete de JavaScript al ver la newpalabra clave crea un nuevo objeto que actúa como el objeto de invocación (contextual this) de la función anónima señalada por Foo. Nuevamente, Ay Bconviértase en propiedades en el objeto recién creado. Pero esta vez tiene una declaración de retorno explícita, por lo que el intérprete de JavaScript no hará nada por sí mismo.

Lo que hay que tener en cuenta en el caso III es que el objeto que se está creando debido a la newpalabra clave se perdió de su radar. baren realidad apunta a un objeto completamente diferente que no es el que el intérprete de JavaScript creó debido a la newpalabra clave.

Citando a David Flanagan de JavaScripit: The Definitive Guide (6th Edition), cap. 4, página # 62:

Cuando se evalúa una expresión de creación de objeto, JavaScript primero crea un nuevo objeto vacío, como el creado por el inicializador de objeto {}. A continuación, invoca la función especificada con los argumentos especificados, pasando el nuevo objeto como el valor de esta palabra clave. La función puede usar esto para inicializar las propiedades del objeto recién creado. Las funciones escritas para su uso como constructores no devuelven un valor, y el valor de la expresión de creación del objeto es el objeto recién creado e inicializado. Si un constructor devuelve un valor de objeto, ese valor se convierte en el valor de la expresión de creación del objeto y el objeto recién creado se descarta.

--- Información adicional ---

Las funciones utilizadas en el fragmento de código de los casos anteriores tienen nombres especiales en el mundo JS de la siguiente manera:

Caso I y II - Función de constructor

Caso III - Función de fábrica. Las funciones de fábrica no deben usarse con la newpalabra clave que he hecho para explicar el concepto en el hilo actual.

Puedes leer sobre la diferencia entre ellos en este hilo.

a veces el código es más fácil que las palabras:

var func1 = function (x) { this.x = x; }                    // used with 'new' only
var func2 = function (x) { var z={}; z.x = x; return z; }   // used both ways
func1.prototype.y = 11;
func2.prototype.y = 12;

A1 = new func1(1);      // has A1.x  AND  A1.y
A2 =     func1(1);      // undefined ('this' refers to 'window')
B1 = new func2(2);      // has B1.x  ONLY
B2 =     func2(2);      // has B2.x  ONLY

Para mí, siempre que no prototipo, uso el estilo de func2, ya que me da un poco más de flexibilidad dentro y fuera de la función.

La newpalabra clave cambia el contexto en el que se ejecuta la función y devuelve un puntero a ese contexto.

Cuando no usa la newpalabra clave, el contexto en el que se Vehicle()ejecuta la función es el mismo contexto desde el que está llamando a la Vehiclefunción. La thispalabra clave se referirá al mismo contexto. Cuando lo usa new Vehicle(), se crea un nuevo contexto para que la palabra clave thisdentro de la función se refiera al nuevo contexto. Lo que obtienes a cambio es el contexto recién creado.

La newpalabra clave es para crear nuevas instancias de objeto. Y sí, JavaScript es un lenguaje de programación dinámico, que admite el paradigma de programación orientado a objetos. La convención sobre la denominación de objetos es, siempre use letras mayúsculas para los objetos que se supone que deben ser instanciados por la nueva palabra clave.

obj = new Element();

Resumen:

La newpalabra clave se usa en JavaScript para crear un objeto a partir de una función constructora. La newpalabra clave debe colocarse antes de la llamada a la función del constructor y hará lo siguiente:

1. Crea un nuevo objeto.
2. Establece el prototipo de este objeto en la propiedad prototipo de la función constructora.
3. Vincula la thispalabra clave al objeto recién creado y ejecuta la función constructora
4. Devuelve el objeto recién creado

Ejemplo:

function Dog (age) {
  this.age = age;
}

const doggie = new Dog(12);

console.log(doggie);
console.log(doggie.__proto__ === Dog.prototype) // true

Qué sucede exactamente:

1. const doggie dice: Necesitamos memoria para declarar una variable.
2. El operador de asignación =dice: Vamos a inicializar esta variable con la expresión después de=
3. La expresión es new Dog(12). El motor JS ve la nueva palabra clave, crea un nuevo objeto y establece el prototipo en Dog.prototype
4. La función constructora se ejecuta con el thisvalor establecido para el nuevo objeto. En este paso es donde se asigna la edad al nuevo objeto perrito creado.
5. El objeto recién creado se devuelve y se asigna a la variable doggie.

La newpalabra clave crea instancias de objetos utilizando funciones como constructor. Por ejemplo:

var Foo = function() {};
Foo.prototype.bar = 'bar';

var foo = new Foo();
foo instanceof Foo; // true

Las instancias heredan de la prototypefunción constructora. Entonces, dado el ejemplo anterior ...

foo.bar; // 'bar'

Bueno, JavaScript per si puede diferir mucho de una plataforma a otra, ya que siempre es una implementación de la especificación original EcmaScript.

En cualquier caso, independientemente de la implementación, todas las implementaciones de JavaScript que sigan la especificación EcmaScript correcta le proporcionarán un lenguaje orientado a objetos. De acuerdo con el estándar ES:

ECMAScript es un lenguaje de programación orientado a objetos para realizar cálculos y manipular objetos computacionales dentro de un entorno host.

Entonces, ahora que hemos acordado que JavaScript es una implementación de EcmaScript y, por lo tanto, es un lenguaje orientado a objetos. La definición de la newoperación en cualquier lenguaje orientado a objetos, dice que dicha palabra clave se utiliza para crear una instancia de objeto de una clase de cierto tipo (incluidos los tipos anónimos, en casos como C #).

En EcmaScript no usamos clases, como puede leer en las especificaciones:

ECMAScript no utiliza clases como las de C ++, Smalltalk o Java. En cambio, los objetos se pueden crear de varias maneras, incluso a través de una notación literal o mediante constructores que crean objetos y luego ejecutan código que inicializa todos o parte de ellos mediante la asignación de valores iniciales a sus propiedades. Cada constructor es una función que tiene una propiedad llamada - prototipo ‖ que se usa para implementar la herencia basada en prototipos y las propiedades compartidas. Los objetos se crean
utilizando constructores en nuevas expresiones; por ejemplo, nueva Fecha (2009,11) crea un nuevo objeto Fecha. Invocar un constructor sin usar nuevo tiene consecuencias que dependen del constructor. Por ejemplo, Date () produce una representación de cadena de la fecha y hora actuales en lugar de un objeto.