ES6中class的使用

用戶84 發(fā)布于2019-08-23 18:34 / 1111人閱讀

摘要：如果不指定一個(gè)構(gòu)造函數(shù)方法則使用一個(gè)默認(rèn)的構(gòu)造函數(shù)。一個(gè)類(lèi)中出現(xiàn)多次構(gòu)造函數(shù)方法將會(huì)拋出一個(gè)錯(cuò)誤。四關(guān)鍵字作為函數(shù)時(shí)，指向父類(lèi)的構(gòu)造函數(shù)。五類(lèi)的屬性和屬性作為構(gòu)造函數(shù)的語(yǔ)法糖，同時(shí)有屬性和屬性，因此同時(shí)存在兩條繼承鏈。

一、class的定義與基本用法

1.class的定義

ECMAScript 2015 中引入的 JavaScript 類(lèi)實(shí)質(zhì)上是 JavaScript 現(xiàn)有的基于原型的繼承的語(yǔ)法糖。類(lèi)語(yǔ)法不會(huì)為JavaScript引入新的面向?qū)ο蟮睦^承模型。

2.定義類(lèi)
用class定義類(lèi)有兩種方法：類(lèi)表達(dá)式和類(lèi)聲明

1.類(lèi)聲明

class Person{
  constructor(x,y){
     this.x=x;
     this.y=y;
  }
  tostring(){
      return this.x+this.y
} }

2.類(lèi)表達(dá)式

 // 匿名類(lèi)
    var Person=class {
        constructor(x,y){
           this.x=x;
           this.y=y;
        }
        tostring(){
           return this.x+this.y
        }
    }
    // 命名類(lèi)
    var Person = class Person {
        constructor(x, y) {
            this.x = x;
            this.y = y;
        }
        tostring() {
            return this.x + this.y
        }
    }

以上需要說(shuō)明的點(diǎn)：
1.類(lèi)聲明/類(lèi)表達(dá)式不會(huì)向函數(shù)聲明/函數(shù)表達(dá)式一樣提升。你要訪問(wèn)一個(gè)類(lèi)，就必須先聲明。
2.ES6類(lèi)的constructor函數(shù)相當(dāng)于ES5的構(gòu)造函數(shù)。
3.類(lèi)中定義方法時(shí)，前面不用加function，后面不得加 ,。

二、繼承
extends 關(guān)鍵字在類(lèi)聲明或類(lèi)表達(dá)式中用于創(chuàng)建一個(gè)類(lèi)作為另一個(gè)類(lèi)的一個(gè)子類(lèi)。

//父類(lèi)
class Animal{
    constructor(name,age){
        this.name=name;
        this.age=age;
    }
    tostring() {
        return (this.name + "的年齡是：" + this.age)
    }
}


//子類(lèi)
class Dogs extends Animal {
    constructor(name,age,code) {
        super(name, age); //  調(diào)用父類(lèi)的 constructor(name,age)  
        this.code = code;
    }
    toString() {
        return this.color + " 的" + super.toString(); //  調(diào)用父類(lèi)的 toString()  
    }      
}

也可以擴(kuò)展傳統(tǒng)的基于函數(shù)的“類(lèi)”（構(gòu)造函數(shù)）

function Animal (name) {
  this.name = name;  
}
Animal.prototype.speak = function () {
  console.log(this.name + " makes a noise.");
}

class Dog extends Animal {
  speak() {
    super.speak();
    console.log(this.name + " barks.");
  }
}

var d = new Dog("Mitzie");
d.speak();//Mitzie makes a noise.  Mitzie barks.

請(qǐng)注意，類(lèi)不能繼承常規(guī)（非可構(gòu)造）對(duì)象。如果要繼承常規(guī)對(duì)象，可以改用

var Animal = {
  speak() {
    console.log(this.name + " makes a noise.");
  }
};

class Dog {
  constructor(name) {
    this.name = name;
  }
}

