ES6 学习笔记 —— （四）class & 继承

笔记内容为 尚硅谷Web前端ES6教程，涵盖ES6-ES11 教学课程笔记整理

1. 引入 class 概念

• ES5 其实可以做到 calss 的大部分功能，ES6 的 class 其实就是一个语法糖，只是让 ES5 中的对象原型的写法更加清晰、更像面向对象编程的语法而已

1.1 ES5 实现面向对象编程

• 用 ES5 的方式，用构造函数加原型，实例化一个对象，以手机为例

1.2 ES6 实现面向对象编程

• ES6 通过类 class 语法来实现面向对象编程，以手机为例
  • 构造方法 constructor(){} 这个名字不能修改，使用 new 类名 的时候，这个方法是可以自动执行的
  • 类里的方法必须使用 方法名(){} 的形式，不能 使用 ES5 的对象完整形式 方法名: function(){}

2. class 静态成员

• ES5 中，静态成员 属于构造函数对象，但不属于实例对象的属性或方法

• ES6 中，static 标注的属性和方法，属于类 class，不属于实例对象

3. 类的继承

3.1 ES5 实现继承

• 通过 构造函数 实现继承
  • 通过 Phone.call(this, ...) 改变 this 的指向，使 Phone 中的 this 指向 SmartPhone
  • SmartPhone.prototype = new Phone; 这句之后，SmartPhone 的实例对象 chuizi 的原型上就会有 Phone 原型上的方法 call
  • SmartPhone.prototype.constructor = SmartPhone; 这句是将子构造函数的原型对象中的 constructor 指回原来的构造函数 SmartPhone

• 图解 ES5 的继承，下图是一个其它的例子，并不是手机的例子

3.2 ES6 实现继承

• 子类使用 extends 关键字来继承父类
• 子类的 constructor 中，使用 super 来调用父类的构造函数 constructor

4. class 中的 getter 和 setter

4.1 get

• 对某个属性获取，使用 get
• get 方法的返回值，就是 s.price 的结果，因此控制台输出的是 iloveyou

4.2 set

• 对某个属性设置，使用 set