JavaScript toma el control de las nuevas

Cómo comenzar rápidamente con VUE3.0: ingrese al

prefacio

¿Qué hay new ?

El new operador crea una instancia de un tipo de objeto definido por el usuario o uno de los tipos de objetos integrados que tiene un constructor.

Todavía es un poco oscuro con solo mirar la definición. Veamos un ejemplo específico para comprender la función de new en JavaScript .

Por ejemplo

// No puedes perder peso en la vida real, pero debes mantenerte delgado en línea function Thin_User(nombre, edad) {
    this.nombre = nombre;
    this.age = edad;
}

Thin_User.prototype.eatToMuch = función () {
    // Sueña despierto y deja lágrimas gordas console.log('¡¡¡Como mucho, pero estoy muy delgada!!!');
}

Thin_User.prototype.isThin = verdadero;

const xiaobao = nuevo Thin_User('zcxiaobao', 18);
console.log(xiaobao.nombre); // zcxiaobao
console.log(xiaobao.edad); // 18
console.log(xiaobao.isThin); // verdadero
// como mucho, pero estoy muy delgada!!!
xiaobao.eatToMuch();

A través del ejemplo anterior, podemos encontrar xiaobao puede:

• acceder a las propiedades en el constructor Thin_User
• acceder a las propiedades en Thin_User.prototype

y describirlo de manera más sencilla, new hace estas cosas:

• crea un objeto vacío, El __proto__->Thin_User.prototype del objeto
• ejecuta el constructor y this apunta al nuevo objeto
• para devolver el nuevo objeto.

Instrucciones complementarias:

dado que new es una palabra clave, no podemos anularla como el método de alto orden para simular matrices, por lo que escribimos. una función createObject para simular new efecto. El uso es el siguiente:

función Thin_User(nombre, edad) {}

constante u1 = nuevo usuario_delgado(...)
const u2 = createObject(Thin_User, ...a)

Simulación preliminar

Según el análisis anterior, los pasos generales para escribir createObject son:

• Crear un nuevo objeto obj
• y configurar obj.__proto__->constructor.prototype ( pero JavaScript no lo recomienda modificando directamente los atributos __proto__, se proporciona el método setPrototypeOf para modificar específicamente el prototipo )
• Utilice constructor.call/apply(obj, ...) para agregar atributos a obj y
• devolver obj

__proto__和prototype . Puede consultar JavaScript para comprender completamente. Prototipos y cadenas de prototipos.
call/apply , puedes ver el tutorial de JavaScript en call and apply.

Después de aprenderlos, podemos escribir la primera versión del código:

function createObject(Con) {.
    //Crear nuevo objeto obj
    // var obj = {}; también puede ser var obj = Object.create(null);

    // Convertir obj.__proto__ -> constructor prototipo // (no recomendado) obj.__proto__ = Con.prototype
    Object.setPrototypeOf(obj, Con.prototype);

    //Ejecutar el constructor Con.apply(obj, [].slice.call(arguments, 1));

    // Devuelve un nuevo objeto return obj;}

Efecto del valor de retorno

Como todos sabemos, las funciones tienen valores de retorno, por lo que si el constructor tiene un valor de retorno, ¿cuál es el resultado devuelto después de la ejecución final de new ?

El valor de retorno es un tipo básico.

Suponiendo que el valor de retorno del constructor es un tipo básico, echemos un vistazo al resultado final:

función Thin_User (nombre, edad) {
    this.nombre = nombre;
    this.age = edad;
    devolver 'me mantendré delgado para siempre';
}

Thin_User.prototype.eatToMuch = función () {
    console.log('¡¡¡Como mucho, pero estoy muy delgada!!!');
}

Thin_User.prototype.isThin = verdadero;

const xiaobao = nuevo Thin_User('zcxiaobao', 18);
console.log(xiaobao.nombre); // zcxiaobao
console.log(xiaobao.edad); // 18
console.log(xiaobao.isThin); // verdadero
// como mucho, pero estoy muy delgada!!!
xiaobao.eatToMuch();

El resultado final devuelto parece estar sujeto a alguna interferencia. ¿No procesa el constructor el valor de retorno?

No se preocupe, sigamos probando la situación en la que el valor de retorno es un objeto.

El valor de retorno es la

función del objeto Thin_User(nombre, edad) {
    this.nombre = nombre;
    this.age = edad;
    devolver {
        nombre: nombre,
        edad: edad * 10,
        gordo: cierto
    }
}

Thin_User.prototype.eatToMuch = función () {
    // Sueña despierto y deja lágrimas gordas console.log('¡¡¡Como mucho, pero estoy muy delgada!!!');
}

Thin_User.prototype.isThin = verdadero;

const xiaobao = nuevo Thin_User('zcxiaobao', 18);
// Error: xiaobao.eatToMuch no es una función
xiaobao.eatToMuch();

Cuando ejecuté eatToMuch , la consola informó un error directamente y no había ninguna función actual, así que imprimí el objeto xiaobao :

Se descubrió que age del objeto xiaobao ha cambiado y se ha agregado fat , que es exactamente el mismo que el valor de retorno del constructor.

Después de leer estos dos ejemplos, básicamente podemos aclarar la situación cuando el constructor devuelve un valor: cuando el constructor devuelve un objeto, el objeto se devuelve directamente.

de simulación final

createObject(Con) {
    //Crear nuevo objeto obj
    // var obj = {}; también puede ser var obj = Object.create(null);

    // Convertir obj.__proto__ -> constructor prototipo // (no recomendado) obj.__proto__ = Con.prototype
    Object.setPrototypeOf(obj, Con.prototype);

    // Ejecuta el constructor y acepta el valor de retorno del constructor const ret = Con.apply(obj, [].slice.call(arguments, 1));

    // Si el valor de retorno del constructor es un objeto, devuelve el objeto directamente // De lo contrario, devuelve obj
    tipo de retorno de (ret) === 'objeto'?