ES6中class的使用

用戶84 發布于2019-08-23 18:34 / 1100人閱讀

摘要：如果不指定一個構造函數方法則使用一個默認的構造函數。一個類中出現多次構造函數方法將會拋出一個錯誤。四關鍵字作為函數時，指向父類的構造函數。五類的屬性和屬性作為構造函數的語法糖，同時有屬性和屬性，因此同時存在兩條繼承鏈。

一、class的定義與基本用法

1.class的定義

ECMAScript 2015 中引入的 JavaScript 類實質上是 JavaScript 現有的基于原型的繼承的語法糖。類語法不會為JavaScript引入新的面向對象的繼承模型。

2.定義類
用class定義類有兩種方法：類表達式和類聲明

1.類聲明

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

2.類表達式

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

以上需要說明的點：
1.類聲明/類表達式不會向函數聲明/函數表達式一樣提升。你要訪問一個類，就必須先聲明。
2.ES6類的constructor函數相當于ES5的構造函數。
3.類中定義方法時，前面不用加function，后面不得加 ,。

二、繼承
extends 關鍵字在類聲明或類表達式中用于創建一個類作為另一個類的一個子類。

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


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

也可以擴展傳統的基于函數的“類”（構造函數）

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.

請注意，類不能繼承常規（非可構造）對象。如果要繼承常規對象，可以改用

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.

以上需要說明的點：
1.類必須使用new調用，否則會報錯。
2.子類必須在constructor方法中調用super方法，否則新建實例時會報錯。這是因為子類沒有自己的this對象，而是繼承父類的this對象，然后對其進行加工。如果不調用super方法，子類就得不到this對象。

三、constructor方法

constructor 是一種用于創建和初始化class創建的對象的特殊方法。如果不指定一個構造函數(constructor)方法, 則使用一個默認的構造函數(constructor)。

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

以上需要說明的點：
1.constructor方法默認返回實例對象（即this）。
2.在一個類中只能有一個名為 “constructor” 的特殊方法。一個類中出現多次構造函數 (constructor)方法將會拋出一個 SyntaxError 錯誤。

四、super關鍵字

1.super作為函數時，指向父類的構造函數。super()只能用在子類的構造函數之中，用在其他地方就會報錯。

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

super作為對象時，指向父類的原型對象。

class A {
  p() {
    return 2;
  }
}
 
class B extends A {
  constructor() {
    super();
    console.log(super.p()); // 2
  }
}
super指向父類的原型對象，此時super.p()就相當于A.prototype.p()。
以上需要說明的點：
1.由于super指向父類的原型對象，所以定義在父類實例上的方法或屬性，是無法通過super調用的。

五.類的prototype屬性和__proto__屬性

Class 作為構造函數的語法糖，同時有prototype 屬性和__proto__屬性，因此同時存在兩條繼承鏈。
1.子類與父類
1.子類的__proto__屬性，表示構造函數的繼承，總是指向父類。
2.子類prototype屬性的__proto__屬性，表示方法的繼承，總是指向父類的prototype屬性。

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

2.實例的 proto 屬性

子類實例的 proto 屬性的 proto 屬性，指向父類實例的 proto 屬性。也就是說，子類的原型的原型，是父類的原型。

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

云服務器 GPU云服務器 es6中的class es6class java中class類 linux中的使用

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/105457.html

ES6+ class中代碼的真正樣子

摘要：一用定義一個空類在中在中結論這個結果很清晰，原來中的類在中也是定義一個構造函數，然后返回出來。這篇文章用代碼對比的方式解釋ES6中的類如果用我們熟悉的ES5來看是什么樣的。一、用class定義一個空類在ES6中： class Person { } 在ES5中： var Person = (function () { function Person() { } ...

PascalXie 2019-08-20 15:11 評論0 收藏0
ES6 系列之 Babel 是如何編譯 Class 的(上)

摘要：前言在了解是如何編譯前，我們先看看的和的構造函數是如何對應的。這是它跟普通構造函數的一個主要區別，后者不用也可以執行。該函數的作用就是將函數數組中的方法添加到構造函數或者構造函數的原型中，最后返回這個構造函數。前言在了解 Babel 是如何編譯 class 前，我們先看看 ES6 的 class 和 ES5 的構造函數是如何對應的。畢竟，ES6 的 class 可以看作一個語法糖，...

shadajin 2019-08-23 12:48 評論0 收藏0
ES6深入淺出 Classes

摘要：一步，一步前進一步深入淺出之。是構造函數，可在里面初始化我們想初始化的東西。類靜態方法大多數情況下，類是有靜態方法的。中添加類方法十分容易類方法和靜態方法是同一個東西在的語法中，我們可以使用關鍵字修飾方法，進而得到靜態方法。一步，一步前進の一步 ES6深入淺出之Classes。翻譯的同時亂加個人見解，強烈推薦閱讀原作者的文章，言簡意賅。es6-classes-in-depth 類語...

array_huang 2019-08-23 10:45 評論0 收藏0
React Native填坑之旅--class（番外篇）

摘要：構造函數定義偵探類作為例子。里的既是類的定義，也是構造函數。在構造函數中定義的實例方法和屬性在每一個實例中都會保留一份，而在原型中定義的實例方法和屬性是全部實例只有一份。無論React還是RN都已經邁入了ES6的時代，甚至憑借Babel的支持都進入了ES7。ES6內容很多，本文主要講解類相關的內容。構造函數定義偵探類作為例子。 ES5的類是如何定義的。 function ES5D...

TwIStOy 2019-08-20 11:37 評論0 收藏0
ES6 中Class創建對象與繼承實現

摘要：使用類創建實例對象也是直接對類使用命令，跟中構造函數的用法一致。中沒有構造函數，作為構造函數的語法糖，同時有屬性和屬性，因此同時存在兩條繼承鏈。子類的屬性，表示構造函數的繼承，總是指向父類。 1 Class in ES6 ES6提出了類(Class)的概念，讓對象的原型的寫法更像面向對象語言寫法。 ES6中通過class定義對象，默認具有constructor方法和自定義方法，但是包含...

zhou_you 2019-08-20 14:40 評論0 收藏0
ES6 中Class創建對象與繼承實現

摘要：使用類創建實例對象也是直接對類使用命令，跟中構造函數的用法一致。中沒有構造函數，作為構造函數的語法糖，同時有屬性和屬性，因此同時存在兩條繼承鏈。子類的屬性，表示構造函數的繼承，總是指向父類。 1 Class in ES6 ES6提出了類(Class)的概念，讓對象的原型的寫法更像面向對象語言寫法。 ES6中通過class定義對象，默認具有constructor方法和自定義方法，但是包含...

wind5o 2019-08-01 16:25 評論0 收藏0