JavaScript prend le contrôle du nouveau

Comment démarrer rapidement avec VUE3.0 : Entrez dans la

préface

Quoi de new ?

L'opérateur new crée une instance d'un type d'objet défini par l'utilisateur ou de l'un des types d'objet intégrés dotés d'un constructeur.

C'est encore un peu obscur rien qu'en regardant la définition. Regardons un exemple spécifique pour comprendre la fonction de new en JavaScript .

Par exemple

// Vous ne pouvez pas perdre de poids dans la vraie vie, mais vous devez rester mince en ligne function Thin_User(name, age) {
    this.name = nom ;
    this.age = âge;
}

Thin_User.prototype.eatToMuch = fonction () {
    // Rêver et laisser de grosses larmes console.log('je mange tellement, mais je suis très maigre !!!');
}

Thin_User.prototype.isThin = true ;

const xiaobao = new Thin_User('zcxiaobao', 18);
console.log(xiaobao.name); // zcxiaobao
console.log(xiaobao.age); // 18
console.log(xiaobao.isThin); // vrai
// je mange tellement, mais je suis très maigre !!!
xiaobao.eatToMuch();

Grâce à l'exemple ci-dessus, nous pouvons constater xiaobao peut :

• accéder aux propriétés du constructeur Thin_User
• accéder aux propriétés de Thin_User.prototype

et le décrire plus simplement, new fait ces choses :

• crée un objet vide, Le __proto__->Thin_User.prototype de l'objet
• exécute le constructeur et this pointe vers le nouvel objet
• pour renvoyer le nouvel objet.

Instructions supplémentaires :

Puisque new est un mot-clé, nous ne pouvons pas le remplacer comme la méthode d'ordre supérieur de simulation de tableaux, nous écrivons donc. une fonction createObject pour simuler new effet. L'utilisation est la suivante :

function Thin_User(name, age) {}

const u1 = nouveau Thin_user(...)
const u2 = createObject(Thin_User, ...a)

Simulation préliminaire

Selon l'analyse ci-dessus, les étapes générales pour écrire createObject sont :

• Créer un nouvel objet obj
• et définir obj.__proto__->constructor.prototype ( mais JavaScript ne recommande pas Modification directe __proto__ Les attributs sont fournis avec la méthode setPrototypeOf pour modifier spécifiquement le prototype )
• Utilisez constructor.call/apply(obj, ...) pour ajouter des attributs à obj et
• renvoyer obj

__proto__和prototype . prototypes et chaînes de prototypes.
call/apply , vous pouvez voir le tutoriel JavaScript sur call et apply

Après les avoir appris, nous pouvons écrire la première version du code :

function createObject(Con) {.
    //Créer un nouvel objet obj
    // var obj = {}; peut aussi être var obj = Object.create(null);

    // Convertir obj.__proto__ -> prototype constructeur // (non recommandé) obj.__proto__ = Con.prototype
    Object.setPrototypeOf(obj, Con.prototype);

    //Exécuter le constructeur Con.apply(obj, [].slice.call(arguments, 1));

    // Renvoie un nouvel objet return obj;}

Effet de la valeur de retour

Comme nous le savons tous, les fonctions ont des valeurs de retour, donc si le constructeur a une valeur de retour, quel est le résultat renvoyé après l'exécution finale de new ?

La valeur de retour est un type de base.

En supposant que la valeur de retour du constructeur est un type de base, examinons le résultat final renvoyé :

function Thin_User(name, age) {
    this.name = nom ;
    this.age = âge;
    return 'je resterai mince pour toujours';
}

Thin_User.prototype.eatToMuch = fonction () {
    console.log('je mange tellement, mais je suis très maigre !!!');
}

Thin_User.prototype.isThin = true ;

const xiaobao = new Thin_User('zcxiaobao', 18);
console.log(xiaobao.name); // zcxiaobao
console.log(xiaobao.age); // 18
console.log(xiaobao.isThin); // vrai
// je mange tellement, mais je suis très maigre !!!
xiaobao.eatToMuch();

Le résultat final du retour semble être soumis à une quelconque interférence. Le constructeur ne traite-t-il pas la valeur de retour ?

Ne vous inquiétez pas, continuons à tester la situation où la valeur de retour est un objet.

La valeur de retour est la

fonction objet Thin_User(name, age) {
    this.name = nom ;
    this.age = âge;
    retour {
        nom : nom,
        âge: âge * 10,
        gras : vrai
    }
}

Thin_User.prototype.eatToMuch = fonction () {
    // Rêver et laisser de grosses larmes console.log('je mange tellement, mais je suis très maigre !!!');
}

Thin_User.prototype.isThin = true ;

const xiaobao = new Thin_User('zcxiaobao', 18);
// Erreur : xiaobao.eatToMuch n'est pas une fonction
xiaobao.eatToMuch();

Lorsque j'ai exécuté eatToMuch , la console a signalé une erreur directement et il n'y avait aucune fonction actuelle, j'ai donc imprimé l'objet xiaobao :

Il a été constaté que age de l'objet xiaobao a changé et que fat a été ajouté, qui est exactement le même que la valeur de retour du constructeur.

Après avoir lu ces deux exemples, vous pouvez en gros clarifier la situation lorsque le constructeur renvoie une valeur : lorsque le constructeur renvoie un objet, l'objet est renvoyé directement.

de simulation finale

createObject(Con) {
    //Créer un nouvel objet obj
    // var obj = {}; peut aussi être var obj = Object.create(null);

    // Convertir obj.__proto__ -> prototype constructeur // (non recommandé) obj.__proto__ = Con.prototype
    Object.setPrototypeOf(obj, Con.prototype);

    //Exécuter le constructeur et accepter la valeur de retour du constructeur const ret = Con.apply(obj, [].slice.call(arguments, 1));

    // Si la valeur de retour du constructeur est un objet, renvoie l'objet directement // Sinon, renvoie obj
    return typeof(ret) === 'objet' ?