JS設計模式

一:設計模式

1:工廠模式
function createPerson(name,age,job){
    var obj = new Object();
    obj.name = name;
    obj.age = age;
    obj.job = job;
    obj.speak = function(){
        console.log(this.name);
    };
    return obj
}
var person1 = createPerson('panrui',20,'前端工程師')
注釋:解決了創建多個對象的問題,但是沒有結解決對象識別的問題(怎樣知道一個對象的類型)

 

2:構造函數模式
function Person(name,age,job){
    this.name = name;
    this.age = age;
    this.job = job;
    this.speak = function(){
        console.log(this.name);
    };        
}
var person2 = new Person('panrui',20,'前端工程師')
注釋:沒有顯示的創建對象,沒有返回語句,直接將屬性賦給this對象,將Person的實例對象標識為一種特定的類型
缺點:每個方法在每個實例上面都需要重新定義一遍,

 

3:原型模式
function Person(){
    
}
Person.prototype.name = 'panrui';
Person.prototype.age = 23;
Person.prototype.job = '前端工程師';
Person.prototype.speak = function(){
    console.log(this.name)
}
var person3 = new Person()
注意:省略了為構造函數傳遞初始化參數,結果所有實例享有相同的屬性(對於函數實用,但是對於那些基本屬性也說的過去,但是對於引用類型的數據就麻煩了)
基本屬性我們可以在實例當中添加一個同名屬性,這樣可以隱藏原型當中的對應的屬性,但是引用類型的屬性卻會導致所有實例共享

 

4:組合使用構造函數與原型模式
構造函數用於定義實例屬性,原型上面定義共享的屬性和方法
function Person(name,age,job){
    this.name = name;
    this.age = age;
    this.job = job;    
}
Person.prototype.speak = function(){
    console.log(this.name)
}
var person4 = new Person()

 

5:動態原型模式
function Person(name,age,job){
    this.name = name;
    this.age = age;
    this.job = job;    
    if(typeof this.speak != "function"){
        Person.speak = function(){
            console.log(this.name);
        };
    }
}