Teilen Sie verschiedene Möglichkeiten zum Erstellen von Objekten in JS

Dieser Artikel stellt Ihnen hauptsächlich verschiedene Möglichkeiten zum Erstellen von Objekten in JS vor und hofft, Ihnen dabei zu helfen.

1. Verwenden Sie native Konstruktoren, um Objekte bestimmter Typen zu erstellen

  var person =new Object();
    person.name="wangwu";
    person.age="20";
    person.sayName=function(){
    alert(this.name);
}

2. Verwenden Sie Objektliterale

var person = {
    name:"wangwu",
    age:"20",
    sayName: function(){
        alert(this.name);
    }
}

Zusammenfassung: Beide Methoden können zum Erstellen eines einzelnen Objekts verwendet werden, haben jedoch offensichtliche Nachteile. Die Verwendung derselben Schnittstelle zum Erstellen vieler Objekte führt zu einer Menge doppeltem Code.

3. Verwenden Sie das Factory-Muster

function createPerson(name,age){
    var o=new Object();
    o.name=name;
    o.age=age;
    o.sayName=function(){
            alert(this.name);
    };
    return o;
}
var person1=createPerson("wangwu",20);

Abstrahiert den Prozess der Erstellung spezifischer Objekte, erfindet eine Funktion und verwendet die Funktion, um die Erstellung zu kapseln spezifischer Schnittstellen Objektdetails.

4. Konstruktormuster

function  Person(name,age){
    this.name=name;
    this.age=age;
    this.sayName=function(){
        alert(this.name);
    };
}
var person1=new Person("wangwu",20);

Erstellen Sie einen benutzerdefinierten Konstruktor, um die Eigenschaften und Methoden des benutzerdefinierten Objekttyps zu definieren.

5. Prototyp-Modus

function Person(){
}
Person.prototype.name="wangwu";
Person.prototype.age=20;
Person.prototype.sayName=function(){
    alert(this.name);
}
var person1=new Person();
person1.sayName(); //wangwu

Jede Funktion, die wir erstellen, hat ein Prototyp-Attribut, das ein Zeiger ist, der auf ein Objekt zeigt. Und der Zweck dieses Objekts ist um Eigenschaften und Methoden zu enthalten, die von allen Instanzen eines bestimmten Typs gemeinsam genutzt werden können. Der Nachteil des Prototypmusters besteht darin, dass der Schritt der Übergabe von Initialisierungsparametern an den Konstruktor weggelassen wird. Daher erhalten alle Instanzen standardmäßig die gleichen Attributwerte Referenztypwerte. Das Problem ist stärker ausgeprägt.

6. Kombinierte Verwendung von Konstruktormuster und Prototypmuster

function Person(name,age){
    this.name=name;
    this.age=age;
    this.friends=["wangwu","zhangsan"];
}
Person.prototype={
    constructor:Person,
    sayName:function(){
        alert(this.name);
    }
}
var person1=new Person("wangwu",20);
var person2=new Person("zhangsan",23);
person1.friends.push("lisi");
alert(person1.friends); //"wangwu,zhangsan,lisi"
alert(person2.friends); //"wangwu,zhangsan"

7. Dynamisches Prototypmuster

  function Person(name,age,job){
        //属性
    this.name=name;
    this.age=age;
    this.job=job;
//方法
if(typeof this.sayName!="function"){
    person.prototype.sayName=function(){
            alert(this.name);
    };
}
}
var  friend=new Person("wangwu",20);
friends.sayName();

8. Parasitäres Konstruktormuster

function Person(name,age){
    var 0=new Object();
    o.name="wangwu";
    o.age=20;
    o.sayName=function(){
        alert(this.name);
    };
    return o;
}
var friend=new Person("wangwu",20);
friend.sayName(); //"wangwu"

9. Stabiles Konstruktormuster

function Person(name,age,job){
    //创建要返回的对象
    var  o=new Object();
    //可以在这里定义私有变量和函数
    //添加方法
    o.sayName=function(){
        alert(name);
    };
//返回对象
return o;
}
var friend=Person("wangwu",20);
friend.sayName();  //"wangwu"

Verwandte Empfehlungen:

Eine Zusammenfassung der Methoden zum Erstellen von Objekten in js (Beispielcode)

Mehrere Möglichkeiten zum Erstellen von Objekten in js

So erstellen Sie Objekte in js Zusammenfassung mehrerer häufig verwendeter Methoden (empfohlen)_js objektorientiert

Das obige ist der detaillierte Inhalt vonTeilen Sie verschiedene Möglichkeiten zum Erstellen von Objekten in JS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!