1. 程式人生 > >JS劃重點——類和物件的不正經闡述

JS劃重點——類和物件的不正經闡述


JS劃重點——類和物件的不正經闡述

/在JS 類裡面函式也是一個物件,那麼要建立一個物件就需要一個類,這個類可以由這個對牛逼的物件-函式來實現/
/首先是普羅大眾都會的 工廠模式來建立一類/

function creates(name,sex,age,b) {
    var  w = new  Object;
    w.name = name;
    w.sex = sex;
    w.age = age;
    w.single = b;
    w.show = function(){
        for (prop in w) {
            console.log("w." + prop + " = " + w[prop]);
        }
    }
    return w ;
}

var w1 = creates('啊港','男',21,true)
var w2 = creates('啊財','男',20,false)
w1.show()
w2.show()

/這種方式建立的物件很不好,每次執行都會有一個show函式被建立,可以這樣寫來解決對各show函式的問題/

function showinfor(){
        for (prop in this) {
            console.log(this+"." + prop + " = " + this[prop]);
        }
    }


function creates(name,sex,age,b) {
    var  w = new  Object;
    w.name = name;
    w.sex = sex;
    w.age = age;
    w.single = b;
    w.show = showinfor
    return w ;
}
var w1 = creates('啊港','男',21,true)
var w2 = creates('啊財','男',20,false)
w2.show()
w1.show()

/但看起來就特別彆扭,這個show函式一點也不像是物件裡面所包含的方法,這就出現了JS的建構函式來解決/

function creatW(name,sex,age,b) {
    this.name = name;
    this.sex = sex;
    this.age = age;
    this.single = b;
    this.show = function(){
        alert(this.name+"使用了建構函式來建立物件")
    };
    
}
var w1 = new creatW('啊港','男',21,true)
w1.show()

/現在可以用new 運算子來建立物件了,裡面用的是this,不需要return物件,but 但是這種方式每個物件的shou函式也是不同的和工廠模式同父異母/

/來,邀請原型方式出場/

function w () {
    
}
w.prototype.name='啊港'
w.prototype.sex='男'
w.prototype.show=function(){
    alert(this.name+'使用了原型建立物件')
}

var w1 = new w()
w1.show()

/這種方式每個函式建立的物件都會公用裡面的屬性和方法,但是使用這種方式不能給函式傳參來初始化引數,所以構造加原型模式出場/

function w (name,sex,age,b) {
    this.name = name;
    this.sex = sex;
    this.age = age;
    this.single = b;
}

w.prototype.show=function(){
    alert(this.name+'使用了構造加原型建立物件')
}

var w1 = new w('啊港','男',21,true)
w1.show()

/這種方式是目前最流行歡迎的建立物件的方式之一,還有一種動態原型建立模式/

function w (name,sex,age,b) {
    this.name = name;
    this.sex = sex;
    this.age = age;
    this.single = b;
    if(typeof w._initialized == 'undefined'){
        w.prototype.show=function(){
            alert(this.name+'使用了動態原型建立物件')
        }
        w._initialized=true
    }
}

var w1 = new w('啊港','男',21,true)
w1.show()
var w2 = new w('啊財','男',21,true)
w2.show()

/initialized判斷是否給已經給原型賦予了任何方法如果沒有就建立,然後賦值為true,之後就不會建立show方法/