Object.setPrototypeOf(Dog.prototype, Animal);// If you do not do this you will get a TypeError when you invoke speak

var d = new Dog("Mitzie");
d.speak(); // Mitzie makes a noise.

以上需要說(shuō)明的點(diǎn)：
1.類(lèi)必須使用new調(diào)用，否則會(huì)報(bào)錯(cuò)。
2.子類(lèi)必須在constructor方法中調(diào)用super方法，否則新建實(shí)例時(shí)會(huì)報(bào)錯(cuò)。這是因?yàn)樽宇?lèi)沒(méi)有自己的this對(duì)象，而是繼承父類(lèi)的this對(duì)象，然后對(duì)其進(jìn)行加工。如果不調(diào)用super方法，子類(lèi)就得不到this對(duì)象。

三、constructor方法

constructor 是一種用于創(chuàng)建和初始化class創(chuàng)建的對(duì)象的特殊方法。如果不指定一個(gè)構(gòu)造函數(shù)(constructor)方法, 則使用一個(gè)默認(rèn)的構(gòu)造函數(shù)(constructor)。

class Animal {
}
 
// 等同于
class Animal {
  constructor() {}
}

以上需要說(shuō)明的點(diǎn)：
1.constructor方法默認(rèn)返回實(shí)例對(duì)象（即this）。
2.在一個(gè)類(lèi)中只能有一個(gè)名為 “constructor” 的特殊方法。一個(gè)類(lèi)中出現(xiàn)多次構(gòu)造函數(shù) (constructor)方法將會(huì)拋出一個(gè) SyntaxError 錯(cuò)誤。

四、super關(guān)鍵字

1.super作為函數(shù)時(shí)，指向父類(lèi)的構(gòu)造函數(shù)。super()只能用在子類(lèi)的構(gòu)造函數(shù)之中，用在其他地方就會(huì)報(bào)錯(cuò)。

class Animal{
   constructor(){
      console.log(new.target.name);
   } 
} 
class Dogs extends Animal {
   constructor() {
      super(); 
  } 
} 
new Animal() // Animal
new Dogs() // Dogs

super作為對(duì)象時(shí)，指向父類(lèi)的原型對(duì)象。

class A {
  p() {
    return 2;
  }
}
 
class B extends A {
  constructor() {
    super();
    console.log(super.p()); // 2
  }
}
super指向父類(lèi)的原型對(duì)象，此時(shí)super.p()就相當(dāng)于A.prototype.p()。
以上需要說(shuō)明的點(diǎn)：
1.由于super指向父類(lèi)的原型對(duì)象，所以定義在父類(lèi)實(shí)例上的方法或?qū)傩?，是無(wú)法通過(guò)super調(diào)用的。

五.類(lèi)的prototype屬性和__proto__屬性

Class 作為構(gòu)造函數(shù)的語(yǔ)法糖，同時(shí)有prototype 屬性和__proto__屬性，因此同時(shí)存在兩條繼承鏈。
1.子類(lèi)與父類(lèi)
1.子類(lèi)的__proto__屬性，表示構(gòu)造函數(shù)的繼承，總是指向父類(lèi)。
2.子類(lèi)prototype屬性的__proto__屬性，表示方法的繼承，總是指向父類(lèi)的prototype屬性。

class A {}  
class B extends A {}  
B.__proto__ === A // true  
B.prototype.__proto__ === A.prototype // true

2.實(shí)例的 proto 屬性

子類(lèi)實(shí)例的 proto 屬性的 proto 屬性，指向父類(lèi)實(shí)例的 proto 屬性。也就是說(shuō)，子類(lèi)的原型的原型，是父類(lèi)的原型。

class A{}  
class B extends A{}  
let a = new A();  
let b = new B();  
console.log(b.__proto__ === a.__proto__);//false  
console.log(b.__proto__.__proto__ === a.__proto__);//true