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

2021-09-01 10:09:47 字數 1844 閱讀 1853

var o=new object();

o.age=20;

o.name="lisa";

o.showname=function()

這種寫法建立了乙個物件o 給o新增屬性和方法,看似沒有問題但是在建立多個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物件導向程式設計中發現的比較科學的方法。

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新增屬性,所以這種寫法是較為不通用的一種寫法 function createperson a...

JS物件導向學習

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