Profundo conocimiento del nuevo operador.

En JavaScript, el nuevo operador crea una instancia de un tipo de objeto definido por el usuario o una instancia de un objeto incorporado con un constructor. Crear un objeto es simple, ¿por qué tenemos que usar el nuevo operador de una sola vez? ¿Qué tipo de magia es?

Conoce al nuevo operador

Use el siguiente ejemplo para comprender el nuevo operador:

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

Person.prototype.getName = function () {
  console.log(this.name)
}

var joe = new Person('joe')

joe.sayHello = function () {
  console.log('Hello!')
}

joe.getName() // joe
joe.sayHello() // Hello!

Person.sayHello() // Uncaught TypeError: Person.sayHello is not a function

Person es una función ordinaria, y cuando se usa con el nuevo operador, Person es un constructor. El nuevo objeto joe obtenido por la nueva Persona ('joe') hereda las propiedades de la Persona y, al mismo tiempo, esto también apunta a la instancia de joe. El atributo sayHello agregado para joe no afecta a Person, es decir, joe es un nuevo objeto que lo distingue de Person.

Por lo tanto, se establece una cadena de prototipo entre el objeto de instancia creado por new y el constructor, y el objeto de instancia tiene la capacidad de heredar propiedades a través de la cadena de prototipo .

El principio y la implementación de nuevos

A través del análisis anterior, el nuevo operador realiza las siguientes cuatro operaciones internamente:

• Cree un objeto JavaScript simple y vacío (es decir, {});
• Enlace el nuevo objeto (es decir, establezca el constructor del nuevo objeto) al objeto de función;
• Use el objeto recién creado como contexto de esto;
• Si la función no devuelve un objeto, devuelve el objeto recién creado.

La implementación de nuevo es la siguiente:

function newOperator (ctor, ...args) {
  var obj = {};
  obj.__proto__ = ctor.prototype
  var res = ctor.apply(obj, args)
  return res || obj;
}

Optimizar el código:

function newOperator (ctor, ...args) {
  var o = Object.create(ctor.prototype) // 合并第一和第二步：创建一个空的简单 JavaScript 对象（即{}），链接新对象（即设置该新对象的构造函数）到函数对象
  return fn.apply(o, args) || o
}

Use la función newOperator para probar el ejemplo de persona anterior:

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

Person.prototype.getName = function () {
  console.log(this.name)
}

var joe = newOperator(Person, 'joe')

joe.sayHello = function () {
  console.log('Hello!')
}

joe.getName() // joe
joe.sayHello() // Hello!

Person.sayHello() // Uncaught TypeError: Person.sayHello is not a function

Los resultados son consistentes.

Una mejor manera de verificar es:

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

console.log(new Person('joe')) // @1
console.log(newOperator(Person, 'joe')) // @2

La información de visualización de @ 1 y @ 2 en la consola es exactamente la misma.