本文為大家分享了javascript創建對象的9種方式,供大家參考,具體內容如下
【1】使用Object構造函數
[缺點]使用同一個接口創建很多對象,會產生大量重復代碼
var person = new Object(); person.name = "Nicholas"; person.age = 29; person.job = "Software Engineer"; person.sayName = function(){ alert(this.name); }【2】使用對象字面量
[缺點]使用同一個接口創建很多對象,會產生大量重復代碼
var person = { name: "Nicholas", age : 29, job: "Software Engineer", sayName: function(){ alert(this.name); }};【3】工廠模式:抽象了創建具體對象的過程,考慮到ECMAScript中無法創建類,開發人員就發明了一種函數,用函數來封裝以特定接口創建對象的細節
[缺點]解決了創建多個相似對象的問題,但沒有解決對象識別的問題
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');【4】構造函數模式:沒有顯式地創建對象,直接將屬性和方法賦給了this對象,沒有return語句
[缺點]每個方法都要在每個實例上重新創建一遍
function Person(name,age,job){ this.name = name; this.age = age; this.jog = job; this.sayName = function(){ alert(this.name); }; //與聲明函數在邏輯上是等價的 //this.sayName = new Function('alert(this.name)');}var person1 = new Person("Nicholas",29,"software Engineer");var person2 = new Person("Greg",27,"doctor");【4.1】構造函數拓展模式:把函數定義轉移到構造函數外部
[缺點1]在全局作用域中定義的函數實際上只能被某個對象調用,這讓全局作用域有點名不副實
[缺點2]若對象需要定義很多方法,就要定義很多全局函數,這個自定義引用類型就沒有封裝性可言
function Person(name,age,job){ this.name = name; this.age = age; this.job = job; this.sayName = sayName;}function sayName(){ alert(this.name);}var person = new Person('小火柴','20','student')person.sayName();console.log(Person);【5】原型模式:我們創建的每個函數都有一個prototype(原型)屬性,這個屬性是一個指針,指向一個對象,而這個對象的用途是包含可以由特定類型的所有實例共享的屬性和方法。如果按照字面意思來理解,prototype就是通過調用構造函數而創建的對象實例的原型對象
function Person(){ Person.prototype.name = "Nicholas"; Person.prototype.age = 29; Person.prototype.job = "software Engineer"; Person.prototype.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【5.1】更簡單的原型模式:為了減少不必要的輸入,也為了從視覺上更好地封裝原型的功能,用一個包含所有屬性和方法的對象字面量來重寫整個原型對象。
[缺點]以這種方式重設constructor屬性會導致它的[[Enumerable]]特性被設置為true,默認情況下原生的constructor屬性是不可枚舉的
function Person(){};Person.prototype = { constructor : Person, name: "Nicholas", age: 29, job: "software Engineer", sayName : function(){ alert(this.name); }};【5.2】解決enumerable問題的原型模式
function Person(){};Person.prototype = { name: "Nicholas", age: 29, job: "software Engineer", sayName : function(){ alert(this.name); }};Object.defineProperty(Person.prototype,"constructor",{ enumerable : false, value : Person});[原型模式缺點1]重寫原型對象切斷了現有原型與已存在對象實例之間的聯系,它們引用的仍是最初的原型。
function Person(){}var friend = new Person();Person.prototype = { constructor: Person, name: "Nicholas", age: 29, job: "Software Engineer", sayName: function(){ alert(this.name); }};friend.sayName();//error[原型模式缺點2]引用類型屬性的共享性問題突出
function Person(){}Person.prototype = { constructor: Person, name: "Nicholas", age: 29, job: "Software Engineer", friend : ["shelby","Court"], sayName: function(){ alert(this.name); }};var person1 = new Person();var person2 = new Person();person1.friends.push("Van");alert(person1.friends);//["shelby","Court","Van"];alert(person2.friends);//["shelby","Court","Van"];alert(person1.friends === person2.friends);//true【6】組合模式:組合使用構造函數模式和原型模式是創建自定義類型的最常見方式。構造函數模式用于定義實例屬性,而原型模式用于定義方法和共享的屬性。這種混成模式還支持向構造函數傳遞參數,是用來定義引用類型的一種默認模式
function Person(name,age,job){ this.name = name; this.age = age; this.job = job; this.friends = ["shelby","Court"];}Person.prototype = { constructor: Person, sayName : function(){ alert(this.name); } }var person1 = new Person("Nicholas",29,"Software Engineer");var person2 = new Person("Greg",27,"Doctor");person1.friends.push("Van");alert(person1.friends);// ["shelby","Court","Van"];alert(person1.friends);// ["shelby","Court"];alert(person1.friends === person2.friends);//falsealert(person1.sayName === person2.sayName);//true【7】動態原型模式:把所有信息都封裝在構造函數中,通過在構造函數中初始化原型(僅在必要情況下),又保持了同時使用構造函數和原型的優點。換句話說,可以通過檢查某個存在的方法是否有效,來決定是否要初始化原型。
[注意]使用動態原型模式時,不能使用對象字面量重寫原型。如果在已經創建了實例的情況下重寫原型,那么就會切斷現有實例與新實例之間的聯系
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("Nicholas",29,"Software Engineer");friend.sayName();【8】寄生構造函數模式:創建一個函數,該函數的作用僅僅是封裝創建對象的代碼,然后再返回新創建的對象
function Person(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 friend = new Person("Nicholas",29,"Software Engineer");friend.sayName();//"Nicholas"【寄生構造函數模式應用】創建一個具有額外方法的特殊數組。由于不能直接修改Array構造函數,因此可以使用這個模式
function SpecialArray(){ //創建數組 var values = new Array(); //添加值 values.push.apply(values,arguments); //添加方法 values.toPipedString = function(){ return this.join('|'); }; //返回數組 return values;}var colors = new SpecialArray("red","blue","green");alert(colors.toPipedString());//"red|blue|green" 【9】穩妥構造函數模式:所謂穩妥對象指沒有公共屬性,而且其方法也不引用this的對象。穩妥對象最適合在一些安全環境中(這些環境會禁止使用this和new)或者在防止數據被其他應用程序改動時使用。
function Person(name,age,job){ //創建要返回的對象 var o = new Object(); //可以在這里定義私有變量和函數 //添加方法 o.sayName = function(){ alert(name); }; //返回對象 return o;}//在穩妥模式創建的對象中,除了使用sayName()方法之外,沒有其他方法訪問name的值var friend = Person("Nicholas",29,"Software Engineer");friend.sayName();//"Nicholas"以上就是javascript創建對象的九種方式,希望對大家的學習有所幫助。
新聞熱點
疑難解答