JS_原型和原型链

一、prototype（原型/原型对象）

1. 每个函数天生自带一个属性prototype，它是一个对象。
2. 只要函数定义好以后，这个prototype就存在了；所以，函数和prototype可以理解为伴生关系。
3. 构造函数也是函数，构造函数有constructor和prototype，可以向原型对象prototype里面添加内容。

function Person(){}
//Person.prototype已经出生了
//向prototype上添加一些属性和方法
Person.Prototype.sayHi = function(){}
console.log(Person.prototype)
// {
//     sayHi: ƒ()
//     constructor: ƒ Person()
//     __proto__: Object
// }

二、__proto__

1. 每个对象自带一个属性__proto__，指向所属构造函数的prototype
2. 实例化对象也是一个对象，也有__proto__属性

 function Person(){}
 Person.prototype.sayHi = function(){
     console.log("hello")
 }
 let p1 = new Person()
 console.log(p1) //Person {}
 console.log(p1.__proto__ === Person.prototype)//true

因为p1是Person实例化出来的对象，所以p1所属的构造函数就是Person

p1.__proto__指向所属构造函数的prototype

三、对象访问机制

当访问一个对象的成员时，如果对象本身有，则直接返回结果；如果没有，会自动去__proto__上访问；一直找寻到顶级对象的__proto__，最终没找到则返回undefined

function Person(name, age) {
    this.name = name;
    this.age = age;
}

Person.prototype.sayHi = function () {
    console.log('Hello world')
}

let p1 = new Person("lxc", 18)
console.log(p1.name, p1.age, p1.sayHi)

p1身上并不存在sayHi属性，它向上找寻时，到了p1.__proto__，而p1.__proto__刚好指向了Person.prototype，所以找到了sayHi

利用prototype、__proto__和对象访问机制，解决了构造函数的不合理；属性直接写在构造函数体内，方法写在构造函数的prototype上

protytype作用：为了写一些方法给构造函数的实例对象使用，因为构造函数的每个实例都可以访问它的prototype

• 看到这里应该有一个疑问？

上面说到：

1. 每个对象都有__proto__属性，随便一个实例化对象的__proto__都是其所属构造函数的prototype;
2. 每个函数都有一个prototype，它是一个对象

每个构造函数也是对象，那构造函数这个对象的prototype应该也有__proto__，它指向了谁？

所以，这里来了第三条定义：当一个对象没有准确的构造函数来实例化的时候，看作是内置构造函数Object的实例。

var arr = [];//Array的实例
var obj = {};//Object的实例
function Person(){}
var p1 = new Person;//Person的实例
var time = new Date();//Date的实例
var fn = function(){};//Function的实例（只要是函数，就是Function的实例）
Person.prototype;//Object的实例
Array.prototype;//Object的实例

原型链.png

结论：任何一个对象开始出发，按照__proto__向上查找，都能找到Ojbect.prototype，我们把这个用__proto__串联起来的链状结构，叫做原型链

原型链的作用：为了对象访问机制服务