浅谈ES6 类的原型

ES6新增了类的概念 , 即关键字 class , 并且也实现了继承 extends 等这样的语法糖, 那么相比于ES5中构造函数的方式 , 新写法最大的好处是让我们对象原型的写法更加清晰明了, 而构造函数的 prototype 属性 ,在ES6 的类上仍然存在,

class Father {}
class Children extends Father {
  constructor() {
    super();
  }
}

console.log(Children.__proto__); //  [Function: Father] 子类作为一个对象时,它的 __proto__ 属性 , 指向他的父类
console.log(Children.prototype.__proto__); // Father {}  子类作为一个函数(构造函数的本质也是一个函数)时 , 它的prototype属性的__proto__属性 , 指向父类的 prototype (Father.prototype)

也就是说同时存在着两条链 .
那么我们再来看看 类的 实例的 proto属性

class Father {}
class Children extends Father {
  constructor() {
    super();
  }
}
const f = new Father();
const c = new Children();

console.log(c.prototype); //undefined  注意此时 c 作为 一个实例对象  , 是没有 prototype属性的
console.log(c.__proto__)  // Children {}   
console.log(c.__proto__.__proto__)  // Father {} 
console.log(f.__proto__);  // Father {}
最后两个 log , 子类实例对象的__proto__属性的__proto__ 属性, 指向父类实例对象的__proto__ 属性;
则我们可以发现 子类的原型的原型 是指向父类的原型 , 虽然这里有点绕,原型这个东西本来就是比较抽象,但也不难理解(孩子的爸爸的爸爸 === 爸爸的爸爸  ^.^ ),如果有个关系图在或许会清晰点 , 后期有时间补上

关于类中的constructor, super , 也有很多需要了解的 , 这直接决定了子类是否可以继承到父类 , 而且 super 关键字 还有不同的使用场景 , 这里不再详说 , 后期会单独出的.