10-class

class

ES6 提供了更加接近传统语言 **Java、C++** 的写法，引入了**Class（类）** 这个概念，作为对象的模板。通过 `class` 关键词，可以定义类。基本上，ES6 的 `class` 可以看作只是一个语法糖，它的绝大部分功能，ES5 都可以做到，新的 `class` 写法只是让对象原型的写法更加清晰、更加**面向对象编程**的语法而已。知识点：

• class 声明类
• constructor 定义构造函数初始化
• extends 继承父类
• super 调用父级构造方法
• static 定义静态方法和属性
• 父类方法可以重写

初体验：

// 手机
  function Phone(brand, price) {
    this.brand = brand
    this.price = price
  }
  // 添加方法
  Phone.prototype.call = function() {
    console.log('我可以打电话')
  }
  // 实例化对象
  let Huawei = new Phone('华为',5999)
  Huawei.call()
  console.log(Huawei, typeof Huawei) // Phone {brand: "华为", price: 5999} "object"
  // class
  class Shouji {
    // 构造方法  名字不能修改
    constructor(brand, price) {
      this.brand = brand
      this.price = price
    }
    // 方法必须使用该语法，不能使用 ES5 的对象完整形式
    call() {
      console.log('我可以打电话')
    }
  }
  let onePlus = new Shouji('1+',1999)
  console.log(onePlus, typeof onePlus) // Phone {brand: "1+", price: 1999} "object"

静态成员：

//   function Phone() {
//
//   }
//
//   // 这两个属性是属于函数对象的，不属于实例对象，这些称为静态成员
//   Phone.name = '手机'
//   Phone.change = function () {
//     console.log('我可以改变你世界')
//   }
// Phone.prototype.size = '5.5inch'
//   let nokia = new Phone()
//
//   console.log(nokia.name)
//   // nokia.change()
//   console.log(nokia.size)
  class Phone {
    // 静态属性
    static name = '手机'
    static change() {
      console.log('我可以改变世界')
    }
  }
  let nokia = new Phone()
  console.log(nokia.name) // undefined
  console.log(Phone.name) // 手机
// 对于 static 标注的属性是属性和方法，它是属于类而不属于实例对象

ES5的继承：

 // 手机
  function Phone(brand, price) {
    this.brand = brand
    this.price = price
  }
  Phone.prototype.call = function () {
    console.log('我可以打电话')
  }
  // 智能手机
  function SmartPhone(brand,price,color,size) {
    Phone.call(this,brand,price)
    this.color = color
    this.size = size
  }
  console.log(new Phone,typeof new Phone) // Phone {brand: undefined, price: undefined} "object"
  // 设置子级构造函数的原型
  SmartPhone.prototype = new Phone
  SmartPhone.prototype.constructor = SmartPhone
  // 声明子类的方法
  SmartPhone.prototype.photo = function () {
    console.log('我可以拍照')
  }
  SmartPhone.prototype.playGame = function () {
    console.log('我可以玩游戏')
  }
  const chuizi = new SmartPhone('锤子','2499','black','5.5inch')
  console.log(chuizi)

ES6类继承：

class Phone {
    constructor(brand, price) {
      this.brand = brand
      this.price = price
    }
    call() {
      console.log('打电话')
    }
  }
  class SmartPhone extends Phone {
    // 构造方法
    constructor(brand, price, color, size) {
      super(brand, price); // Phone.call(this,brand,price)
      this.color = color
      this.size = size
    }
    photo() {
      console.log('拍照')
    }
    playGame() {
      console.log('玩游戏')
    }
    call() { // 子类对父类的方法重写
      super.call() // 子类调用父类的同名方法
      console.log('我可以视频通话')
    }
  }
  const xiaomi = new SmartPhone('小米','799','黑色','4.7inch')
  xiaomi.call()
  xiaomi.photo()
  xiaomi.playGame()
  console.log(xiaomi)

get和set:

 // get 和 set
  class Phone {
    get price() {
      console.log('价格属性被获取了')
      return 'iloveyou'
    }
    set price(newVal) {
      console.log('价格属性被修改了',newVal)
    }
  }
  // 实例化对象
  let s = new Phone()
  console.log(s.price)
  s.price = 'free'