了解 JavaScript 中基于 class 语法的面向对象编程,为后续课程中的应用做好铺垫。

传统面向对象的编程序语言都是【类】的概念,对象都是由类创建出来,然而早期 JavaScript 中是没有类的,面向对象大多都是基于构造函数和原型实现的,但是 ECMAScript 6 规范开始增加了【类】相关的语法,使得 JavaScript 中的面向对象实现方式更加标准。

封装

class(类)是 ECMAScript 6 中新增的关键字,专门用于创建类的,类可被用于实现逻辑的封装。

实例成员和静态成员

  1. // ES6中的class,代替了ES5中的构造函数
  2. // 语法:
  3. // class 类名 { /* 类、对象的全部信息 */ }
  4. class Person {
  5. // 1. 实例对象的属性
  6. age = 20
  7. name = 'zhangsan'
  8. // 2. 实例对象的方法
  9. say() {
  10. console.log('会说话')
  11. console.log(this.age)
  12. }
  13. // 3. 静态属性
  14. static height = 180
  15. // 4. 静态方法
  16. static cook() {
  17. console.log('会做饭')
  18. }
  19. }
  20. // 实例化对象
  21. let p = new Person()
  22. console.log(p.age) // 调用实例对象的属性
  23. p.say() // 调用实例对象的方法
  24. console.log(Person.height) // 调用静态的属性
  25. Person.cook() // 调用静态的方法

总结:

  • 关键字 class 封装了所有的实例属性和方法
  • 类中封装的并不是变量和函数,因此不能使用关键字 letconstvar

总结:

  • static 关键字用于声明静态属性和方法
  • 静态属性和方法直接通过类名进行访问

    构造函数

    创建类时在类的内部有一个特定的方法 constructor ,该方法会在类被实例化时自动被调用,常被用于处理一些初始化的操作。 ```javascript class Person { // 下面的 constructor 方法,是类中一个特别的方法,一般叫做构造方法或构造函数 constructor(n, a) { // 在实例化一个具体的对象的时候(new Person的时候),这个方法会自动执行 // new Person()的时候,传递进来的参数,就是传给这个 constructor的 // console.log(‘这是构造函数’, n, a) this.name = n this.age = a // 利用constructor自动执行的特点,可以做一些初始化的工作 this.say() } say() { console.log(this.name, this.age, ‘会说话’) } cook() { console.log(‘会做饭’) } }

let p = new Person(‘zhangsan’, 20)

  1. 总结:
  2. - `constructor` 是类中固定的方法名,翻译为构造函数的意思
  3. - `constructor` 方法在实例化时立即执行
  4. - `constructor` 方法接收实例化时传入的参数
  5. - `constructor` 并非是类中必须要存在的方法
  6. <a name="zu9ur"></a>
  7. ## 继承
  8. <a name="EEvPO"></a>
  9. ### extends
  10. `extends` ECMAScript 6 中实现继承的简洁语法.<br />**super**<br />在继承的过程中子类中 `constructor` 中必须调 `super` 函数,否则会有语法错误
  11. ```javascript
  12. 总结:
  13. ● constructor 是类中固定的方法名,翻译为构造函数的意思
  14. ● constructor 方法在实例化时立即执行
  15. ● constructor 方法接收实例化时传入的参数
  16. ● constructor 并非是类中必须要存在的方法
  17. 2.2 继承
  18. extends
  19. extends 是 ECMAScript 6 中实现继承的简洁语法.
  20. super
  21. 在继承的过程中子类中 constructor 中必须调 super 函数,否则会有语法错误

总结:

  1. 子类如果不存在 constructor 则可以不调用 super()
  2. 子类存在 constructor 则必须调用 super()
  3. 在子类方法中,还能通过 super.xxx() 的方式调用父类方法

    ES6中字面量对象的简写

  • 对象的属性名 和 值(必须是变量),如果同名,则可以省略一个
  • 方法,可以简化为 方法名() {} ,这只是 function xxx() {} 的简化写法,并不是箭头函数 ```javascript let age = 20 let height = 180

let obj = { // 键: 值, // 键: 值, // age: age, // 键和值,同名。这种情况,可以省略一个 age, // height: height height, say() { console.log(this.age) } }

console.log(obj) obj.say() ```

写在最后

ECMAScript 6 中基于类的面向对象相较于构造函数和原型对象的面向对象本质上是一样的,基于类的语法更为简洁,未来的 JavaScript 中也都会是基于类的语法实现,当前阶段先熟悉基于类的语法,后面课程中会加强基于类语法的实践。