Heim > Web-Frontend > js-Tutorial > Hauptteil

So erstellen Sie Objekte

高洛峰
Freigeben: 2016-10-29 13:44:55
Original
1148 Leute haben es durchsucht

1. Verwenden Sie Object, um Objekte zu erstellen

var person = new Object();
person.name = "Nicholas";
person.age = "29";
person.job = "Software Engineer";

person.sayName = function(){
    alert(this.name);
};

//对象字面量写法
var person = {
    name: "Nicholas",
    age: "29",
    job: "Software Engineer",
    
    sayName: function(){
        alert(this.name);
    }
};
Nach dem Login kopieren

Nachteile: Die Verwendung derselben Schnittstelle zum Erstellen vieler Objektpaare führt zu einer Menge doppeltem Code.

2. Fabrikmuster

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

var person1 = createPerson("Nicholas", "29", "Software Engineer");
var person2 = createPerson("Greg", "27", "Doctor");
Nach dem Login kopieren

Nachteile: Der Objekttyp kann nicht identifiziert werden.

3. Konstruktormuster

function Person(name, age, job) {
    this.name = name;
    this.age = age;
    this.job = job;
    this.sayName = function(){
        alert(this.name);
    };
}
//构造函数使用new操作符来调用
var person1 = new Person("Nicholas", "29", "Software Engineer");
var person2 = new Person("Greg", "27", "Doctor");
Nach dem Login kopieren

Nachteile: Jede Methode muss auf der Instanz neu erstellt werden

//不同实例上的同名函数是不相等的
alert(person1.sayName == person2.sayName);        //false

//可以把函数定义转移到构造函数外来解决这个问题
function Person(name, age, job) {
    this.name = name;
    this.age = age;
    this.job = job;    
   this.sayName = sayName;
}
function sayName() {
    alert(this.name);
}
Nach dem Login kopieren

4. Prototypmuster

Jede Funktion Wir erstellen ein Prototypattribut, das einen Zeiger auf ein Objekt darstellt. Der Zweck dieses Objekts besteht darin, Eigenschaften und Methoden zu enthalten, die von allen Instanzen eines bestimmten Typs gemeinsam genutzt werden können.

function Person() {
}
Person.prototype.name = "Nicholas";
Person.prototype.age = "29";
Person.prototype.job = "Software Engineer";
Person.prptptype.sayName = function(){
    alert(this.name);
};

var person1 = new Person();
person1.sayName();        //"Nicholas"

var person2 = new Person();
person2.sayName();        //"Nicholas"

alert(person1.sayName == person2.sayName);        //true
Nach dem Login kopieren
//更简单的原型语法
function Person() {
}
Person.prototype = {
    constructor : Person,        //以对象字面量形式创建新对象,constructor不再指向Person,在此特意设置为Person
    name : "Nicholas",
    age : "29",
    job : "Software Engineer",
    sayName : function () {
        alert(this.name);
    }
};
Nach dem Login kopieren

Prototyp und Instanz sind durch die Prototyp- und Konstruktorattribute miteinander verbunden.

Wenn der Code die Attribute eines Objekts liest, ruft er zuerst die Instanz ab und dann Ruft den Prototyp der Instanz ab, sodass Instanzeigenschaften Vorrang vor Prototypeigenschaften haben.

Durch das Reprototypisieren des Objekts wird die Verbindung zwischen dem Prototyp und der Instanz getrennt, durch das Ändern des Prototypobjekts jedoch nicht.

Nachteile: Instanzen können keine eigenen Eigenschaften haben

5. Verwenden Sie das Konstruktormuster und das Prototypmodell in Kombination

//构造函数模式用于定义实例属性
function Person(name, age, job) {
    this.name = name;
    this.age = age;
    this.job = job;
    this.friend = ["Shelby", "Court"];
}

//原型模式用于定义方法和共享属性
Person.prototype = {
    constructor : Person;
    sayName : function() {
        alert(this.name);
    }
}
Nach dem Login kopieren

6. Robustes Konstruktormuster


Verwandte Etiketten:
js
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage