class是es6的新特性嗎

這篇文章主要講解了“class是es6的新特性嗎”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來(lái)研究和學(xué)習(xí)“class是es6的新特性嗎”吧！

class是es6新特性。在ES6中，class（類）作為對(duì)象的模板被引入，可以通過(guò)class關(guān)鍵字定義類；新的class寫(xiě)法讓對(duì)象原型的寫(xiě)法更加清晰、更像面向?qū)ο缶幊痰恼Z(yǔ)法，也更加通俗易懂。類（class）是ECMAScript中新的基礎(chǔ)性語(yǔ)法糖結(jié)構(gòu)，雖然ES6類表面上看起來(lái)可以支持正式的面向?qū)ο缶幊蹋珜?shí)際上它背后使用的仍然是原型和構(gòu)造函數(shù)的概念，讓對(duì)象原型的寫(xiě)法更加清晰、

class是es6新特性。在ES6中，class (類)作為對(duì)象的模板被引入，可以通過(guò) class 關(guān)鍵字定義類。

ES6 提供了更接近傳統(tǒng)語(yǔ)言的寫(xiě)法，新引入的class關(guān)鍵字具有正式定義類的能力。類（class）是ECMAScript中新的基礎(chǔ)性語(yǔ)法糖結(jié)構(gòu)，雖然ECMAScript 6類表面上看起來(lái)可以支持正式的面向?qū)ο缶幊?，但?shí)際上它背后使用的仍然是原型和構(gòu)造函數(shù)的概念，讓對(duì)象原型的寫(xiě)法更加清晰、更像面向?qū)ο缶幊痰恼Z(yǔ)法。

一、class簡(jiǎn)介

傳統(tǒng)的JS只有對(duì)象的概念，沒(méi)有class類的概念，因?yàn)镴S是基于原型的面向?qū)ο笳Z(yǔ)言，原型對(duì)象特點(diǎn)就是將屬性全部共享給新對(duì)象。

ES6引入了class類這個(gè)概念，通過(guò)class關(guān)鍵字可以定義類，這就是更符合我們平時(shí)所理解的面向?qū)ο蟮恼Z(yǔ)言。

class Person{   //定義一個(gè)名為Person的類
    // 構(gòu)造函數(shù)，用來(lái)接受參數(shù)
    constructor(x,y){
        this.x = x;    //this代表的是實(shí)例對(duì)象
        this.y = y;
    }
    todoSome(){  //這是個(gè)類的方法，不需要加function，有多個(gè)方法也不用逗號(hào)隔開(kāi)
        alert(this.x + "的年齡是" +this.y+"歲");
    }
}
export default  Person;

二、靜態(tài)方法和靜態(tài)屬性

靜態(tài)方法和靜態(tài)屬性，是使用static關(guān)鍵字的屬性和方法

2.1 靜態(tài)方法

static classMethod(){
		console.log('123456')
	}

• 靜態(tài)方法不會(huì)被子類繼承，子類不能調(diào)用

• 靜態(tài)方法中的this，指向的是類class，不是類的實(shí)例。因此靜態(tài)方法只能通過(guò)類名來(lái)調(diào)用，不能通過(guò)實(shí)例來(lái)調(diào)用

let p = new Point();
p.classMethod();  // 報(bào)錯(cuò)

2.2 靜態(tài)屬性


static prop = 1 ;  // 靜態(tài)屬性

• 靜態(tài)屬性不能被子類繼承，子類不能調(diào)用

• 靜態(tài)屬性只能通過(guò)類名來(lái)調(diào)用，不能通過(guò)類的實(shí)例來(lái)調(diào)

三、class繼承extends

• class可以用過(guò)extends關(guān)鍵字來(lái)繼承

• ES6繼承，子類構(gòu)造函數(shù)中必須使用super()。因?yàn)镋S6繼承是先將父類實(shí)例對(duì)象的屬性和方法，加到this上面，然后再調(diào)用子類的構(gòu)造函數(shù)修改這個(gè)this

• 如果子類沒(méi)有定義constructor方法，super()會(huì)默認(rèn)添加上

• 子類會(huì)繼承父類的方法和屬性，但是靜態(tài)方法和屬性必須通過(guò)子類的類名來(lái)調(diào)用

import classtest from "./classtest";  //先引入父類
class Man extends classtest{
    constructor(x,y){   //構(gòu)造函數(shù)盡量與父類參數(shù)保持一致
        super();   //利用super()關(guān)鍵字，這個(gè)必須放在子類構(gòu)造函數(shù)中的第一位置
        this.x = x;
        this.y = y;
    }
}
export default  Man;

四、class的取值函數(shù)getter和存值函數(shù)setter

getter、setter就是給class的屬性讀值、傳值用的。

取值函數(shù)getter和存值函數(shù)setter可自定義賦值和取值行為，當(dāng)一個(gè)屬性只有g(shù)etter沒(méi)有setter的時(shí)候，這個(gè)屬性就是只讀屬性，不能賦值，第一次初始化也不行。

如果變量定義為私有的（定義在類的花括號(hào)外面），就可以只使用getter不使用setter。

let data=[1,2,3,4];  //放在類外面，屬于私有變量，可以只讀取
class Person{
    // 構(gòu)造函數(shù)
    constructor(x,y){
        this.x = x;
        this.y = y;
    }
    get x(){
        console.log('獲得name');
        return this._name;    //get讀取屬性
    }
    set x(x){
        console.log("設(shè)置name");  
        this._name=x;   //set給屬性賦值
    }
    get data(){
        return data;   //只讀屬性，屬性返回的值只能是私有變量
    }
    todoSome(){
        alert(this.x + "的年齡是" +this.y+"歲");
    }
    static dayin(){
        alert("dayin");
    }
}
export default  Person;

如何使用：

 var test= new this.$myutils.classtest('haha','18');
  test.x="haha3";   //改變了實(shí)例化時(shí)候的x的值
  test.todoSome();  //輸出：haha3的年齡是18歲。這里就已經(jīng)不是實(shí)例化時(shí)候的haha了
  console.log(test.data);   //結(jié)果：打印[1,2,3,4]

五、注意事項(xiàng)：

1、在類中定義方法時(shí)候，不可以給方法加上function關(guān)鍵字，因?yàn)镴S中構(gòu)造函數(shù)是用function定義的，兩個(gè)隔開(kāi)。

2、所有方法不要用逗號(hào)隔開(kāi)，否則會(huì)報(bào)錯(cuò)。

感謝各位的閱讀，以上就是“class是es6的新特性嗎”的內(nèi)容了，經(jīng)過(guò)本文的學(xué)習(xí)后，相信大家對(duì)class是es6的新特性嗎這一問(wèn)題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！