JS劃重點——類和物件的不正經闡述
阿新 • • 發佈:2018-12-09
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方法/