33 ES6中的类和对象

技术交流QQ群:1027579432，欢迎你的加入！

欢迎关注我的微信公众号：CurryCoder的程序人生

1.面向对象

• 面向对象的思维特点：
  • a.抽取(抽象)对象共有的属性和行为组织(封装)成一个类(模板)；
  • b.对类进行实例化，获取类的对象；
• 面向对象编程考虑的是有哪些对象，按照面向对象的思维特点，不断的创建对象，使用对象，指挥对象做事情。

2.对象

• 现实生活中，万物皆对象，对象是一个具体的事物，看得见摸得着的事物。
• 在JavaScript中，对象是一组无序的相关属性和方法的集合，所有的事物都是对象。例如：字符串、数值、数组、函数等。
• 对象是由属性和方法组成。
  • 属性：事物的特征，在对象中用属性来表示(常用名词)；
  • 方法：事物的行为，在对象中用方法来表示(常用动词)；

3.类class

• 在ES6中新增了类的概念，可以使用class关键字声明一个类，之后以这个类来实例化对象。
• 类是抽象了对象的公共部分，它泛指某一大类；对象特指某一个，通过类实例化出来的一个具体的对象。

4.创建类

• 语法：

  class 类名{
      // class body
  }
  

• 创建实例：

  var xx = new 类名();
  

• 注意：类必须使用new实例化对象。

5.类constructor构造函数

• constuctor()方法是类的构造函数(默认方法)，用于传递参数，返回实例对象，通过new命令生成对象实例时，自动调用该方法。如果没有显示定义，类内部就会自动为我们创建一个constructor()。
• 注意：
  • 通过class关键字创建类，类名习惯性定义首字母大写；
  • 类里面有个constructor函数，可以接收传递过来的参数，同时返回实例对象；
  • constructor函数只要new生成实例时，就会自动调用这个函数，如果我们不写这个函数，类也会自动生成这个函数；
  • 生成实例new不能省略；
  • 注意语法规范，创建类，类名后不加小括号；生成实例，类名后加小括号；构造函数不需要加function。

6.类添加方法

• 语法：

  class Star {
      // 构造函数
      constructor(uname, age) {
          this.uname  = uname;  
          this.age = age;
      }
      // 方法
      sing(){
          console.log('我正在唱歌...');
      }
  }
  

• 注意：
  • 类中的所有方法都不要写function；
  • 多个方法之间不需要添加逗号分隔；

7.类的继承

• 程序中的继承：子类可以继承父类的一些属性和方法。

  class Father{
      constructor(){
  
      }
  
      money(){
          console.log(100);
      }
  }
  // 继承
  class Son extends Father{
  
  }
  
  var son = new Son();
  son.money(); 
  

8.super关键字

• super关键字用于访问和调用对象父类上的函数。可以调用父类的构造函数，也可以调用父类的普通函数。
• 就近原则(继承中属性或方法的查找原则)：
  • 继承中，如果实例化子类输出一个方法，先看子类有没有这个方法，如果有就先执行子类的方法；
  • 继承中，如果子类中没有这个方法，就去查找父类中有没有这个方法。如果有，就执行父类的这个方法；
• 语法：

  class Son extends Father{
      constructor(x, y) {
          // super必须在子类this之前调用!
          super(x, y);
          this.x = x;
          this.y = y;
          // 利用super调用父类的构造函数
          
      }
      // 子类独有的方法
      subtract(){
          console.log(this.x - this.y);
      }
  }
  
  var son = new Son(5, 4);
  son.subtract();
  son.sum();
  

• 注意：子类在构造函数中使用super,必须要放到this之前(必须先调用父类的构造函数，再使用子类的构造函数)。

9.三个注意点

• ES6中类没有变量提升，所以必须先定义类，才能通过类实例出对象；
• 类中的共有的属性和方法一定要加this使用；
• 类中的this指向问题；
  • constructor中的this指向的是实例对象；
  • 方法中的this指向这个方法的调用者；

10.资料下载

• 笔记及代码，欢迎 star,follow,fork......