ES6 class类

ES6 class类知识点梳理

大概从几个方面来讲解ES6 class类和传统的构造函数的区别。

1. 必须要有constructor()方法 ，默认返回this(即构造函数的实例)
2. 除非this指定，所有的方法都在类的原型链上（Point.prototype）,并且所有的方法都是不可枚举的。

class Point {
    constructor(a, b) {
        this.a =a;
        this.b = b;
        return Object.create(null)
    }
    toString(){
        console.log(`a: ${this,a} ====== b: ${this.b}  `)
    }
}
var a = new Point() 
a.hasOwnProperty('a') // ture
a.hasOwnProperty('b') // ture
a.hasOwnProperty('constructor') // false
Object.keys(a)  // []
Object.keys(Point.prototype)  // []
Object.getOwnPropertyNames(Point.prototype)  //["constructor", "toString"]

1. 可以通过改变constructor() 方法的return值，来改变实例的值。

class Point {
    constructor(a, b) {
        this.a =a;
        this.b = b;
        return Object.create(null)
    }
    toString(){
        console.log(`a: ${this,a} ====== b: ${this.b}  `)
    }
}
var a = new Point() 
a // {}

1. 所有和实例共享同一个原型链，这个和es5一致

let a = new Point();
let b = new Point();
a.__proto__ === b.__proto__

1. class表达式写法以及name属性（紧跟着class关键值后面的类名）

   和函数一样，class也有表达式的写法，只能用于内部调用。如果用于外部就会报错。

// 这里类名就是myClass,而不是me，me只是给内部调用，如果不需要可以直接省略
const myClass = class me {
  getName() {
    return me.name
  }
}
let a = new myClass() 
a.getName()  // me

1. 不存在变量提升，可以利用表达式写法，立刻生成实例。
2. class类对属性值的get和set关键值，拦截属性的获取。所有的get和set都是定义在属性的descriptor中的

class hh {
  constructor() {}
  get prop() {
    return 'getter'
  }
  set prop(val) {
    console.log(`setter ${val}`)
  }
}

let inst = new hh()
inst.prop = 'fs'  //  "setter fs"
inst.prop    //  getter

1. class的静态方法： 在方法前面加上static，只能被类本身调用，不可以被实例调用。静态方法可以被子类继承。

2. new.target属性的使用

   • new targe在函数内部等于构造函数本身，用于类中，指向类本身
   • 可以用于创建只能继承不能实例的类

3. 用过extends关键字实现继承，通过super返回父类的实例，从而在子类中使用this。

4. static 静态方法也会被子类继承。

5. 通过Object.getOwnPrototypeOf(子类) 获取子类的父类，由于子类的prototype被重写，等于父类的原型。

   class A {
     static hello() {
       console.log('hello world');
     }
   }
   
   class B extends A {
     
   }
   // 通过下面这句，extends继承相当于是  B.__proto__ === A ,所以B的原型链上面可以找到A，实现了继承.正常情况下，一个对象的__proto__会指向构造函数的原型  
   A.__proto__ === Function.prototype  // 函数都是Function构造函数创建
   Object.getPrototypeOf(B)  === A  
   
   let obj = new B()  // 现在实例化B
   // obj.__proto__  => B.prototype  
   // => B.prototype.__proto__ => A.prototype
   // A.prototype.__proto__ => Object.prototype
   

6. super关键字

   • 作为函数 （只存在于子类的构造函数中）
   • 作为对象 （普通方法中作为 父类的原型） （静态方法中指向 父 类）
   • 在通过super调用父类的方法时，this指向的是子类
   • super绑定了子类的this

7. 类的 prototype 和 __proto__属性

   • 子类的__proto__指向父类

   • 子类prototype属性的__proto__指向父类的prototype属性

     B.__proto === A;
     B.prototype.__proto__ === A.prototype;
     

8. extends关键字多种继承

   • 对象
   • 不存在继承
   • null

9. 实例__proto__属性

   • 实例的__proto__