es6的class有什么用

這篇文章主要介紹了es6的class有什么用的相關(guān)知識(shí)，內(nèi)容詳細(xì)易懂，操作簡單快捷，具有一定借鑒價(jià)值，相信大家閱讀完這篇es6的class有什么用文章都會(huì)有所收獲，下面我們一起來看看吧。

es6的class關(guān)鍵字用于快速地定義“類”；class的本質(zhì)是function，它可以看作一個(gè)語法糖，讓對象原型的寫法更加清晰、更像面向?qū)ο缶幊痰恼Z法。提升class不存在變量提升，類的所有方法都定義在類的prototype屬性上面，在類的實(shí)例上面調(diào)用方法，其實(shí)就是調(diào)用原型上的方法。

基礎(chǔ)

• es6引入了Class（類）這個(gè)概念，class關(guān)鍵字用于快速地定義“類”。新的class寫法讓對象原型的寫法更加清晰、更像面向?qū)ο缶幊痰恼Z法，也更加通俗易懂。

• 實(shí)際上背后依然使用的 原型和構(gòu)造函數(shù)的概念。

• 嚴(yán)格模式 不需要使用use strict因?yàn)橹灰a寫在類和模塊內(nèi)，就只能使用嚴(yán)格模式。

• 提升class不存在變量提升 (由于繼承有關(guān) 必須確保子類在父類之后定義)。

• 類的所有方法都定義在類的prototype屬性上面，在類的實(shí)例上面調(diào)用方法，其實(shí)就是調(diào)用原型上的方法 原型方法可以通過實(shí)例對象調(diào)用，但不能通過類名調(diào)用，會(huì)報(bào)錯(cuò)

• 實(shí)際上 class只是一個(gè)語法糖 是構(gòu)造函數(shù)的另一種寫法

• (語法糖 是一種為避免編碼出錯(cuò) 和提高效率編碼而生的語法層面的優(yōu)雅解決方案 簡單說 一種便攜寫法 而已)

看代碼

class Person{
}
console.log(typeof Person)                               //funciton
console.log(Person.prototype.constructor === Person)     //true

使用看代碼
用法和使用 構(gòu)造函數(shù)一樣  通過new 來生成對象實(shí)例

class person2 {
}
let json = new person2;

屬性和方法

定義在constructor 內(nèi)的屬性和方法 即調(diào)用在this上 屬于實(shí)例屬性和方法   否則屬于原型屬性和方法

class Person {
  constructor (name) {
    this.name = name            //constructor內(nèi)定義的方法和屬性是實(shí)例對象自己的，
  }
  say () {                      //而constructor外定義的方法和屬性則是所有實(shí)例對象可以共享的 注意!
    console.log('hello')
  }
}
let jon = new Person()
jon.hasOwnPrototype('name')     //true
jon.hasOwnPrototype('say')      //false

靜態(tài)方法

不需要通過實(shí)例對象，可以直接通過類來調(diào)用的方法，其中的 this 指向類本身

class Person {
  static doSay () {
    this.say()
  }
  static say () {
    console.log('hello')
  }
}
Person.doSay()              //hello
***********************************************************************************************
//靜態(tài)方法可以被子類繼承
class Sub extends Person { 
}
Sub.doSay() // hello

//靜態(tài)方法可以通過類名調(diào)用，不能通過實(shí)例對象調(diào)用，否則會(huì)報(bào)錯(cuò)
class Person {
    static sum(a, b) {
        console.log(a + b)
    }
}
var p = new Person()
Person.sum(1, 2)  // 3
p.sum(1,2)        //  TypeError p.sum is not a function

name屬性

name 屬性返回了類的名字 即緊跟在class后面的名字。

class Person {
}
Person.name // Person

this 默認(rèn)指向類的實(shí)例。

類的方法內(nèi)部如果含有this 坑兒 一但單獨(dú)使用該方法 很可能就會(huì)報(bào)錯(cuò)
如果 this指向不對 1使用箭頭函數(shù) 2在構(gòu)造方法中綁定this

取值函數(shù)（getter）和存值函數(shù)（setter）

class Person {
  get name () {
    return 'getter'
  }
  set name(val) {
    console.log('setter' + val)
  }
}

let jon = new Person()
jon.name = 'jon' // setter jon
jon.name         // getter

//類聲明不可以重復(fù)

class Person {}
class Person {}
// TypeError Identifier 'Person' has already been declared

constructor關(guān)鍵字

• constructor 方法

• constructor 方法是類的默認(rèn)方法，通過 new 命令生成對象實(shí)例時(shí)，自動(dòng)調(diào)用該方法（默認(rèn)返回實(shí)例對象 this）。

• 一個(gè)類必須有 constructor 方法，如果沒有顯式定義，一個(gè)空的 constructor 方法會(huì)被默認(rèn)添加。

• 一個(gè)類只能擁有一個(gè)名為 “constructor” 的特殊方法，如果類包含多個(gè) constructor 的方法，則將拋出 一個(gè) SyntaxError 。

class Person {
   constructor(x, y) {
    this.x = x    //默認(rèn)返回實(shí)例對象 this
    this.y = y
  }
  toString() {
    console.log(this.x + ', ' + this.y)
  }
}

constructor 啥子?

每一個(gè)類必須要由一個(gè)constructor 如果沒有顯示聲明 js引擎會(huì)自動(dòng)添加一個(gè)空的構(gòu)造函數(shù)

class person3 {
}
//等于 
class person3 {
    constructor(){}
}

注意 在類中聲明方法的時(shí)候，方法前不加 function 關(guān)鍵字 方法之間不要用逗號(hào)分隔，否則會(huì)報(bào)錯(cuò) 類的內(nèi)部所有定義的方法，都是不可枚舉的（non-enumerable）

注意 與es5一樣 實(shí)例的屬性除非 顯示定義在其本身(即this對象)上 否則都是定義在原型上面

class Point {
  constructor(x,y){
    this.x = x;
    this.y = y;
    
  }
  toString(){
    return `this.x + this.y`;
  }
}
var point = new Point();
point.toString()    //(2,3)
point.hasOwnProperty("x")        //true
point.hasOwnProperty("y")        //true   在這x&&y都是實(shí)例對象point自身的屬性(因?yàn)槎x在this變量上) // 所以返回true 
point.hasOwnProperty("toString") //false  toString是原型對象的屬性 (因?yàn)槎x在Point類上)             //所以返回false 
point._proto_.hasOwnProperty("toString") //true  

//加兩個(gè)實(shí)例 
var p1 = new Point();
var p2 = new Point();
p1._proto_ === p2._proto_                //true    這個(gè)不建議使用 
//上面代碼中 p1和p2 都是point的實(shí)例 他們的原型都是Point.prototype 所以 _proto_屬性是相等的 
//即是說 可以通過實(shí)例的_proto_ 屬性為 "類" 添加方法

super關(guān)鍵字

super關(guān)鍵字用于訪問和調(diào)用 父類上的函數(shù)，可以調(diào)用父類的構(gòu)造函數(shù) 也可以調(diào)用父類的普通函數(shù)

 class Father {
        constructor (surname){
            this.surname = surname
        }
        say(){
            console.log("你的名字" + this.surname)  //你的名字錘子
        }
    }
    //在這里 子繼承父類
    class Son extends Father {
        constructor(surname,name){
            super(surname)
            this.name = name 
        }
        say(){
            super.say()
            console.log('調(diào)用普通' + this.name)    //調(diào)用普通鐵的
        }
    }
    var son = new Son('錘子',"鐵的")
    son.say()
    console.log(son)   //打印  {surname: "錘子", name: "鐵的"
    //在子類的構(gòu)造函數(shù)如果使用 super 調(diào)用父類的構(gòu)造函數(shù) 必須寫在 this之前  
    //還可以 調(diào)用父類的普通方法 
    //在es6中 類沒變量提升 必須先定義 才能通過實(shí)例化對象類里面的 共有屬性 和方法 通過this 調(diào)用
    //類 里面的this 代表什么
    //constructor 里面this指向?qū)嵗龑ο?nbsp; 
    // 方法里面this 代表 方法的 調(diào)用者

extends繼承

繼承即子承父業(yè)現(xiàn)實(shí)中 程序中子類可以繼承父類中的一些 方法和屬性
繼承時(shí)面向?qū)ο蟮?一大特性 可以減少代碼的編寫 方便公共內(nèi)容的抽取 關(guān)鍵字extends

 class Father {
        constructor (surname){
            this.surname = surname
        }
        say(){                                     //父級(jí)Father里面有一個(gè)方法 say()  
            console.log("你的名字" + this.surname)
        }
    }

    class Son extends Father {                     //在這里Son 繼承了 Father父級(jí)里面的方法   關(guān)鍵字extends 
    }

    var son = new Son('錘子')                      //new 出來實(shí)例   
    son.say()                                      //打印  你的名字錘子

類的方法

class Person  {
         constructor(name, age) {    
    // 構(gòu)造函數(shù)，接收一個(gè)name和age
             this.name = name
             this.age = age 
         }
         say(){
    // 一個(gè)方法  //注意類里面的方法不加function關(guān)鍵字  方法與方法之間不用,號(hào)隔開 
             console.log("你好",this.name)
         }
         // ....sayWhat(){} saySome(){}
    }
     var person  = new Person('老王',44)
    //調(diào)用方法
     person.say()  //老王
    //在類的實(shí)例上調(diào)用方法 其實(shí)就是調(diào)用 原型上的方法

類的表達(dá)式

與函數(shù)一樣 calss 也可以使用表達(dá)式的形式定義  采用class表達(dá)式 可以寫出立即執(zhí)行的Class!!
注意與函數(shù)表達(dá)式類似 類表達(dá)式在他們被求值前也不能使用(即賦值變量 之前調(diào)用) 但 與函數(shù)定義不同 雖然函數(shù)聲明可以提升 但類不能

類表達(dá)式（類定義）
類表達(dá)式可以是被命名的或匿名的

匿名類

let Person = class {
  constructor(x, y) {
    this.x = x
    this.y = y
  }
}

命名的類

let Person = class Person {
  constructor(x, y) {
    this.x = x
    this.y = y
  }
}
const Mycalss = class Me {
    getClassName(){
        return Me.name;
    }
};     //這里用 表達(dá)式(即賦值變量一個(gè)) 
       //注意! 這個(gè)類的名字是Mycalss而不是 Me Me只在Class的內(nèi)部代碼可用 指代當(dāng)前類
let inst = new Mycalss();
inst.getClassName()   //Me   
Me.name               //報(bào)錯(cuò)  Me只在Class內(nèi)部有定義

采用class表達(dá)式 可以寫出立即執(zhí)行的Class!!

let person = new class {
    constructor(name) {
       this.name = this.name; 
    }    
    sayname(){
        console.log(this.name);
    }
}("常東東")         //這段代碼中class是立即執(zhí)行的實(shí)例

補(bǔ)充案例

class Animal {                       //class定義了一個(gè)“類”
        constructor(){
            this.type = 'animal'     //有一個(gè)constructor方法，這就是構(gòu)造方法   //this關(guān)鍵字則代表實(shí)例對象
        }                            //constructor內(nèi)定義的方法和屬性是實(shí)例對象自己的，而constructor外定義的方法和屬性則是所有實(shí)例對象可以共享的 注意!
        says(say){
            console.log(this.type + ' says ' + say)
        }
    }
    let animal = new Animal()
    animal.says('hello')    //animal says hello

    class Cat extends Animal {       //通過extends關(guān)鍵字實(shí)現(xiàn)繼承  //定義了一個(gè)Cat類，該類通過extends關(guān)鍵字，繼承了Animal類的所有屬性和方法。
        constructor(){
            super()                  //super關(guān)鍵字 它指代父類的實(shí)例（即父類的this對象）子類必須在constructor方法中調(diào)用super方法，否則新建實(shí)例時(shí)會(huì)報(bào)錯(cuò)。
            this.type = 'cat'        //這是因?yàn)樽宇悰]有自己的this對象，而是繼承父類的this對象，然后對其進(jìn)行加工。如果不調(diào)用super方法，子類就得不到this對象。   
        }
    }
    let cat = new Cat()
    cat.says('hello')       //cat says hello

關(guān)于“es6的class有什么用”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對“es6的class有什么用”知識(shí)都有一定的了解，大家如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道。