国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

首頁 > 開發 > JS > 正文

JavaScript ES6中CLASS的使用詳解

2024-05-06 16:33:01
字體:
來源:轉載
供稿:網友

前言

對于javascript來說,類是一種可選(而不是必須)的設計模式,而且在JavaScript這樣的[[Prototype]] 語言中實現類是很蹩腳的。

這種蹩腳的感覺不只是來源于語法,雖然語法是很重要的原因。js里面有許多語法的缺點:繁瑣雜亂的.prototype 引用、試圖調用原型鏈上層同名函數時的顯式偽多態以及不可靠、不美觀而且容易被誤解成“構造函數”的.constructor。

除此之外,類設計其實還存在更進一步的問題。傳統面向類的語言中父類和子類、子類和實例之間其實是復制操作,但是在[[Prototype]] 中并沒有復制。

對象關聯代碼和行為委托使用了[[Prototype]] 而不是將它藏起來,對比其簡潔性可以看出,類并不適用于JavaScript。

ES6中CLASS的使用

javascript傳統做法是當生成一個對象實例,需要定義構造函數,然后通過new的方式完成。

function StdInfo(){  this.name = "job";        this.age = 30;      }StdInfo.prototype.getNames = function (){  console.log("name:"+this.name);        }//得到一個學員信息對象var p = new StdInfo()

javacript中只有對象,沒有類。它是是基于原型的語言,原型對象是新對象的模板,它將自身的屬性共享給新對象。這樣的寫法和傳統面向對象語言差異很大,很容易讓新手感到困惑。

定義類

到了ES6添加了類,作為對象的模板。通過class來定義一個類:

//定義類class StdInfo {  constructor(){    this.name = "job";          this.age = 30;     }  //定義在類中的方法不需要添加function  getNames(){    console.log("name:"+this.name);     }}//使用new的方式得到一個實例對象var p = new StdInfo();

上面的寫法更加清晰、更像面向對象編程的語法,看起來也更容易理解。

定義的類只是語法糖,目的是讓我們用更簡潔明了的語法創建對象及處理相關的繼承。

//定義類class StdInfo {  //...}console.log(typeof StdInfo); //functionconsole.log(StdInfo === StdInfo.prototype.constructor); //true

從上面的測試中可以看出來,類的類型就是一個函數,是一個“特殊函數”,指向的是構造函數。

函數的定義方式有函數聲明和函數表達式兩種,類的定義方式也有兩種,分別是:類聲明和類表達式。

類聲明

類聲明是定義類的一種方式,使用關鍵字class,后面跟上類名,然后就是一對大括號。把這一類需要定義的方法放在大括號中。

//定義類,可以省略constructorclass StdInfo {  getNames(){    console.log("name:"+this.name);  }}// -------------------------------------//定義類,加上constructorclass StdInfo {  //使用new定義實例對象時,自動調用這個函數,傳入參數  constructor(name,age){    this.name = name;          this.age = age;     }    getNames(){    console.log("name:"+this.name);     }}//定義實例對象時,傳入參數var p = new StdInfo("job",30)

constructor是一個默認方法,使用new來定義實例對象時,自動執行constructor函數,傳入所需要的參數,執行完constructor后自動返回實例對象。

一個類中只能有一個constructor函數,定義多個會報錯。

constructor中的this指向新創建的實例對象,利用this往新創建的實例對象擴展屬性。

在定義實例對象時,不需要在初始化階段做一些事,可以不用顯示的寫constructor函數。如果沒有顯式定義,一個空的constructor方法會被默認添加,constructor(){}

類表達式

類表達式是定義類的另一種形式,類似于函數表達式,把一個函數作為值賦給變量。可以把定義的類賦值給一個變量,這時候變量就為類名。class關鍵字之后的類名可有可無,如果存在,則只能在類內部使用。

定義類 class后面有類名:

const People = class StdInfo {  constructor(){    console.log(StdInfo); //可以打印出值,是一個函數  }}new People();new StdInfo(); //報錯,StdInfo is not defined;

定義類 class后面沒有類名:

const People = class {  constructor(){  }}new People();

立即執行的類:

const p = new class {  constructor(name,age){    console.log(name,age);  }}("job",30)

立即執行的類,在類前要加上new。p為類的實例對象。

不存在變量提升

定義類不存在變量提升,只能先定義類后使用,跟函數聲明有區別的。

//-----函數聲明-------//定義前可以先使用,因為函數聲明提升的緣故,調用合法。func();function func(){}//-----定義類---------------new StdInfo(); //報錯,StdInfo is not definedclass StdInfo{}

EXTENDS繼承

使用extends關鍵字實現類之間的繼承。這比在ES5中使用繼承要方便很多。

//定義類父類class Parent {  constructor(name,age){    this.name = name;    this.age = age;  }  speakSometing(){    console.log("I can speek chinese");  }}//定義子類,繼承父類class Child extends Parent {  coding(){    console.log("coding javascript");  }}var c = new Child();//可以調用父類的方法c.speakSometing(); // I can speek chinese

使用繼承的方式,子類就擁有了父類的方法。

如果子類中有constructor構造函數,則必須使用調用super。

//定義類父類class Parent {  constructor(name,age){    this.name = name;    this.age = age;  }  speakSometing(){    console.log("I can speek chinese");  }}//定義子類,繼承父類class Child extends Parent {  constructor(name,age){    //不調super(),則會報錯 this is not defined    //必須調用super    super(name,age);  }  coding(){    console.log("coding javascript");  }}var c = new Child("job",30);//可以調用父類的方法c.speakSometing(); // I can speek chinese

子類必須在constructor方法中調用super方法,否則新建實例時會報錯(this is not defined)。這是因為子類沒有自己的this對象,而是繼承父類的this對象,然后對其進行加工。如果不調用super方法,子類就得不到this對象。

總結

好了,以上就是對ES6中類的簡單總結學習,希望本文的內容對大家的學習或者工作能帶來一定的幫助,如果有疑問大家可以留言交流,謝謝大家對VeVb武林網的支持。


注:相關教程知識閱讀請移步到JavaScript/Ajax教程頻道。
發表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發表
主站蜘蛛池模板: 石景山区| 白城市| 汤原县| 盐城市| 东山县| 安吉县| 甘德县| 三门峡市| 沂水县| 普兰县| 仙居县| 轮台县| 阜康市| 安多县| 潮州市| 肥东县| 金塔县| 成都市| 浏阳市| 翁牛特旗| 云林县| 桐柏县| 奈曼旗| 西充县| 鄂尔多斯市| 延川县| 辽阳市| 郴州市| 颍上县| 蛟河市| 咸阳市| 三河市| 聂荣县| 黄石市| 靖边县| 汾西县| 来凤县| 泾川县| 云南省| 浦城县| 安新县|