JavaScript類的寫法
我們知道,在js中,是沒有類的概念的。類的所有實例對象都從同一個原型對象上繼承屬性,因此,原型對象是類的核心。
類是對象的抽象,而對象是類的具體實例。類是抽象的,不占用內(nèi)存,而對象是具體的,占用存儲空間?!俣劝倏?/p>
早期的javascript需求都很簡單,基本都是寫成函數(shù)的,然后是面向過程的寫法,后來慢慢的引入面向?qū)ο箝_發(fā)思想,再后來就慢慢寫成類。
在js中,寫成類的本質(zhì)基本都是 構(gòu)造函數(shù)+原型。下面,就討論一下js類的幾種寫法:
構(gòu)造函數(shù)法
/** * Person類:定義一個人,有name屬性和getName方法 */ <script> function Person(name){ this.name = name; this.getName = function(){ return this.name; } } //我們在這里實例化幾個對象 var p1 = new Person("trigkit4"); var p2 = new Person("mike"); console.log(p1 instanceof Person);//true console.log(p2 instanceof Person);//true </script>
由上面控制臺輸出結(jié)果可知,p1和p2的確是類Person的實例對象。instanceof操作符左邊是待檢測類的對象,右邊是定義類的構(gòu)造函數(shù)。這里,instanceof用來檢測對象p1是否屬于Person類。
這種方式的優(yōu)點是:我們可以根據(jù)參數(shù)來構(gòu)造不同的對象實例 ,缺點是每次構(gòu)造實例對象時都會生成getName方法,造成了內(nèi)存的浪費 。
我們可以用一個外部函數(shù)來代替類方法,達到了每個對象共享同一個方法。改寫后的類如下:
//外部函數(shù) <script> function getName() { return this.name; } function Person(name){ this.name = name; this.getName = getName;// } </script>
原型方式
<script> function Person(){}; Person.prototype.name = "trigkit4";//類的屬性都放在prototype上 Person.prototype.getName = function(){ return " I'm " + this.name; } var p1 = new Person(); var p2 = new Person(); console.log(p1.name);//trigkit4 console.log(p2.getName());//I'm trigkit4 </script>
原型方式的缺點就是不能通過參數(shù)來構(gòu)造對象實例 (一般每個對象的屬性是不相同的) ,優(yōu)點是所有對象實例都共享getName方法(相對于構(gòu)造函數(shù)方式),沒有造成內(nèi)存浪費 。
構(gòu)造函數(shù)+原型方式
取前面兩種的優(yōu)點:
a、用構(gòu)造函數(shù)來定義類屬性(字段)。
b、用原型方式來定義類的方法。
<script> function Person(name){ this.name = name; } //原型的特性可以讓對象實例共享getName方法 Person.prototype.getName = function(){ return " I'm " + this.name; } </script>
這樣,我們就既可以構(gòu)造不同屬性的對象,也可以讓對象實例共享方法,不會造成內(nèi)存的浪費。
為了讓js代碼風(fēng)格更緊湊,我們讓prototype方法代碼移到function Person的大括號內(nèi)。
<script> function Person(name){ this.name = name; Person.prototype.getName = function(){ return name;//不宜用this.name } } var p1 = new Person('trigkit4'); console.log(p1.getName());//trigkit4 </script>
在這里,我們需要知道的幾種定義類的方法,除了上面的構(gòu)造函數(shù)外,還有:
Object.create()方法
用這個方法,"類"就是一個對象,而不是函數(shù)。
var Person = { name : "trigkit4", age : 21, run: function(){ alert("I like running"); } }
然后,直接用Object.create()生成實例,不需要用到new。
var p1 = Object.create(Person); alert(p1.age);//21 p1.run();//I like running
這種方法比"構(gòu)造函數(shù)法"簡單,但是不能實現(xiàn)私有屬性和私有方法,實例對象之間也不能共享數(shù)據(jù),對"類"的模擬不夠全面。
createNew()方法
這種方法不需要用到this和prototype,其做法是用對象來模擬一個類,然后在類里面定義一個構(gòu)造函數(shù)createNew(),然后在createNew()里面定義實例對象,把這個實例對象作為返回值。
<script> var Person = { createNew : function () { var person = {}; person.name = "trigkit4"; person.run = function(){ alert("I like running"); }; return person; } } </script>
使用的時候,調(diào)用createNew()方法,就可以得到實例對象。
var p1 = Person.createNew(); p1.run();//I like running
這種寫法其實和對象字面量的寫法是很類似的,只不過一個是逗號分隔,一個是分號分隔。
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
javascript實現(xiàn)移動端 HTML5 圖片上傳預(yù)覽和壓縮功能示例
這篇文章主要介紹了javascript實現(xiàn)移動端 HTML5 圖片上傳預(yù)覽和壓縮功能,結(jié)合實例形式分析了javascript移動端 HTML5 圖片上傳預(yù)覽和壓縮功能具體實現(xiàn)方法與操作注意事項,需要的朋友可以參考下2020-05-05javascript實現(xiàn)獲取一個日期段內(nèi)每天不同的價格(計算入住總價格)
這篇文章主要介紹了javascript實現(xiàn)獲取一個日期段內(nèi)每天不同的價格(計算入住總價格)的相關(guān)資料,需要的朋友可以參考下2018-02-02JS實現(xiàn)仿中關(guān)村論壇評分后彈出提示效果的方法
這篇文章主要介紹了JS實現(xiàn)仿中關(guān)村論壇評分后彈出提示效果的方法,實例分析了javascript彈出特效的css與提示框的具體實現(xiàn)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-02-02JS實現(xiàn)發(fā)送短信驗證后按鈕倒計時功能(防止刷新倒計時失效)
這篇文章主要介紹了JS實現(xiàn)發(fā)送短信驗證后按鈕倒計時功能防止刷新倒計時失效問題,在項目開發(fā)中經(jīng)常會用到此功能,下面小編通過本文給大家分享JS實現(xiàn)發(fā)送短信驗證后按鈕倒計時功能(防止刷新倒計時失效),需要的朋友參考下吧2017-07-07Next.js使用getServerSideProps進行服務(wù)器端渲染demo
這篇文章主要為大家介紹了Next.js使用getServerSideProps進行服務(wù)器端渲染demo,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-12-12