【ES6】class类与继承 (5 分钟就够了)

什么是Class ?

• class 类 的本质是 function 函数；
• ES6 语法糖，让对象原型的写法更加清晰、面向对象编程的语法；
• Class 定义 不会被提升，必须在访问前对类进行定义，否则就会报错。

Ⅰ、类的使用

1、constructor方法

class Person {
    constructor(name){
  		this.name = name;
  		this.age = 18 ;
    }
}
const  zhangSan = new Text('张三');  //  zhangSan.name => '张三'  zhangSan.age => 18
1
2
3
4
5
6
7

• new 实例化 Class类会 自动调用 该方法；
• 默认返回 实例对象 （ this ），和改造函数一样；
• 可以通过形参，传递实例化时的参数。

2、实例属性

class Person {
    constructor(){
  		this.getName= function(){ console.log('张三') } ;
    }
    getAge() { console.log('18') }
}
const  zhangSan = new Text();  
zhangSan.getName();  //正常执行
zhangSan.getAge();   //正常执行
1
2
3
4
5
6
7
8
9

• 写在 constructor() 内的 ”变量、方法“ 为 实例属性

写在 constructor 函数 内、外的方法都可以执行，那么区别在哪里呢 ？

class Person {
    constructor(){
  		this.getName= function(){ console.log('张三') } ;
    }
    getName() { console.log('李四') }
}
const  zhangSan = new Text();  
zhangSan.getName();  // 张三
1
2
3
4
5
6
7
8

• 说明 constructor 外的方法，实例化后是放在 实例的 _proto_ （原型链）上 ；
• 如果自己本身上没有，才会去原型链上去找。

在类里 constructor外 加方法 === Person.prototype 上加

3、静态属性

class Test {
  static hello() {
    console.log('hello Class');
  }
}
Test.hello();
1
2
3
4
5
6

• 通过 static 关键字创建静态方法，该方法不能被实例继承，可被 extends 方式继承。

在类里 static hello() === Test.hello = function(){ … }

Ⅱ、类继承的方式

1、实例继承 与 extends 关键字继承

①.实例继承

class Text{
    constructor(a){
        this.a=a;
    }
    fun(){ /*...*/ }
}
let  classA = new Text(1);
1
2
3
4
5
6
7

• constructor() 内的this都继承到了这个实例化对象中，
• constructor() 外的方法和 类.prototype上的方法 ，同样都继承到__proto__上，如果没有同名属性就去proto 上面去获取。

①.extends继承

class Father{
  fun(){ /*...*/ }
}
class Son extends Father{
  	constructor(age){
        super();
        this.age = age;
    }
}
1
2
3
4
5
6
7
8
9

• 子类 没有定义 constrcutor , 则会默认添加一个 ；
• 在constrcutor中调用super方法 , 相当于调用父类的构造函数；

2、super 方法

class Person {
constructor(x, y, color) {
    this.height= '180cm';
    this.weight= '60kg';
 }
static hello() { console.log('hello Class'); }
}

class Zhangsan extends Person {
  constructor(weight) {
    super(x, y);
    this.weight= weight;
  }
}
 Zhangsan.hello() //正常继承
 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

• 调用super函数是为了在子类中获得父类的this，调用之后this指向子类；
• super 方法一定要写到 this 前面 ，不然报错 ；
• 不调用 super 方法，子类就得不到 this对象 ；
• super 方法，如果不写要继承的属性， 默认全部继承。

Ⅲ、类 的 getter和setter

class Test {
  constructor() { /*...*/ }
  get prop() {
     return 123;
  }
  set prop(value) {
    console.log('set: '+ value);
  }
}

let inst = new MyClass();

inst.prop;      //  123
inst.prop = 111; // 'set: 111'
1
2
3
4
5
6
7
8
9
10
11
12
13
14

• 使用 场景并不多，class的get、set 和 ES5 一样，区别不大；
• 主要对属性设置存值函数和取值函数，拦截该属性的存取行为