前端培训-中级阶段（31）- Class 的基本语法、Class 的继承（2019-12-26期）

前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，如今前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提高技术水平，打牢基础知识的中心思想，咱们开课啦（每周四）。

前言BB

ECMAScript 2015 中引入的类（Class）其实是基于原型的继承的语法糖。不是新的面向对象的继承模型。

其实我用的并很少，写写小活动啥的也用不上。
以前用来写了个小后台，ThinkJS 内部就使用的 Class 的形式。
体验了一下，而后由于写起来不太爽放弃了，vue + TypeScript。
也是体验了一下，Angular 。

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 一个对象的时候，作了几件事？

1. 初始化一个空对象
2. 绑定 this
3. 执行构造函数
4. 返回这个对象（不须要 return 来返回）

由于类是能够继承的，因此能够使用 super 关键字来调用父类的构造函数。

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()

内部属性声明

相似于以前的闭包内的变量

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()。

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'

验证

New

提高&死区

严格模式

微信公众号：前端linong

参考文献

1. 前端培训目录、前端培训规划、前端培训计划
2. https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Classes/Class_elements
3. https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Classes
4. https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Classes/extends