JavaScript你必须了解的知识---prototype和__proto__

先说结论：prototype是函数上默认的属性，指向所有实例共享的方法和属性，新创建的（实例）对象可以通过__proto__指向创造它的prototype访问共有属性和方法

prototype（原型对象）

每一个JS对象一定关联着另外一个JS对象(也许是null，但是它一定是唯一的)。这个另外的对象就是所谓的原型对象。每个对象从它的原型对象中继承属性和方法

上面是js权威指南上对原型的说明，看完之后是不是仍然一脸懵逼，别着急在了解prototype之前先说一说创建对象的一些事情

对象的创建

1. 对象直接量

   const person={
       name:'zhangsan',
       age:10
   }
   

   

2. new 运算符创建对象

   new运算符创建并初始化对象，new后面跟着一个函数调用，这里的函数叫做构造函数

   const person = new Object({name:'zhangsan',age:10})//创建一个对象
   

3. Object.create()

   Object.create()是一个静态函数，它创建一个新对象，第一个参数就是对象的原型，可以通过任意对象创建新对象

   const person = Object.create({name:'zhangsan',age:10})
   

   

从上述三种方法看，对象的创建和函数都脱不了干系，这个函数就是构造函数

注：方法1:对象直接量创建是一个语法糖，其实际创建过程如下

const person = new Object({});
person.name = 'zhangsan';
person.age = 10;

prototype说明

我们创建的每个函数都有一个prototype（原型）属性，这个属性是一个指针，指向一个对象，
而这个对象的用途是包含可以由特定类型的所有实例共享的属性和方法

每一个构造函数默认都有一个对象，这个对象就是prototype

prototype默认存在一个constructor属性，指向它的构造函数（除Function外）

prototype默认存在一个__proto__属性，指向创造它的prototype（除Function外）

Object的prototype：

Date的prototype：

Function的prototype：

下面用一个例子，透过例子看看prototype和__proto__到底有什么关系

function Person(name,age){
    this.name = name;
    this.age = age
}
const person = new Person('zhangsan',10)

_proto_（原型链）

相信看完上面的例子，对__proto__会有一定的了解

每个实例对象（ object ）都有一个私有属性称之为 proto 指向它的构造函数的原型对象（ prototype ）。该原型对象也有一个自己的原型对象( _proto_ ) ，层层向上直到一个对象的原型对象为 null。根据定义，null 没有原型，并作为这个原型链中的最后一个环节。

__proto__指向

1. 对象直接量__proto__指向

2. new 运算符创建对象__proto__指向

   //1. 对象直接量
   const person={
       name:'zhangsan',
       age:10
   }
   //2. new 运算符创建对象
   const person = new Object({name:'zhangsan',age:10})//创建一个对象
   
   person.__proto__  = Object.prototype
   

   这两者创建出来的对线本质上都是一样的，person是由Object构造出来的，其__proto__指向Object的prototype（Object.prototype）

3. Object.create()创建的对象__proto__指向

   const person = Object.create({name:'zhangsan',age:10})
   person.__proto__ = {name:'zhangsan',age:10}
   

   Object.create()是根据一个对象（create中的第一个参数），创建一个新对象，其__proto__指向的是create中的第一个参数

最佳实践—继承

继承就是要实现两件事情，让一个对象能够用到另一个对象的属性和方法

1. 借用构造函数：

   优点：不会改变children的constructor

   缺点：每次构造都要执行一次父级函数，浪费效率

function Parent(money) {
    this.money = money;
}
Parent.prototype.makeMoney = function () {
    console.log('making Money')
}

function Children(name, age, money) {
    Parent.call(this, money);//继承属性
    this.name = name;
    this.age = age;
}
Children.prototype.__proto__ = Parent.prototype;//继承方法
Children.prototype.useMoney = function(){console.log('use money')} //自己的方法

const children = new Children('zhangsan', 10, 100);
console.log("children", children)

2. 组合继承：

   优点：无需每次创建对象时都调用Parent函数

   缺点：需要重新指定构造函数

   function Parent(money) {
       this.money = money;
   }
   Parent.prototype.makeMoney = function () {
       console.log('making Money')
   }
   
   function Children(name, age, money) {
       this.name = name;
       this.age = age;
   }
   Children.prototype.useMoney = function(){console.log('use money')} //自己的方法
   
   Children.prototype = new Parent()//相当于Children.prototype.__proto__ = parent.__proto__
   Children.prototype.constructor = Children;//需要重新指定构造函数
   
   const children = new Children('zhangsan', 10, 100);
   console.log("children", children)
   

3. 原型式继承

   优点：简单方便

   缺点：必须有一个对象可以作为另一个对象的基础

   function Parent(money) {
       this.money = money;
   }
   Parent.prototype.makeMoney = function () {
       console.log('making Money')
   }
   const parent = new Parent(100);
   
   const children = Object.create(parent);
   console.log("children", children )