JavaScript 中的类使用方法

Question

一. 类的基本创建

实际上在 ES6 中的 class 相关语法实际上就是语法糖，绝大部分功能都能通过 ES5 实现，现在我们先看一下在 ES5 中如何创建一个对象：

// ES5 对象创建方法：
function Phone(brand,price){
  this.brand = brand;
  this.price = price;
}
Phone.prototype.call = function (message){
  console.info(this.brand+"能打电话："+message);
}

let huawei = new Phone("HUAWEI",5999);
huawei.call("你好，我是 xxxx");

在 ES6 椎间盘美国

class Phone{
  //构造方法，名字固定不能修改，在调用 new 关键字创建实例时被调用。
  constructor(brand ,price) {
    this.brand = brand;
    this.price = price;
  }

  call(message){
    console.info(this.brand+"能打电话："+message);
  }
}

let phone = new Phone("HUAWEI",5999);
phone.call("Hello")

二. 类中的静态成员

ES5 中的实现方式：

function Phone(brand,price){
  this.brand = brand;
  this.price = price;
}
Phone.desc = '手机'//定义静态属性
Phone.showDesc = function(){//定义静态方法
  console.log(this.desc);
}
Phone.showDesc();//调用静态方法

ES6 中的实现方式：

class Phone{
  static desc = '手机';
  static showDesc(){
    console.log(this.desc);
  }
}

三. 继承

ES5 中继承的实现：

function Phone(brand,price){
  this.brand = brand;
  this.price = price;
}
Phone.prototype.call = function (message){
  console.info(this.brand+"能打电话："+message);
}

//智能手机
function SmartPhone(brand,price,color,size){
  Phone.call(this,brand,price);
  this.color = color;
  this.size = size;
}
//设置子集构造函数的原型
SmartPhone.prototype = new Phone;
//声明子类的方法
SmartPhone.prototype.photo = function (){
  console.info(this.brand+"能拍照，颜色"+this.color);
}

let phone = new SmartPhone("锤子手机",5999,"红色",123);
phone.photo();

console.log(phone)

使用 ES6 实现类的继承：

//类的继承
class Phone{
  constructor(brand ,price) {
    this.brand = brand;
    this.price = price;
  }

  call(message){
    console.info(this.brand+"能打电话："+message);
  }
}

class SmartPhone extends Phone{
  constructor(brand ,price,color,size) {
    super(brand,price);
    this.color = color;
    this.size = size;
  }
  photo(){
    console.info(this.brand+"能拍照，颜色"+this.color);
  }
}

let smartPhone = new SmartPhone('锤子手机',5999,"红色",123);
smartPhone.photo();

四. get 和 set 方法

  class Phone {
    constructor(brand, price) {
      this._brand = brand;
      this._price = price;
    }

    get brand() { // 当我们获取对象属性时就会触发这个方法
      console.log("获取了一次 brand 属性")
      return this._brand;
    }

    set brand(value) {
      console.log("设置了一次 brand 属性")
      this._brand = value;
    }

  }
  let phone = new Phone("小米",4222);
  console.log(phone.brand);

输出：

获取了一次 brand 属性
小米