理解 class 用法和 get set 的使用

西南_张家辉

发布于 2021-02-02 09:59:37

6650

发布于 2021-02-02 09:59:37

文章被收录于专栏：张家辉的树屋

说明

了解 es6+ 的 class 的使用
了解其中 set 和 get 的使用情况
适用：es6+ 初学者

class es7 类的使用

一 class extends super

class 声明创建一个基于原型继承的具有给定名称的新类。你也可以使用类表达式定义类。但是不同于类表达式，类声明不允许再次声明已经存在的类，否则将会抛出一个类型错误。
申明一个类，Polygon, 然后 Square 来继承 Polygon，只能在构造函数中使用 super()。并且必须在使用 this 关键字前调用。

使用 extends 创建子类/ super 关键字用于调用对象的父对象上的函数。

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

class Lion extends Cat {
  speak() {
    super.speak();
    console.log(this.name + ' roars.');
  }
}
复制代码

static 静态方法

class Point {
    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));
复制代码

二 get 的使用

get语法将对象属性绑定到查询该属性时将被调用的函数。

var obj = {
  log: ['a', 'b', 'c'],
  get latest() {
    if (this.log.length == 0) {
      return undefined;
    }
    return this.log[this.log.length - 1];
  }
}

console.log(obj.latest);
// expected output: "c"
console.log(obj)
// {
//    latest: "c"
//    log: ["a", "b", "c"]
// }

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

http