一张图看懂JS的原型链

前言

相信很多初学JS的多伙伴对原型和原型链懵懵懂懂很乱，尤其是__proto__和prototype这两个属性搞不清

创建对象的方式

第一种：字面量方式

var person = { name: '张三' }
var person = new Object({name:'asdf'})

第二种：构造函数方式

var Person = function () {
      this.name = '张三'
  }
var person =  new Person()

第三种：Object.create方式

var p = {name:'张三'}
var person = Object.create(p)

第四中：ES6中的class

class Person {
         constructor(){
             this.name = '张三'
         }
     }
var person =  new Person()

原型链图

图片分为：实例、构造函数、原型、原型链之间的关系

来个栗子让你看的明明白白的
var Person = function () {  
          this.name = '张三'
      }
var person = new Person()
console.log(person)

实例的原型 和 构造函数的原型 相等 
person.__proto__ === Person.prototype                                        //true
也可以这样使用方法来获取
Object.getPrototypeOf(person) === Person.prototype                           // true
验证一下__proto__和 Object.getPrototypeOf()获取的是否相等
person.__proto__ === Object.getPrototypeOf(person)                           // true
prototype  是函数身上的（构造函数的原型）
__proto__  是对象身上的（构造函数的原型）
构造函数的原型属性constructor指向构造函数
Person.prototype.constructor === Person                                     // true
你也可以从实例沿着原型链去找  它自己去__proto__里面去找（这就是原型链）
person.constructor === Person                                               // true
原型链有没有末尾 是有的
Person.prototype.__proto__ === Object.prototype                             //true
返回空了到顶端了
Person.prototype.__proto__.__proto__                                         //null

看看第三种方式

咦，怎么和字面量创建的不一样，仔细看看里面有__proto__表示什么？
它用原型链形式创建的。验证一下

person.__proto__ === p    //true

再回去看那张图是不是清晰了不少
SE6使用class关键字创建对象内部也是构造函数方式不信你自己可以试一试

最后

创建对象的方式的时候写错了单词person写错了parent，发现了我不知道的新大陆看看是什么

console.log(parent)                 //打印的是window，咦，我了个去
console.log(parent === window)      // true
console.log(parent === this)        // true

如果以上有错误或者不对的地方请大神指点出来，谢谢