ES6系列---【面向对象语法】

标签：共享   let   因此   实现   构造   pre   代码   new   直接   

1 基本结构

  // ES6使用 class 来声明一个类
  class Person {
    // 类中必须要有构造函数，即使不写，js引擎会自动创建一个空的constructor。
    // 构造函数的作用：主要是为实例化空对象添加属性
    // 构造函数在类的实例化时，会自动运行。因此可以将实例化后需要自动运行的方法放在构造函数内。
    constructor(name,sex){
      this.name = name;
      this.sex = sex;
      this.say();
    }
    // 普通的方法
    say(){
      console.log( "我是"+ this.name );
    }
    // ES6新增 静态方法（静态函数）
    static play(){
      console.log("我是静态方法");
    }
  }
  // 实例化
  let p1 =  new Person("张三","男");
  let p2 = new Person("rose","女");
  // 所有实例对象共享原型对象
  console.log( p1.__proto__ == p2.__proto__ ); 
  console.log( p1 );
  // 静态方法只能使用 类名.静态方法() 调用
  Person.play()

2 类中的静态方法

? 正常情况下所有类中定义的方法，都会被实例继承。但如果一个方法前加上static关键字，就表示该方法不会被实例继承。也不能被实例调用，而是直接通过类来调用，这个被称为“静态方法”。

  // 静态方法只能使用 类名.静态方法() 调用
  Person.play()

3 实现继承

? ES6 子类中使用 extends 即可实现继承

// 定义子类，继承Person父类
// ES6 使用 extends 关键词实现继承，比ES5的修改原型对象实现继承，要清晰和方便。
class Girl extends Person{

}
// 即使子类是个空壳，目前也可以使用父类的静态方法
Girl.play()

子类的基本构造：

// 定义子类，继承Person父类
// ES6 使用 extends 关键词实现继承，比ES5的修改原型对象实现继承，要清晰和方便。
class Girl extends Person{
  constructor(){
    // 子类的构造函数中第一行需先调用 super()，用于实现继承
    super();
  }
  go(){

  }
  say(){
    
  }
}

如果想在子类中添加自己的属性：

1） 直接在子类的构造函数中添加

  constructor(name,sex,age){
    // 子类的构造函数中第一行需先调用 super()，用于实现继承
    super();
    this.name = name;
    this.sex = sex;
    this.age = age;
  }

2）在super()添加父类的属性名，实现对父类的代码的“借用”

  constructor(name,sex,age){
    // 子类的构造函数中第一行需先调用 super()，用于实现继承
    super(name,sex);
    this.age = age;
  }

3）假如子类和父类有重名的方法，可以使用super 关键词实现子类对父类方法的调用。

class Girl extends Person{
  constructor(name,sex,age){
    // 子类的构造函数中第一行需先调用 super()，用于实现继承
    super(name,sex);
    this.age = age;
  }
  go(){
    super.say();//调用父类的say方法
  }
  // say(){
  //   console.log("我是子类的say方法");
  // }
}

? 实际上，super有两种使用方式：

? 1） 在子类的构造函数的第一行，作为函数使用，用于实现子类对父类的属性代码“借用”

? 2） 作为对象使用，实现子类对父类的重名的方法的调用

ES6系列---【面向对象语法】

标签：共享   let   因此   实现   构造   pre   代码   new   直接   

原文地址：https://www.cnblogs.com/chenhaiyun/p/14664094.html