Comment créer un objet en javascript ?

Comment créer un objet en JavaScript : 1. Utilisez le mot-clé new pour appeler le constructeur pour créer l'objet ; 2. Utilisez la méthode factory pour créer l'objet ; 3. Utilisez la méthode constructeur pour créer l'objet ; ; 4. Utilisez la méthode prototype pour créer l'objet ; 5. Utilisez la méthode mixte constructeur/prototype pour créer des objets ; 6. Utilisez la méthode prototype dynamique pour créer des objets ;

L'environnement d'exploitation de ce tutoriel : système Windows 7, JavaScript version 1.8.5, ordinateur Dell G3.

Nous pouvons utiliser les fonctionnalités grammaticales de JavaScript pour créer des objets avec l'idée de​​classes.

Méthode 1 : Méthode originale - utilisez le mot-clé new pour appeler le constructeur pour créer un objet

Le code est la suivante :

<script>
    var obj = new Object();
    obj.name = "Kitty";//为对象增加属性
    obj.age = 21;
    obj.showName = function () {//为对象添加方法
        console.log(this.name);
    };
    obj.showAge = function(){
        console.log(this.age);
    };
    obj.showName();
    obj.showAge();
</script>

Cette méthode génère un objet via le nouveau mot-clé, puis ajoute des propriétés et des méthodes en fonction des caractéristiques de JavaScript en tant que langage dynamique et construit un objet. Le this représente l'objet sur lequel la méthode est appelée.

Le problème avec cette méthode est le suivant : si nous devons créer des objets plusieurs fois, alors nous devons répéter le code plusieurs fois, ce qui n'est pas propice à la réutilisation du code.

Méthode 2 : Méthode Factory

Le code est le suivant :

<script>
    function createObj(){
        var obj = new Object();//创建对象
        obj.name = "Kitty";
        obj.age = "21";
        obj.showName = function () {
            console.log(this.name);
        };
        obj.showAge = function () {
            console.log(this.age);
        };
        return obj;
    }
 
    var obj1 = createObj();
    var obj2 = createObj();
 
    obj1.showName();
    obj1.showAge();
 
    obj2.showName();
    obj2.showAge();
</script>

Bien que cette méthode implémente également la création d'objets, de la même manière, si vous devez créer des objets plusieurs fois et que le contenu des attributs est différent, vous devez également répéter le code plusieurs fois. Le taux de réutilisation du code doit être reconsidéré, puis le code peut être modifié pour augmenter le taux de réutilisation du code, et la méthode d'usine peut être modifiée pour transmettre les affectations de paramètres.

Le code amélioré est le suivant :

<script>
    function createObj(name,age){
        var obj = new Object();
        obj.name = name;
        obj.age = age;
        obj.showName = function () {
            console.log(this.name);
        };
        obj.showAge = function(){
            console.log(this.age);
        };
 
        return obj;
    }
 
    var obj1 = new createObj("Kitty","21");
    var obj2 = new createObj("Luo","22");
 
    obj1.showName();//Kitty
    obj1.showAge();//21
 
    obj2.showName();//luo
    obj2.showAge();//22
</script>

Bien que cette méthode puisse améliorer le réutilisation du code Efficacité, mais par rapport au concept de classes orienté objet, il y a un gros défaut. L'orientation objet souligne que les propriétés des objets sont privées, mais que les méthodes des objets sont partagées. Lorsque la méthode d'usine ci-dessus crée des objets, elle doit créer sa propre méthode privée pour chaque objet. En même temps, c'est un gaspillage de mémoire car des méthodes logiquement identiques sont créées pour chaque objet.

Le code amélioré est le suivant :

<script>
    function createObj(name,age){
        var obj = new Object();
        obj.name = name;
        obj.age = age;
        obj.showName = showName;
        obj.showAge = showAge;
        return obj;
    }

    function showName(){
        console.log(this.name);
    }
    function showAge(){
        console.log(this.age);
    }
    
    var obj1 = new createObj("Kitty","21");
    var obj2 = new createObj("Luo","22");

    obj1.showName();//Kitty
    obj1.showAge();//21

    obj2.showName();//luo
    obj2.showAge();//22
</script>

Ce qui précède est résolu en définissant plusieurs objets fonction. Il résout le problème privé des objets fonction détenus par différents objets. Désormais, toutes les méthodes objet contiennent des références aux deux fonctions ci-dessus. Mais de cette façon, les fonctions et les objets de l'objet sont indépendants les uns des autres, ce qui est incompatible avec l'idée orientée objet selon laquelle des méthodes spécifiques appartiennent à des classes spécifiques.

Méthode 3 : Méthode constructeur

Le code est le suivant :

<script>
    function Person(name,age){
        this.name = name;
        this.age = age;
 
        this.showName = function () {
            console.log(this.name);
        };
        this.showAge = function () {
            console.log(this.age);
        };
    }
    var obj1 = new Person("Kitty","21");
    var obj2 = new Person("Luo","22");
 
    obj1.showName();//Kitty
    obj1.showAge();//21
 
    obj2.showName();//luo
    obj2.showAge();//22
</script>

La méthode constructeur est la même que la méthode usine et créera un objet fonction exclusif pour chaque objet. Bien entendu, ces objets fonctions peuvent également être définis en dehors du constructeur, afin que les objets et méthodes soient indépendants les uns des autres.

Le plus gros problème avec l'utilisation des constructeurs est que toutes les propriétés seront créées une fois pour chaque instance. Ceci est acceptable pour les propriétés numériques, mais ce n'est pas raisonnable si chaque instance de la méthode fonction doit être créée.

Pour créer une nouvelle instance de Person(), l'opérateur new doit être utilisé. Appeler un constructeur de cette manière passe en fait par les quatre étapes suivantes :

• 创建一个新对象；
• 将构造函数的作用域赋给新对象（因此this就指向了这个新对象）；
• 执行构造函数中的代码（为这个新对象添加属性）；
• 返回新对象。

方法四：原型方法

代码如下：

<script>
    function Person(){} //定义一个空构造函数，且不能传递参数
    //将所有的属性的方法都赋予prototype
    Person.prototype.name = "Kitty";
    Person.prototype.age = 21;
    Person.prototype.showName = function (){
        console.log(this.name);
    };
    Person.prototype.showAge = function (){
        console.log(this.age);
    };
 
    var obj1 = new Person("Kitty","21");
    var obj2 = new Person("Luo","22");
 
    obj1.showName();//Kitty
    obj1.showAge();//21
 
    obj2.showName();//luo
    obj2.showAge();//22
</script>

当生成Person对象时，prototype的属性都赋给了新的对象。那么属性和方法是共享的。首先，该方法的问题是构造函数不能传递参数，每个新生成的对象都有默认值。其次，方法共享没有任何问题，但是，当属性是可改变状态的对象时，属性共享就有问题。

修改代码如下：

<script>
    function Person(){} //定义一个空构造函数，且不能传递参数
    //将所有的属性的方法都赋予prototype
    Person.prototype.age = 21;
    Person.prototype.array = new Array("Kitty","luo");
 
    Person.prototype.showAge = function (){
        console.log(this.age);
    };
    Person.prototype.showArray = function (){
        console.log(this.array);
    };
    var obj1 = new Person();
    var obj2 = new Person();
    obj1.array.push("Wendy");//向obj1的array属性添加一个元素
 
    obj1.showArray();//Kitty,luo,Wendy
    obj2.showArray();//Kitty,luo,Wendy
</script>

上面的代码通过obj1的属性array添加元素时，obj2的array属性的元素也跟着受到影响，原因就在于obj1和obj2对象的array属性引用的是同一个Array对象，那么改变这个Array对象，另一引用该Array对象的属性自然也会受到影响，混合的构造函数/原型方式使用构造函数定义对象的属性，使用原型方法定义对象的方法，这样就可以做到属性私有，而方法共享。

方法五：混合的构造函数/原型方式

代码如下：

<script>
    function Person(name,age){
        this.name = name;
        this.age = age;
        this.array = new Array("Kitty","luo");
    }
 
    Person.prototype.showName = function (){
        console.log(this.name);
    };
    Person.prototype.showArray = function (){
        console.log(this.array);
    };
    var obj1 = new Person("Kitty",21);
    var obj2 = new Person("luo",22);
    obj1.array.push("Wendy");//向obj1的array属性添加一个元素
 
    obj1.showArray();//Kitty,luo,Wendy
    obj1.showName();//Kitty
    obj2.showArray();//Kitty,luo
    obj2.showName();//luo
</script>

属性私有后，改变各自的属性不会影响别的对象。同时，方法也是由各个对象共享的。在语义上，这符合了面向对象编程的要求。

方法六：动态原型方法

代码如下：

<script>
    function Person(name,age){
        this.name = name;
        this.age = age;
        this.array = new Array("Kitty","luo");
        //如果Person对象中_initialized 为undefined，表明还没有为Person的原型添加方法
        if(typeof Person._initialized  == "undefined"){
            Person.prototype.showName = function () {
                console.log(this.name);
            };
            Person.prototype.showArray = function () {
                console.log(this.array);
            };
            Person._initialized = true;
        }
    }
 
    var obj1 = new Person("Kitty",21);
    var obj2 = new Person("luo",22);
    obj1.array.push("Wendy");//向obj1的array属性添加一个元素
 
    obj1.showArray();//Kitty,luo,Wendy
    obj1.showName();//Kitty
    obj2.showArray();//Kitty,luo
    obj2.showName();//luo
</script>

这种方法和构造函数/原型方式大同小异。只是将方法的添加放到了构造函数之中，同时在构造函数Person上添加了一个属性用来保证if语句只能成功执行一次，在实际应用中，采用最广泛的构造函数/原型方法。动态原型方法也很流行，它在功能上和构造函数/原型方法是等价的。不要单独使用构造函数和原型方法。

更多编程相关知识，请访问：编程视频！！

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!