ES2015+学习笔记系列（七）—— Class类

1、class类

作为对象模板，通过class关键字，可以定义类。

• 基本上，ES6的class可以看做知识一个语法糖，他的绝大部分功能，ES5都可以做到。
• 新的class写法只是让对象原型的写法更加清晰、更像面向对象的语法而已。

1.1、类定义

• 构造方法，名字必须为constructor，不可修改
• 方法必须使用ES6方法，不能使用ES5的对象完整形式

class Phone {
  constructor(brand, price) {
    this.brand = brand, 
    this.price = price;
  }
  call(){
    console.log('打电话');
  }
}
let phone = new Phone('Iphone','5毛');
console.log(phone);

1.2、class静态成员

函数是一个对象，[函数名]为函数对象；[new 函数名]获得的对象是实例对象

属于函数对象而不属于实例对象的属性和方法，称之为静态成员。则静态成员属于类不属于实例对象

1.2.1、ES5方式实例对象

• 实例对象和函数对象是不同的，属性和方法是不通的

//MPhone是函数对象，mPhone是实例对象
function MPhone(){

}
MPhone.name = '小米';
MPhone.call = function(){
  console.log('Hello mi fans');
}
let mPhone= new MPhone();
//对象上没有构造函数上的属性方法
console.log(mPhone.name);//undefined

• 实例对象和构造函数原型对象是相通的

function MPhone(){

}
MPhone.prototype.name = '小米';//给构造函数上添加属性
MPhone.prototype.call = function(){
  console.log('Hello mi fans');
}
let mPhone= new MPhone();
console.log(mPhone.name);//小米

1.2.2、ES6中class静态成员

静态成员属于类不属于实例对象

 class StaticPhone{
  static name = 'shouji';
  static change(){
    console.log('static方法');
  }
}
let nokia = new StaticPhone();
console.log(nokia.name);//undefined
console.log(StaticPhone.name);//手机

2、对象继承

2.1、ES5使用构造函数实现对象继承

//父级
function MPhone(brand, price) {
 this.brand = brand;
 this.price = price;
}
MPhone.prototype.call3 = function () {
 console.log("打电话");
};
//子级
function SmartPhone(brand, price, color, size) {
 //调用父级构造函数初始化代码,避免代码重写
 MPhone.call(this, brand, price);
 this.color = color;
 this.size = size;
}
//设置子级构造函数原型
SmartPhone.prototype = new MPhone(); //实例对象和构造函数原型上的属性方法是相通的
SmartPhone.prototype.constructor = SmartPhone;
//声明子级的方法(注意：实例上并不会出现此方法)
SmartPhone.photo1 = function () {
 console.log("函数对象（父级）方法");
};
//声明子级实例的方法
SmartPhone.prototype.photo = function () {
 console.log("实例对象（子级）方法");
};
//实例化
const hammer = new SmartPhone("锤子", 3333, "黑色", "5inch");
console.log(hammer);

2.2、ES6中class对象继承

* 继承方式：class 子类名 ***extends*** 父类名{}
* 子类中添加super()函数

class FatherClass {
  constructor(brand, price) {
    this.brand = brand;
    this.price = price;
  }
  call3() {
    console.log('class父级方法');
  }
}
class SonClass extends FatherClass {
  constructor(brand, price, color, size) {
    super(brand, price);
    this.color = color;
    this.size = size;
  }
  sonFun() {
    console.log('子类的方法');
  }
}
let sonClass = new SonClass('iPhone', 333, '星空灰', '4inch');
console.log(sonClass);

3、子类对父类方法的重写

• 子类不可以直接调用父类同名方法，super方法只能出现在constructor

4、class中getter和setter

• get通常对对象的动态属性进行封装
• set添加更多的控制

class GetSetClass {
  get price() {
    console.log('获取价格');
    return 'huoqu'
  }
  set price(newVal) {
    console.log('价格修改');
  }
}
let getSetClass = new GetSetClass();
console.log(getSetClass.price);
getSetClass.price = '124'