JavaScript原型对象和原型链的图解

对于新手来说，JavaScript的原型是一个令人头疼的问题。第一，原型容易和_ _ prototype _ _混淆，第二，它们之间的各种方向真的很复杂。其实市面上有很多文章都在试图说清楚。有一张所谓的经典图片，上面画着各种各样的线条，相互连接。说实话，我自己看到都很晕，更别说完全理解了。所以我想自己试试，看能不能把原型中重要的知识点分离出来，用最简单的图表形式解释清楚。

我们知道原型是一个对象，其他对象可以通过它继承属性。但是除了原型，尼玛还有另一个原型是为了什么？长得这么像，让人怎么分辨？他们都指向谁？你是如何记住这种困惑的？原型链到底是什么？相信很多初学者，即使是有一定经验的老鸟，也未必能解释清楚。这里有三个简单的图片和一些示例代码来理解它。

1.原型和__原型的区别

var a={ }；console . log(a . prototype)；//undefinedconsole . log(a . _ _ proto _ _)；//Object { } var b=function(){ } console . log(b . prototype)；//b { } console . log(b . _ _ proto _ _)；//函数(){ }

/*1，文字方式*/var a={ }；console . log(a . _ _ proto _ _)；//Object { } console . log(a . _ _ proto _ _===a . constructor . prototype)；//true/*2，构造函数模式*/var A=function(){ }；var a=新A()；console . log(a . _ _ proto _ _)；//A { } console . log(A . _ _ proto _ _===A . constructor . prototype)；//true/*3，Object.create()模式*/vara 1={ a :1 } vara 2=object . create(a1)；console.log(a2。_ _ proto _ _)；//对象{ a : 1 } console . log(a . _ _ proto _ _===a . constructor . prototype)；//false(这是图1中的例外)

var A=function(){ }；var a=新A()；console . log(a . _ _ proto _ _)；//A {}(即构造函数A的原型对象)console.log (a. _ _ proto _ _)。_ _ proto _ _)；//Object {}(即构造函数Object的原型对象)console.log (a. _ _ proto _ _)。_ proto _ _。_ _ proto _ _)；//null以上就是本文的全部内容。本文用三张图片讲解了JavaScript的原型对象和原型链，希望对大家学习JavaScript有所帮助。