首頁 > 文章 > web前端 > 幾種JS創建物件的方式分享

幾種JS創建物件的方式分享

小云云原創: 2018-03-13 18:04:211429瀏覽

本文主要和大家分享幾種JS創建物件的方式，希望能幫助大家。

1、使用原生建構子建立特定類型的物件

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

2.用物件字面量

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

小結：這兩種方式都可以用來創建單個對象，但是有明顯的缺點，使用同一個接口創建很多對象，會產生大量重複代碼。

3.使用工廠模式

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

抽象化了創建具體物件的過程，發明一種函數，用函數來封裝以特定介面建立物件的細節。

4、建構函數模式

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

建立自訂的建構函數，從而定義自訂物件類型的屬性和方法。

5、原型模式

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

我們建立的每個函數都有一個prototype(原型)屬性，這個屬性是一個指針，指向一個對象，而這個物件的用途是包含可以由特定類型的所有實例共享的屬性和方法。原型模式的缺點是省略了為構造函數傳遞初始化參數這一環節，結果所有實例在預設情況下都取得相同的屬性值；原型中所有屬性是被很多實例共享的，對於包含引用類型值的屬性來說問題就比較突出了。

6、組合使用建構子模式和原型模式

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、動態原型模式

  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.寄生建構函數模式

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、穩健建構子模式

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

幾種JS創建物件的方式分享

相關文章