前端培訓-中級階段（31）- Class 的基本語法、Class 的繼承（2019-12-26期）

時間 2020-01-08

原文原文鏈接

前端最基礎的就是 HTML+CSS+Javascript。掌握了這三門技術就算入門，但也僅僅是入門，如今前端開發的定義已經遠遠不止這些。前端小課堂（HTML/CSS/JS），本着提高技術水平，打牢基礎知識的中心思想，咱們開課啦（每週四）。前端

前言BB

ECMAScript 2015 中引入的類（Class）其實是基於原型的繼承的語法糖。不是新的面向對象的繼承模型。vue

其實我用的並很少，寫寫小活動啥的也用不上。
以前用來寫了個小後臺，ThinkJS 內部就使用的 Class 的形式。
體驗了一下，而後由於寫起來不太爽放棄了，vue + TypeScript。
也是體驗了一下，Angular 。segmentfault

Class

能夠理解爲特殊的函數（必須 New。聲明提高，死區。執行在嚴格模式）微信

聲明

class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }
}
class Circle {
  constructor(point, r) {
    this.point = point;
    this.r = r;
  }
}

等價於閉包

function Circle(point, r){
    this.point = point;
    this.r = r;
}
new Circle([50, 50], 10)

構造函數 Constructor

當 New 一個對象的時候，作了幾件事？函數

初始化一個空對象
綁定 this
執行構造函數
返回這個對象（不須要 return 來返回）

由於類是能夠繼承的，因此能夠使用 super 關鍵字來調用父類的構造函數。this

class Circle {
  constructor(point, r) {
    // super() //這樣來調用父類的構造函數
    this.point = point;
    this.r = r;
  }
}

原型鏈方法

class Circle {
  constructor(point, r) {
    this.point = point;
    this.r = r;
  }
  // 原型鏈方法，實例化以後能夠計算面積
  get area() {
    console.log('get area')
    return this.calcArea()
  }
  // 原型鏈方法，實例化以後能夠計算面積
  calcArea() {
    return Math.PI * Math.pow(this.r, 2)
  }
}
//new Circle([50, 50], 20)

原型方法、靜態方法、靜態字段

class Point {
    static staticField = 'static field';
    constructor(x, y) {
        this.x = x;
        this.y = y;
    }

    static distance(a, b) {
        const dx = a.x - b.x;
        const dy = a.y - b.y;

        return Math.hypot(dx, dy);
    }
}

const p1 = new Point(5, 5);
const p2 = new Point(10, 10);

console.log(Point.distance(p1, p2));

屬性聲明

class Point {
    x=0
    y=0
    constructor(x, y) {
        if(x)this.x = x;
        if(y)this.y = y;
    }
}
new Point()

內部屬性聲明

相似於以前的閉包內的變量spa

class Rectangle {
  #height = 0;
  #width;
  constructor(height, width) {    
    this.#height = height;
    this.#width = width;
    console.log(this.#height)
  }
}
rect = new Rectangle(1,2)
// rect.#height

繼承

若是子類中存在構造函數，則須要在使用 this 以前首先調用 super()。3d

class Animal { 
  name='Breaux';
  constructor(name) {
    this.name = name;
  }
  
  speak() {
    console.log(this.name + ' makes a noise.');
  }
}

class Dog extends Animal {
  age = 0;
  constructor(age) {
    super('Mitzie')
    this.age = age;
  }
  speak() {
    console.log(this.name + ' barks.'+`age: `+this.age);
  }
}

var d = new Dog(10);
d.speak();// 'Mitzie barks.age: 10'