js _proto__ 和prototype

object的_proto_ 和 函数的prototype
prototype是函数的一个属性，这个属性是一个指针，用来指向一个对象；_proto是一个对象拥有的内置隐式原型属性，js内部通过_proto来寻找原型链属性，假如对象内部不存在某个属性，就会从_proto中去寻找，_proto也会有自己的_proto_，直到找到未知，这就是我们所说的原型链的概念。

• _proto_ 和 prototype

function Base () {
  this.name = 'Base';
}
var instance = new Base();

// console.log()
instance.__proto__ === Base // false
instance.__proto__ === Base.prototype  // true
instance.__proto__.constructor  === Base.prototype  // false
instance.__proto__.constructor  === Base // true

Base是构造函数，如果进行new Base()操作，那么首先会进行初始化一个空{}，然后将{}的 proto 即隐式原型指向Base的prototype，然后执行了 Base.call({}) 将this作用域交予{}，然后就完成了实例化。
所以instance的proto 是等于Base的prototype的，那么Base.prototype.constructor 自然是指向本身了。

function Base () {
  this.name = 'Base';
}
var instance = new Base();
instance.__proto__.constructor === Base // true
instance.__proto__.constructor === Base.prototype.constructor  // true
instance.__proto__ === Base.prototype // true

由上述代码，我们应该已经理解了 _proto_和prototype的区别了
如果改变一下代码：

function Base () {
  this.name = 'Base';
}
Base.prototype.play = () => { console.log('play') };
var instance = new Base();
// console.log()
instance

打印的instance是存在下列属性，一个是显示的name，一个是隐式的proto，展开proto就是Base的prototype，即隐式的构造函数和proto，还有一个显式的play函数；

• extends
  es6

class Base {
  constructor () {
    this.name = 'Base';
  }
  play () {
     console.log('play');
  }
};
class A extends Base {
  constructor () {
    super();
    this.age = 15;
  }
}
const instanceA = new A();

// console.log()
instanceA.name // Base
instanceA.age  // 15

如何实现的呢？
由上面的知识，我们可以知道 当执行一个new() 操作之后，新变量的proto 指向构造函数的prototype，那么我们大胆地打印一下instanceA.proto和A.prototype看一下结果。

class Base {
  constructor () {
    this.name = 'Base';
  }
  play () {
     console.log('play');
  }
};
class A extends Base {
  constructor () {
    super();
    this.age = 15;
  }
}
const instanceA = new A();
// console.log()
instanceA.__proto__    //  打印结果是一个拥有constructor  和__proto__的object，即A的实例化结果
A.prototype   // 打印结果是一个拥有constructor  和__proto__的object，即 ？的实例化结果
instanceA.__proto__ === A.prototype  // true 那么上面的？号应该是Base无疑了

由此可以看出es6 class 的语法糖是如何构造的了。
如果我们使用一个class继承另外一个class，就是将本身的prototype指向父class的实例化了
看看es5的代码：

function Base () { this.name = 'Base' };
function A () { this.age = 15 };
cosnt instanseA = new A();

那么如何才能让A继承到Base呢？

function Base () { this.name = 'Base' };
Base.prototype.play = () => {  console.log('play') };
function A () { this.age = 15 };
A.prototype = new Base();
cosnt instanseA = new A();
// console.log()
instanseA.name // 'Base'
instanseA.age // 15 
instanseA.play // function

原理剖析：A的实例化是instanseA ，当读取instanseA上面的属性name时，发现不存在，只能从proto上面寻找，instanseA 的proto指向的是A的prototype，A的prototype下面有两个属性，一个是constructor，一个是proto，发现A上面也没有；然后我们写了这么一行代码，是A.prototype = new Base();也就是说通过instanseA.proto 找到了A的prototype，就找到了Base的实例化，Base的实例化应该是有两个属性，一个是name，一个是proto，然而发现只能读取到name，并没有play函数，然后又从Base的proto上面查找，我们写了Base.prototype.play是一个函数，所以在proto 上面就找到了play函数。
一个函数的prototype上面挂在的函数可以在实例化的proto_找到。
以上原理总结一句话就是：
父类属性放构造函数, 父类方法放原型链, 子类prototype指向父实例, 子类构造函数调用父类构造函数, 子类构造函数指回自己)