js 物件導向學習6 幾種物件導向寫法的對比

2022-07-15 02:12:15 字數 1988 閱讀 9249

var o=new

object();

o.age=20;

o.name="lisa";

o.showname=function

()

這種寫法建立了乙個物件o 給o新增屬性和方法,看似沒有問題但是在建立多個o 就需要重複的給o新增屬性,所以這種寫法是較為不通用的一種寫法

function

createperson(age,name)

return

o;

}

這樣解決了重複建立物件的問題,通過createperson 這個工廠就可以建立多個不同的物件,每個都有不同age屬性,不同name屬性,但是showname在每個建立物件的時候也會穿件乙個新的方法模板,是不是有點浪費記憶體

所有就有以下的改造方法把showname單獨提取出來**如下

function

createperson(age,name)

function

showname()

如此這番的改造就解決showname方法多次建立的問題,也節約了記憶體,是不是很奇怪,感覺寫習慣物件導向**的人看著這些是不是非常不習慣的。

通過構造方法構建物件**如下

function

person(age,name)

} var p1=new person(12,"lisa");

var p2=new person(15,"lee");

觀察以上**區別,這個person 中是沒有new object() 和返回值的,所有person 就是乙個構造器,用來構造person物件這種寫法同樣是沒有解決showname多次建立的問題,解決方法也是跟上邊是一樣的只有提取出showname方法

通過prototype屬性構建物件**如下

function

person(){}

person.prototype.age=12;

person.prototype.name="lee";

person.prototype.parray=new

array();

person.prototype.showname=function

();

var p1=new

person();

p1.parray.push("sa");

var p2=new

person();

console.log(p1.showname===p2.showname);//

true

console.log(p1.parray[0]);//

sa

console.log(p2.parray[0]);//

sa

了解prototype屬性就應該知道每個建立的person物件都會自動擁有age name 屬性和showname 方法而且 這種寫法有乙個好處就是解決了showname重複建立的問題,但是兩個新問題也隨之而來,無法使用構造器傳遞引數,如person(23,"sa"),更要命的是如果屬性是引用型別的所有建立的物件都會持有同乙個引用 所以就導致了 parray 值都是一樣,如何解決這個問題?

混合模式 prototype +構造器同時建立物件**如下

function

perosn(age,name)

person.prototype.showname=function

()

如此這般就同時規避了以上的兩個問題。而且可以用instanceof 得知物件。

方法五其實已經沒有硬傷了,但是開發者會感覺**不夠優美,所以就誕生了動態原型方法,**如下

function

person(age,name)

person._initialized=true

; }

}

js 物件導向學習6 幾種物件導向寫法的對比

var o new object o.age 20 o.name lisa o.showname function 這種寫法建立了乙個物件o 給o新增屬性和方法,看似沒有問題但是在建立多個o 就需要重複的給o新增屬性,所以這種寫法是較為不通用的一種寫法,很多人想到乾脆用工廠建立o 就可以解決o無法重...

js 物件導向學習6 幾種物件導向寫法的對比

var o new object o.age 20 o.name lisa o.showname function 這種寫法建立了乙個物件o 給o新增屬性和方法,看似沒有問題但是在建立多個o 就需要重複的給o新增屬性,所以這種寫法是較為不通用的一種寫法,很多人想到乾脆用工廠建立o 就可以解決o無法重...

JS物件導向學習

最近看書在看js的物件導向技術,學習到幾種寫法 物件字面量語法 var person 1.工廠模式 function createperson name,age,job return o var person1 createperson hyr 22,engineer var person2 cre...