JavaScript對象創建的九種方式


1、標准創建對象模式

1 var person = new Object();
2 person.name = "Nicholas";
3 person.age = 29;
4 person.job = "Software Engineer";
5 person.sayName = function(){alert(this.name);};

 

2、字面量模式

1 var person = {
2     name: "Nicholas",
3     age: 29,
4     job: "Software Engineer",
5     sayName: function(){alert(this.name);}
6 };

 

3、工廠模式

 1 function createPerson(name, age, job){
 2     var o = new Object();
 3     o.name = name;
 4     o.age = age;
 5     o.job = job;
 6     o.sayName = function(){alert(this.name);};
 7     return o;
 8 }
 9 var person1 = createPerson("Nicholas", 29, "Software Engineer");
10 var person2 = createPerson("Greg", 27, "Doctor");

 

4、構造函數模式

1 function Person(name, age, job){
2     this.name = name;
3     this.age = age;
4     this.job = job;
5     this.sayName = function(){alert(this.name);};
6 }
7 var person1 = new Person("Nicholas", 29, "Software Engineer");
8 var person2 = new Person("Greg", 27, "Doctor");

 

5、原型模式

 1 function Person(){}
 2 Person.prototype.name = "Nicholas";
 3 Person.prototype.age = 29;
 4 Person.prototype.job = "Software Engineer";
 5 Person.prototype.sayName = function(){alert(this.name);};
 6 var person1 = new Person();
 7 person1.sayName(); //"Nicholas"
 8 var person2 = new Person();
 9 person2.sayName(); //"Nicholas"
10 alert(person1.sayName == person2.sayName); //true

 

6、組合構造函數和原型模式

 1 function Person(name, age, job){
 2     this.name = name;
 3     this.age = age;
 4     this.job = job;
 5     this.friends = ["Shelby", "Court"];
 6 }
 7 Person.prototype = {
 8     constructor : Person,
 9     sayName : function(){alert(this.name);}
10 }
11 var person1 = new Person("Nicholas", 29, "Software Engineer");
12 var person2 = new Person("Greg", 27, "Doctor");
13 person1.friends.push("Van");
14 alert(person1.friends); //"Shelby,Count,Van"
15 alert(person2.friends); //"Shelby,Count"
16 alert(person1.friends === person2.friends); //false
17 alert(person1.sayName === person2.sayName); //true

 

7、動態原型模式(這里只在 sayName()方法不存在的情況下,才會將它添加到原型中。)

 1 function Person(name, age, job){
 2     this.name = name;
 3     this.age = age;
 4     this.job = job;
 5     if (typeof this.sayName != "function"){  6         Person.prototype.sayName = function(){alert(this.name);};  7  }  8 }
 9 var friend = new Person("Nicholas", 29, "Software Engineer");
10 friend.sayName(); 

 

8、寄生構造函數模式(除了使用 new 操作符並把使用的包裝函數叫做構造函數之外,這個模式跟工廠模式其實是一模一樣的。)

 1 function Person(name, age, job){
 2     var o = new Object();
 3     o.name = name;
 4     o.age = age;
 5     o.job = job;
 6     o.sayName = function(){alert(this.name);};
 7     return o;
 8 }
 9 var friend = new Person("Nicholas", 29, "Software Engineer");
10 friend.sayName(); //"Nicholas"

 

9、穩妥構造函數模式(一是新創建對象的實例方法不引用 this;二是不使用 new 操作符調用構造函數)

function Person(name, age, job){
    var o = new Object();
    o.sayName = function(){alert(name);};
    return o;
}
var friend = Person("Nicholas", 29, "Software Engineer");
friend.sayName(); //"Nicholas"

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM