Wie erstelle ich ein Objekt in Javascript?

So erstellen Sie ein Objekt in JavaScript: 1. Verwenden Sie das Schlüsselwort new, um das Objekt zu erstellen. 2. Verwenden Sie die Factory-Methode, um das Objekt zu erstellen. 4. Verwenden Sie die Prototyp-Methode zum Erstellen des Objekts; 5. Verwenden Sie das Mischen. Erstellen Sie Objekte mithilfe der Konstruktor-/Prototyp-Methode. 6. Verwenden Sie dynamische Prototyp-Methoden zum Erstellen von Objekten.

Die Betriebsumgebung dieses Tutorials: Windows 7-System, JavaScript-Version 1.8.5, Dell G3-Computer.

Wir können die grammatikalischen Funktionen von JavaScript nutzen, um Objekte mit der Idee von Klassen zu erstellen.

Methode 1: Ursprüngliche Methode - Verwenden Sie das Schlüsselwort new, um den Konstruktor aufzurufen und ein Objekt zu erstellen neues Schlüsselwort, und fügen Sie dann entsprechend den Merkmalen von JavaScript als dynamischer Sprache Eigenschaften und Methoden hinzu und erstellen Sie ein Objekt. Dies stellt das Objekt dar, für das die Methode aufgerufen wird.

Das Problem bei dieser Methode ist: Wenn wir Objekte mehrmals erstellen müssen, müssen wir den Code mehrmals wiederholen, was der Wiederverwendung von Code nicht förderlich ist.

Methode 2: Factory-Methode

Der Code lautet wie folgt:

<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>

Diese Methode realisiert zwar auch die Erstellung von Objekten, aber ähnlich, wenn Sie mehrere Objekte erstellen müssen Mal und die Attribute Wenn der Inhalt unterschiedlich ist, muss der Code mehrmals wiederholt werden. Die Code-Wiederverwendungsrate muss überdacht werden. Anschließend kann der Code geändert werden, um die Code-Wiederverwendungsrate zu erhöhen, und die Factory-Methode kann so geändert werden, dass Parameterzuweisungen übergeben werden.

Der verbesserte Code lautet wie folgt:

<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>

Obwohl diese Methode die Wiederverwendungsrate des Codes verbessern kann, weist sie im Vergleich zum Konzept der objektorientierten Klassen einen großen Fehler auf. Bei der Objektorientierung wird betont, dass die Eigenschaften von Objekten privat sind, die Methoden von Objekten jedoch gemeinsam genutzt werden. Wenn die obige Factory-Methode Objekte erstellt, muss sie für jedes Objekt eine eigene private Methode erstellen. Gleichzeitig ist es eine Verschwendung von Speicher, da für jedes Objekt logisch identische Methoden erstellt werden.

Der verbesserte Code lautet wie folgt:

<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>

Das Obige löst das private Problem, dass verschiedene Objekte Funktionsobjekte halten, indem mehrere Funktionsobjekte definiert werden. Jetzt enthalten alle Objektmethoden Verweise auf die beiden oben genannten Funktionen. Auf diese Weise sind die Funktionen und Objekte des Objekts jedoch unabhängig voneinander, was im Widerspruch zur objektorientierten Vorstellung steht, dass bestimmte Methoden zu bestimmten Klassen gehören.

Methode 3: Konstruktormethode

Der Code lautet wie folgt:

<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>

Die Konstruktormethode ist dieselbe wie die Factory-Methode und erstellt ein exklusives Funktionsobjekt für jedes Objekt. Natürlich können diese Funktionsobjekte auch außerhalb des Konstruktors definiert werden, sodass die Objekte und Methoden unabhängig voneinander sind.

Das größte Problem bei der Verwendung von Konstruktoren besteht darin, dass alle Eigenschaften einmal für jede Instanz erstellt werden. Dies ist für numerische Eigenschaften akzeptabel, aber nicht sinnvoll, wenn jede Instanz der Funktionsmethode erstellt werden muss.

Um eine neue Instanz von Person() zu erstellen, muss der neue Operator verwendet werden. Der Aufruf eines Konstruktors auf diese Weise durchläuft tatsächlich die folgenden vier Schritte:

•  创建一个新对象；
• 将构造函数的作用域赋给新对象（因此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语句只能成功执行一次，在实际应用中，采用最广泛的构造函数/原型方法。动态原型方法也很流行，它在功能上和构造函数/原型方法是等价的。不要单独使用构造函数和原型方法。

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

Das obige ist der detaillierte Inhalt vonWie erstelle ich ein Objekt in Javascript?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!