前言
本文主要围绕下述代码进行讲解，Person是构造函数，p是Person实例化的对象。
functionPerson(name){this.name=name}letp=newPerson('瑾行')动图预警
下面一起来逐步拆解GIF动画，完成最后的连线。?
显示原型
prototype称作显式原型，每一个函数（除箭头函数）在创建后都拥有prototype的属性，指向函数的原型对象。
prototype的设计之初是为了实现继承，让构造函数创建的实例共享共有的属性和方法，无需重复创建。
functionPerson(name){this.name=name}Person.prototype.getName=function(){console.log(this.name)}letp=newPerson('瑾行')letp1=newPerson('七金')p.getName()//瑾行p1.getName()//七金理解了，就把prototype相关的线先连起来。Object与Function均是Javascript内置的对象，后面细讲。
constructor属性
存在每个函数（除箭头函数）显示原型中，是当前函数的引用。
打印下对象p的constructor属性。
console.log(p.constructor)//fPerson(){} 意料之中，是Person构造函数。但注意p本身没有constructor属性，是从原型上继承的，所以不需画线。 我们都知道Javascript中函数也是对象，那么打印下Person的constructor属性。
console.log(Person.constructor)//ƒFunction(){[nativecode]}从打印结果可以知道Person函数的构造函数是Function。敲黑板！知识点：我们所有的函数都是根据new Function()生成的。
new Function ([arg1[, arg2[, ...argN]],] functionBody)
functionPerson(name){this.name=name}//等价于letPerson=newFunction(name,'this.name=name')根据知识点，打印Object、Function的constructor属性。
console.log(Object.constructor,Function.constructor)//ƒFunction(){[nativecode]}ƒFunction(){[nativecode]}根据打印结果：Function是所有函数的构造函数（包括自己），且所有函数的constructor均继承于Function.prototype，同样无需画线。 还有一种情况，函数的显式原型。根据定义，毋庸置疑，constructor指向自身函数。
console.log(Person.prototype.constructor)//ƒPerson(){}同理可得出Object.prototype.constructor与Function.prototype.constructor
懂了的话，按讲解顺序连上与constructor相关的线。
隐式原型
__proto__称作隐式原型，所有的对象都具有__proto__属性。对象的隐式原型指向了该对象构造函数的原型对象，保证对象能访问挂载在原型链上定义的属性和方法。
p是Person构造函数实例化的对象，所以p.__proto__ === Person.prototype为true，保证p可访问Person原型上定义的属性和方法。
console.log(p.__proto__===Person.prototype)//true
函数也是对象，上 1 小节了解到Function是所有函数的构造函数
console.log(Person.__proto__===Function.prototype)//trueconsole.log(Object.__proto__===Function.prototype)//trueconsole.log(Function.__proto__===Function.prototype)//true
函数的显示原型也是对象，是Object构造函数产生。
console.log(Person.prototype.__proto__===Object.prototype)//trueconsole.log(Function.prototype.__proto__===Object.prototype)//true
构造函数Person的显式原型也是对象，所以我们尝试打印下它的隐式原型。 现在，我们可以得出结论：所有的对象都继承于Object.prototype。 不信的话，打印下Object.prototype.__proto__
functionPerson(name){this.name=name}Person.prototype.getName=function(){console.log(this.name)}letp=newPerson('瑾行')letp1=newPerson('七金')p.getName()//瑾行p1.getName()//七金0现在，让我们把剩下关于__proto__的线连好，圆满完成！！！
原型链
如果看到这里，你应该知道原型链由__proto__将对象和原型连接起来组成原型链✌。
面试高频问题
题目：instanceof 与 isPrototypeOf有何区别？
instanceOf: 检测构造函数的prototype是否出现在某个实例对象的原型链上。 isPrototypeOf: 检查原型对象是否存在于某个实例对象的原型链上。
functionPerson(name){this.name=name}Person.prototype.getName=function(){console.log(this.name)}letp=newPerson('瑾行')letp1=newPerson('七金')p.getName()//瑾行p1.getName()//七金1根据定义和代码可以的得出结论：两者具备相同的作用，但主要目标对象不同，instanceOf目标对象是构造函数，isPrototypeof则是原型对象。
总结
如果读到这里，我相信你至少会用画图地形式去描述原型与原型链，那就毫不吝啬地点个赞吧?。
作者：瑾行著作权归作者所有。