JS偽繼承prototype實現(xiàn)方法示例
本文實例講述了JS偽繼承prototype實現(xiàn)方法。分享給大家供大家參考,具體如下:
眾所周知JS中沒有類的概念,但是要想實現(xiàn)類的功能可以同過function
模擬。如:
第一種繼承 (屬性繼承)
//該函數(shù)相當(dāng)于是一個構(gòu)造器,也是一個偽類 function Fn(){ this.a = 4; this.b = 5; this.log = function(){ console.log(this.a,this.b); } } function Fn1(){ Fn.call(this);//調(diào)用父類的構(gòu)造函數(shù) } Fn1.prototype = Fn.prototype; var fn = new Fn(); var fn1 = new Fn1(); //由此可見Fn1 是fn1的子類。 fn1 instanceof Fn; // true fn instanceof Fn1; // true fn.a = 5; //由此可見Fn1 繼承了 Fn得所有屬性和方法 //而是是復(fù)制了一份Fn的屬性和方法,并不是對象的引用。 console.log(fn.a); // 5 console.log(fn1.a); // 4 this.log(); // 4 5
總結(jié): 這種繼承,是重新拷貝一份放入內(nèi)存中,他們的值互相獨立,修改一個不會改變另一個。
第二種繼承 原型繼承(prototype)
function Fn(){} Fn.prototype.data = { name: 'zhangsan' } Fn.prototype.getName = function(){ return this.data.name; } function Fn1(){} //原型鏈繼承 Fn1.prototype = Fn.prototype; var fn = new Fn(); var fn1 = new Fn1(); //所用Fn1 繼承了 Fn fn1 instanceof Fn;//true console.log(fn1.getName()); // zhangsan console.log(fn.getName()); // zhangsan //修改了fn的name屬性值 fn.data.name = 'lisi'; // 由此我們可看出 原型鏈繼承 是 引用繼承 //不會重新拷貝一份變量。就像對象的引用一樣。 console.log(fn.getName()); // lisi console.log(fn1.getName()); // lisi
兩種類的寫法造成示例的區(qū)別
//第一種 function Fn(){ this.a = 4; this.b = 5; this.log = function(){ console.log(this.a,this.b); } } var fn1 = new Fn(); var fn2 = new Fn(); fn1.a = 1; //由此可以看出兩個對象互不影響 //說明每個對象里都存在一份a和b fn1.log(); // 1 5 fn2.log(); // 4 5 //第二種 function Fn(){} fn.prototype.name = 'zhangsan'; fn.prototype.data = { a: 4, b: 5 } fn.prototype.log = function(){ console.log(this.data.a,this.data.b); } var fn1 = new Fn(); var fn2 = new Fn(); fn1.a = 1; //由此可見就算是不同的示例他們他們所指向的值是同一個。 fn1.log();//1 5 fn2.log();//1 5 fn2.name = 'lisi'; //這里fn1.name并沒有被修改 console.log(fn1.name); //zhangan console.log(fn2.name); // lisi
總結(jié)
類中直接this.
出來的屬性和方法都會直接復(fù)制一份給子類或者實例對象。個子類或?qū)嵗龑ο笾g互不影響。
使用prototype
增加的屬性和方法,對象類型的只有一份,值類型的這會被復(fù)制。
收獲
由于函數(shù)都是通用的,所以比較上面兩種方法,第二種明顯比第一種性能要好的多,因為避免了沒有必要的復(fù)制,肯定會比較節(jié)省內(nèi)存。所以以后寫類的時候,盡量使用第二種方式。
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《javascript面向?qū)ο笕腴T教程》、《JavaScript錯誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運算用法總結(jié)》
希望本文所述對大家JavaScript程序設(shè)計有所幫助。
- Javascript中 關(guān)于prototype屬性實現(xiàn)繼承的原理圖
- JavaScript類和繼承 prototype屬性
- js中繼承的幾種用法總結(jié)(apply,call,prototype)
- 深入了解javascript中的prototype與繼承
- javascript prototype的深度探索不是原型繼承那么簡單
- JavaScript面向?qū)ο笾甈rototypes和繼承
- Javascript 原型和繼承(Prototypes and Inheritance)
- JavaScript不使用prototype和new實現(xiàn)繼承機(jī)制
- JavaScript使用prototype原型實現(xiàn)的封裝繼承多態(tài)示例
- javascript基于prototype實現(xiàn)類似OOP繼承的方法
- Javascript中的prototype與繼承
- JavaScript使用prototype屬性實現(xiàn)繼承操作示例
相關(guān)文章
如何通過遞歸方法實現(xiàn)用json-diff渲染json字符串對比結(jié)果
JsonDiff是一個高性能json差異發(fā)現(xiàn)工具,它幾乎可以發(fā)現(xiàn)任何JSON結(jié)構(gòu)的差異,并且將錯誤信息反饋給用戶,下面這篇文章主要給大家介紹了關(guān)于如何通過遞歸方法實現(xiàn)用json-diff渲染json字符串對比結(jié)果的相關(guān)資料,需要的朋友可以參考下2022-12-12js+html5操作sqlite數(shù)據(jù)庫的方法
這篇文章主要介紹了js+html5操作sqlite數(shù)據(jù)庫的方法,以完整實例形式分析了JavaScript封裝的html5操作SQLite數(shù)據(jù)庫類,并分析了具體使用技巧,需要的朋友可以參考下2016-02-02釘釘小程序web-view內(nèi)嵌H5頁面并實現(xiàn)通信
本文主要介紹了釘釘小程序web-view內(nèi)嵌H5頁面并實現(xiàn)通信,文中通過示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2022-05-05淺談webpack打包過程中因為圖片的路徑導(dǎo)致的問題
下面小編就為大家分享一篇淺談webpack打包過程中因為圖片的路徑導(dǎo)致的問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02利用JavaScript實現(xiàn)簡單的網(wǎng)頁時鐘
這篇文章主要介紹了利用JavaScript實現(xiàn)簡單的網(wǎng)頁時鐘,主要使用了js的日期對象,實現(xiàn)的時候先創(chuàng)建一個日期對象,并進(jìn)行網(wǎng)頁布局,對時間獲取之后將時間填入對應(yīng)的標(biāo)簽內(nèi)。然后使用多線程實現(xiàn)時鐘的變動,需要的朋友可以參考一下2022-02-02微信小程序自定義tabbar實現(xiàn)突出樣式詳解流程
tabBar相對而言用的還是比較多的,但是用起來并沒有難,下面這篇文章主要給大家介紹了關(guān)于微信小程序全局配置之tabBar的相關(guān)資料,文中通過圖文以及示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-01-01javascript獲取文檔坐標(biāo)和視口坐標(biāo)
制作網(wǎng)頁的過程中,你有時候需要知道某個元素在網(wǎng)頁上的確切位置。下面的教程總結(jié)了Javascript在網(wǎng)頁定位方面的相關(guān)知識。有需要的小伙伴可以參考下。2015-05-05