JavaScript ES6中CLASS的使用指南
1、前言
對於javascript來說,類是一種可選(而不是必須)的設計模式,而且在JavaScript這樣的[[Prototype]] 語言中實現類是很蹩腳的。
這種蹩腳的感覺不只是來源於語法,雖然語法是很重要的原因。js裏面有許多語法的缺點:繁瑣雜亂的otype 引用、試圖調用原型鏈上層同名函數時的顯式僞多態以及不可靠、不美觀而且容易被誤解成“構造函數”的tructor。
除此之外,類設計其實還存在更進一步的問題。傳統面向類的語言中父類和子類、子類和實例之間其實是複製操作,但是在[[Prototype]] 中並沒有複製。
對象關聯代碼和行爲委託使用了[[Prototype]] 而不是將它藏起來,對比其簡潔性可以看出,類並不適用於JavaScript。
2、ES6中CLASS的使用
javascript傳統做法是當生成一個對象實例,需要定義構造函數,然後通過new的方式完成。
function StdInfo(){ = "job"; = 30; }ames = function (){ ("name:"+); }//得到一個學員信息對象var p = new StdInfo()
javacript中只有對象,沒有類。它是是基於原型的語言,原型對象是新對象的模板,它將自身的屬性共享給新對象。這樣的寫法和傳統面嚮對象語言差異很大,很容易讓新手感到困惑。
3、定義類
到了ES6添加了類,作爲對象的模板。通過class來定義一個類:
//定義類class StdInfo { constructor(){ = "job"; = 30; } //定義在類中的方法不需要添加function getNames(){ ("name:"+); }}//使用new的方式得到一個實例對象var p = new StdInfo();
上面的寫法更加清晰、更像面向對象編程的語法,看起來也更容易理解。
定義的類只是語法糖,目的是讓我們用更簡潔明瞭的語法創建對象及處理相關的'繼承。
//定義類class StdInfo { //...}(typeof StdInfo); //(StdInfo === tructor); //true
從上面的測試中可以看出來,類的類型就是一個函數,是一個“特殊函數”,指向的是構造函數。
函數的定義方式有函數聲明和函數表達式兩種,類的定義方式也有兩種,分別是:類聲明和類表達式。
4、類聲明
類聲明是定義類的一種方式,使用關鍵字class,後面跟上類名,然後就是一對大括號。把這一類需要定義的方法放在大括號中。
//定義類,可以省略constructorclass StdInfo { getNames(){ ("name:"+); }}// -------------------------------------//定義類,加上constructorclass StdInfo { //使用new定義實例對象時,自動調用這個函數,傳入參數 constructor(name,age){ = name; = age; } getNames(){ ("name:"+); }}//定義實例對象時,傳入參數var p = new StdInfo("job",30)
constructor是一個默認方法,使用new來定義實例對象時,自動執行constructor函數,傳入所需要的參數,執行完constructor後自動返回實例對象。
一個類中只能有一個constructor函數,定義多個會報錯。
constructor中的this指向新創建的實例對象,利用this往新創建的實例對象擴展屬性。
在定義實例對象時,不需要在初始化階段做一些事,可以不用顯示的寫constructor函數。如果沒有顯式定義,一個空的constructor方法會被默認添加,constructor(){}
5、類表達式
類表達式是定義類的另一種形式,類似於函數表達式,把一個函數作爲值賦給變量。可以把定義的類賦值給一個變量,這時候變量就爲類名。class關鍵字之後的類名可有可無,如果存在,則只能在類內部使用。
定義類 class後面有類名:
const People = class StdInfo { constructor(){ (StdInfo); //可以打印出值,是一個函數 }}new People();new StdInfo(); //報錯,StdInfo is not defined;
定義類 class後面沒有類名:
const People = class { constructor(){ }}new People();
立即執行的類:
const p = new class { constructor(name,age){ (name,age); }}("job",30)
立即執行的類,在類前要加上new。p爲類的實例對象。
6、不存在變量提升
定義類不存在變量提升,只能先定義類後使用,跟函數聲明有區別的。
//-----函數聲明-------//定義前可以先使用,因爲函數聲明提升的緣故,調用合法。func();function func(){}//-----定義類---------------new StdInfo(); //報錯,StdInfo is not definedclass StdInfo{}
7、EXTENDS繼承
使用extends關鍵字實現類之間的繼承。這比在ES5中使用繼承要方便很多。
//定義類父類class Parent { constructor(name,age){ = name; = age; } speakSometing(){ ("I can speek chinese"); }}//定義子類,繼承父類class Child extends Parent { coding(){ ("coding javascript"); }}var c = new Child();//可以調用父類的方法kSometing(); // I can speek chinese使用繼承的方式,子類就擁有了父類的方法。
如果子類中有constructor構造函數,則必須使用調用super。
//定義類父類class Parent { constructor(name,age){ = name; = age; } speakSometing(){ ("I can speek chinese"); }}//定義子類,繼承父類class Child extends Parent { constructor(name,age){ //不調super(),則會報錯 this is not defined //必須調用super super(name,age); } coding(){ ("coding javascript"); }}var c = new Child("job",30);//可以調用父類的方法kSometing(); // I can speek chinese
子類必須在constructor方法中調用super方法,否則新建實例時會報錯(this is not defined)。這是因爲子類沒有自己的this對象,而是繼承父類的this對象,然後對其進行加工。如果不調用super方法,子類就得不到this對象。
8、總結
好了,以上就是對ES6中類的簡單總結學習,希望本文的內容對大家的學習或者工作能帶來一定的幫助,如果有疑問大家可以留言交流,謝謝大家對的支持。
相關文章
-
JavaScript中的style.cssText使用教程分解
很多人用過 r、lay 等直接設置元素的.樣式屬性,但是 ext 用過的人就不多了。cssText 本質是什麼?cssText 的本質就是設置 HTML 元素的 style 屬性值。cssText 怎麼用?複製代碼 代碼如下:lementById("d1")ext = "color:re -
詳解JavaScript中的splice()使用方法
定義和用法splice() 方法用於插入、刪除或替換數組的元素。 語法ce(index,howmany,element1,.....,elementX) 參數 描述index 必需。規定從何處添加/刪除元素。該參數是開始插入和(或)刪除的數組元素的下標,必須 -
perl- javascript中class的機制
javascript是如何實現class的?下面YJBYS小編爲大家講解! FAQperl公衆號爲什麼要談javascript?瀏覽器客戶端是通過javascript對前端數據進行處理,服務器端是沒有權利知道明文密碼的。要分析Webqq不懂javascript不行 -
關於JavaScript中的類Class詳細介紹
在JavaScript中,可以使用類(Class)來實現面向對象編程(Object Oriented Programming)。不過,JavaScript中的類與Java中的有所不同,其相應的定義和使用也不一樣。JavaScript中類的定義在JavaScript中,所有從同一個原型對象 -
使用JavaScript實現Java的List功能
複製代碼 代碼如下:/*** js模擬java中的List*/var list = new Array();/*** 添加* @param {Object} object*/function add(object) {list[th] = object;}/*** 移除此列表中指定位置上的元素。* @param index 指定位置 -
javascript中String對象的slice()方法
本文較爲詳細的分析了javascript中String對象的slice()方法。分享給大家供大家參考。具體分析如下:此方法截取字符串中的`一段,並返回由被截取字符組成的新字符串。注:原字符串不會發生改變,返回值是一個新產生的字符串 -
javascript中setInterval的用法總結
javascript中的setInterval的函數主要是在製作動畫或其他間隔性渲染(操作)效果時,對操作方法按照一定時間間隔進行調用的函數。setInterval的表達式格式主要有:setInterval(fnname,time,par1,par2,);setInterval(obj,fnna -
關於 response方法的javascript asp教程第六課
response 對象:reponse是asp中六個對象之一。它代表了服務器端對瀏覽器的迴應。response有8種方法,9種屬性和一個集。在這一課,我們就重點講述方法。方法:在javascript中,asp方法使用括號。請注意依賴er的兩個方法,我們將在 -
Javascript中arguments對象的詳解和使用方法
一、arguments使用方法通過方括號語法訪問每一個元素var fun = function(one) { (arguments[0]); (arguments[1]); (arguments[2]);}fun(1, 2, 3)// 1// 2// 3通過length屬性,查看到底要幾個參數function fun() { ret -
關於JavaScript中的parse()的使用方法
關於JavaScript中的'parse()方法使用簡介Javascript e() 方法接受一個日期字符串,並返回自1970年1月1日午夜的毫秒數。語法e(datestring)注:括號內的數據是可選的下面是參數的詳細信息:datestring : 一個字符串,表示