js encapsule la fonction _new et comment implémenter le nouveau mot-clé (avec test de code)

Le contenu de cet article concerne l'encapsulation js de la fonction _new et la méthode d'implémentation d'un nouveau mot-clé (avec test de code). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. . a aidé.

1. Introduction

Comme nous le savons tous : que dois-je faire si je n’ai pas d’objet ? Alors achetez-en un nouveau !

Donc, en JS, lorsque nous renouvelons un objet, que fait le nouveau mot-clé à l'intérieur ?
Analysons maintenant le principe de fonctionnement interne du nouveau mot-clé en JS natif.

2. Original neuf

Tout d'abord, jetons un coup d'œil à un nouvel objet :

//创建Person构造函数，参数为name,age
function Person(name,age){
　　this.name = name;
　　this.age = age;
　}
//实例化对象小明
xm = new Person('xiaoming',18);
//打印实例化出来的对象小明
console.log(xm);

Résultats de l'impression :

Comme vous pouvez le voir dans les résultats de l'impression :

Lors de l'instanciation d'un objet avec le nouveau Mot-clé , a d'abord créé un objet vide xm, et cet objet vide contient deux attributs name et age, qui correspondent respectivement aux deux attributs du constructeur. Deuxièmement, nous pouvons également savoir que l'objet instancié xm est hérité de Person.prototype, donc. nous pouvons maintenant résumer ce que fait le mot-clé new en interne lors de l'instanciation d'un objet. En fait, le mot-clé new fait les trois choses suivantes en interne (le constructeur connu est Func) :

1. Créer un vide. object et faites en sorte que l'objet vide hérite de Func.prototype;

2. Exécutez le constructeur et pointez-le vers le nouvel objet que vous venez de créer

3. Renvoyer un ; new object;

3. Encapsulation_new function

Quand on connaît le principe interne du new mot-clé Ensuite, on peut encapsuler une _new function donc qu'il peut être utilisé pour la même fonction que le mot-clé new. La fonction

_new doit transmettre les paramètres suivants :
Le premier paramètre : le nom de la fonction constructeur Func
Le deuxième paramètre et les paramètres suivants : les paramètres du constructeur

function _new(){
　　//1.拿到传入的参数中的第一个参数，即构造函数名Func
　 var Func = [].shift.call(arguments);
　　//2.创建一个空对象obj,并让其继承Func.prototype
　　var obj = Object.create(Func.prototype);
　　//3.执行构造函数，并将this指向创建的空对象obj
　　Func.apply(obj,arguments)
　　//4.返回创建的对象obj
　　return obj
}

4. Testons la fonction _new

Après l'encapsulation, testons la fonction _new encapsulée et voyons si elle implémente la même chose. fonctionner comme le nouveau mot-clé natif.

//创建Person构造函数，参数为name,age
function Person(name,age){
　　this.name = name;
　　this.age = age;
}

function _new(){
　　//1.拿到传入的参数中的第一个参数，即构造函数名Func
　　var Func = [].shift.call(arguments);
　　//2.创建一个空对象obj,并让其继承Func.prototype
　　var obj = Object.create(Func.prototype);
　　//3.执行构造函数，并将this指向创建的空对象obj
　　Func.apply(obj,arguments)
　　//4.返回创建的对象obj
　　return obj
}

xm = _new(Person,'xiaoming',18);

console.log(xm);

Résultats des tests :

À partir des résultats des tests, nous pouvons voir que la fonction _new La fonction est exactement la même que le mot-clé new.

Recommandations associées :

Quelles sont les méthodes d'héritage de js ? Introduction à plusieurs façons d'implémenter l'héritage en js

Comment utiliser js pour obtenir l'effet de cliquer sur une petite image pour afficher une grande image ? (Exemple de code)

Une brève introduction et méthode de mise en œuvre de la copie superficielle et de la copie profonde en js

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!