js 面向對象學習6 幾種面向對象寫法的對比
方法一
var o=new Object(); o.age=20; o.name="lisa"; o.showName=function(){ console.log(this.name); }
這種寫法創建了一個對象o 給o添加屬性和方法,看似沒有問題但是在創建多個o 就需要重復的給o添加屬性,所以這種寫法是較為不通用的一種寫法
方法二
function createPerson(age,name){ var o=new Object(); o.age=age; o.name=name; o.showName=function(){ console.log(this.name); } return o; }
這樣解決了重復創建對象的問題,通過createPerson 這個工廠就可以創建多個不同的對象,每個都有不同age屬性,不同name屬性,但是showName在每個創建對象的時候也會穿件一個新的方法模板,是不是有點浪費內存
所有就有以下的改造方法把showName單獨提取出來代碼如下
function createPerson(age,name){ var o=new Object(); o.age=age; o.name=name; o.showName =showName; return o; } function showName(){ console.log(this.name); }
如此這番的改造就解決showName方法多次創建的問題,也節約了內存,是不是很奇怪,感覺寫習慣面向對象代碼的人看著這些是不是非常不習慣的。
方法三
通過構造方法構建對象代碼如下
function Person(age,name){ this.age=age; this.name=name; this.showName=function(){ console.log(this.age); } } 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(){ console.log(this.name); }; 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){ this.age=age; this.name=name; this.array=new Array(); } Person.prototype.showName=function(){ console.log(this.name); }
如此這般就同時規避了以上的兩個問題。而且可以用instanceof 得知對象。
方法六
方法五其實已經沒有硬傷了,但是開發者會感覺代碼不夠優美,所以就誕生了動態原型方法,代碼如下
function Person(age,name){ this.age=age; this.name=name; if(typeof Person._initialized==‘undefined‘){ Person.prototype.showName=function(){ console.log(this.name); } Person._initialized=true; } }
轉載至:http://zha-zi.iteye.com/blog/1644857
js 面向對象學習6 幾種面向對象寫法的對比