實(shí)現(xiàn)JavaScript編寫(xiě)類的方式
網(wǎng)上實(shí)現(xiàn)javascript寫(xiě)類的方法有很多, 總結(jié)下不外乎以下幾種. 我自己學(xué)習(xí)總結(jié)了一下.
構(gòu)造方法方式;原型方式;構(gòu)造方法+原型的混合方式
現(xiàn)在具體分析一下以上方式的優(yōu)缺點(diǎn):
構(gòu)造方法方式
這是最基本的也是最像Java寫(xiě)class的方式. 上代碼:
- //創(chuàng)建一個(gè)Student類
- function Student(name){
- this.name = name;
- this.sayName = function(){
- alert(this.name);
- };
- }
- //new兩個(gè)不同的Student.
- var jimmy = new Student('jimmy');
- var henry = new Student('henry');
- jimmy.sayName();//顯示jimmy
- henry.sayName();//顯示henry
這樣的方法簡(jiǎn)單明了, 也符合JAVAer的胃口, 但是每new一個(gè)新對(duì)象, 就會(huì)在內(nèi)存中分配一個(gè)sayName方法, 性能不是很好.
原型方式
- //創(chuàng)建一個(gè)Student類
- //屬性和方法都通過(guò)Student.prototype設(shè)置
- function Student(name){
- Student.prototype = name;
- Student.prototype.sayName = function(){
- alert(this.name);
- }
- }
- //new兩個(gè)不同的Student.
- var jimmy = new Student('jimmy');
- var henry = new Student('henry');
- jimmy.sayName();//顯示henry!!!
- henry.sayName();//顯示henry!!!
也許執(zhí)行的代碼和有些童鞋的期望有出入. 兩次alert都彈出henry! 其實(shí)很好理解. 屬性和方法都通過(guò)prototype設(shè)置. 不同對(duì)象的同一個(gè)屬性或者方法都指向同一個(gè)內(nèi)存, 所以henry是在jimmy后設(shè)置的. 所以henry把jimmy覆蓋了.
混合方式
構(gòu)造方法的方式可以為同一個(gè)類的每一個(gè)對(duì)象分配不同的內(nèi)存, 這很適合寫(xiě)類的時(shí)候設(shè)置屬性, 但是設(shè)置方法的時(shí)候我們就需要讓同一個(gè)類的不同對(duì)象共享同一個(gè)內(nèi)存了. 寫(xiě)方法用原型的方式***. 所以寫(xiě)類的時(shí)候需要把構(gòu)造方法和原型兩種方式混合著用. 廢話少說(shuō), 看代碼:
- //創(chuàng)建一個(gè)Student類
- //屬性通過(guò)構(gòu)造方法設(shè)置
- //方法通過(guò)Student.prototype設(shè)置
- function Student(name){
- this.name = name;
- Student.prototype.sayName = function(){
- alert(this.name);
- }
- }
- //new兩個(gè)不同的Student.
- var jimmy = new Student('jimmy');
- var henry = new Student('henry');
- jimmy.sayName();//顯示jimmy
- henry.sayName();//顯示henry
so far so good. 同一類的不同對(duì)象, 屬性各自占有內(nèi)存, 方法共享同一內(nèi)存. 其實(shí)這里還是有一個(gè)小問(wèn)題:
每new一個(gè)新對(duì)象, 就會(huì)執(zhí)行一次
- Student.prototype.sayName = function(){
- alert(this.name);
- }
造成不必要的重復(fù)運(yùn)算. 可以在類里面設(shè)置一個(gè)標(biāo)記位, ***次執(zhí)行的時(shí)候給這個(gè)標(biāo)志位設(shè)置true, 如果為true就不再為prototype設(shè)置方法.







51CTO技術(shù)棧公眾號(hào)

速覽