Este artigo participou do evento "Newcomer Creation Ceremony" para iniciar o caminho para a criação de ouro.
Todos devem estar familiarizados com escopo e cadeia de escopo. É uma colina em javascript. Embora o caminho seja áspero, ainda pode ser entendido, mas comparado com protótipo e cadeia de protótipos, não é qualificado para ser chamado de "" robusto". No entanto, ainda temos que desvendar o mistério dos protótipos e cadeias de protótipos em javascript.
Pontos de conhecimento abordados neste artigo:
· __proto__和prototype
· constructor
· 构造函数
· 作用域链
Definição de Protótipos e Cadeias de Protótipos
protótipo:
Em JS, cada construtor (função) tem uma propriedade chamada prototype, que é chamada de prototype , e também é um objeto. Chamamos esse objeto de objeto prototype , e cada objeto tem uma propriedade chamada __proto__it, que é chamada de protótipo implícito .
Cadeia de protótipos:
A cadeia de protótipos é um mecanismo de busca de objetos . Por exemplo, para encontrar o método toString no objeto arr, ele primeiro o encontrará em suas próprias propriedades privadas . Caso contrário, ele irá __proto__para o objeto protótipo para encontrá-lo. Caso contrário, ele continuará a seguir __proto_ _ Vá até o objeto protótipo em seu objeto protótipo para encontrar o objeto protótipo no Objeto (__proto__ no objeto objeto protótipo aponta para nulo), se não foi encontrado, então o resultado é indefinido;
protótipo
O que é um protótipo?
Quando se trata de protótipos, geralmente falamos de protótipos explícitos , ou seja, protótipos de função. Do ponto de vista popular, podemos entender que um protótipo explícito é o "pai" de um objeto de função, e um objeto de função é um atributo que pode herdar de um protótipo explícito, e também pode ser entendido como herdando seu "pai". " linhagem.
如：
Person.prototype.name = '爹'
function Person(){
}
var person = new Person()
console.log(person.name);
复制代码Normalmente, nosso novo objeto de função está vazio e não tem propriedades, então nosso console.log(person.name) deve ser indefinido.
然而，事实是，打印出来的却是Person.prototype中的name属性“爹”.
值得一提的是，浏览器引擎会优先在自身函数里查找是否存在这个属性，如果自身函数体内存在需要查找的属性的话，它就不会再去他的“爹”里面去查找。
附图：
当然，除了能找到它“爹”的属性，也是能找到它“爹”的函数啦！
Person.prototype.name = '爹'
Person.prototype.say = function() {
console.log('这是爹的血脉')
}
function Person(){
this.name='儿子'
}
var person = new Person()
// console.log(person.name);
person.say()
复制代码而且奥，如果这个构造函数生成了一万个对象，那么它就会复刻出一万份属性出来，但是这个函数对象的原型却只有这一个，不会再复刻。就像一个父亲能有很多个孩子，但是这几个孩子却只能有一个父亲，他们的血脉以及基因都是来源于这个父亲的。
如图：
来，一起进一步探讨原型，我们可以先写下以下代码：
function Person(){
}
var person = new Person()
person
复制代码然后我们可以在控制台看到以下代码：
打开person{}
在此，我们知道这个对象函数是没有写入任何属性的，但是可以看到person{}底下的目录有[[Prototype]]这个属性（其实我们更习惯称它为__proto__的），它就是对象原型，也被我们称之为隐式原型；这里我们虽然没有给对象函数写入任何属性，但是，这个对象仍然是会继承它的原型里的属性，一直到隐式原型为空停止：
可以看到的是，它的隐式原型一层套着一层，类似套娃，层层叠叠，知道最后的__proto__为null停止。
原型的作用
一般情况下，我们写一个构造函数，然后去通过对象去执行函数，每一次调用这个对象里的这些属性，这个构造函数里面的属性都会随之重新构造，多少会对整个代码运行的效率和性能造成一定的影响。
function Car(color,owner){
this.color = color
this.owner = owner
this.carName = '宝马'
this.carheight = 1400
this.carlang = 4900
}
var car1 = new Car('red','李')
var car2 = new Car('green','刘')
console.log(car1.carName)
console.log(car2.carName)
复制代码这里，我们可以把构造函数Car()函数看成是一个宝马造车间，而对象（也就是买主）可以定制车的颜色以及车主的名字，我们可以传参来定制车的颜色以及车主的名字，而车的牌子和长宽却已经是定死的了。但是每当我们调用这个对象时，车间又得重新去做一个车的尺寸，和定制颜色一样，每次又得重新开始做，这样会对造车间的效率造成影响。
但是原型不需要，它就像是血脉刻在骨子里的一样，而且原型也是一个对象，我们可以拿原型来承装那些共有不变的属性，既美观又能提高效率。
function Car(color,owner){
this.color = color
this.owner = owner
}
Car.prototype = {
carName:'宝马',
carheight:1400,
carlang:4900
}
var car1 = new Car('red','李')
var car2 = new Car('green','刘')
console.log(car1.carName)
console.log(car2.carName)
复制代码这样子，我们就相当于有一个批量生产这些车零件的流水线，每次只要拿到现成的零件进行拼接就可以了，大大提高了效率。
最后的效果还是和之前一样的，没有任何变化。即利用原型的特点和概念，可以实现公有属性。
原型的增删改查
原型的增删改查只能由原型本身去做，去执行，通过函数体对象是无法对其进行增删该查的，即便执行，也只不过是对后面的对象进行的增删改查。
可以看以下代码
Person.prototype.LastName='杨'
function Person(name){
this.name=name
}
var person1 = new Person('大公子')
person1.LastName='陈'
console.log(person1.LastName)
var person2 = new Person('二公子')
console.log(person2.LastName)
复制代码这里咱们打个比喻，这里的Person()可以理解为一个“杨”氏家族，var person1 = new Person('大公子')则是杨氏家族的大公子，var person2 = new Person('二公子')是杨氏家族的二公子。
有一天杨大公子突然不想姓杨了，他想改姓随着母亲“陈”氏去姓，于是person1.LastName='陈'改变自己的姓，那么杨二公子的姓呢？
很显然，二公子仍然是姓杨，大公子再怎么去改姓，也不能去改变他祖先传下来的姓氏，那么二公子仍然姓杨，如果想要改变整个杨氏家族的姓，那么只能从源头上去改变，那就是他的父亲以及祖先改姓。
即代码将改为
Person.prototype.LastName='杨'
function Person(name){
this.name=name
}
var person1 = new Person('大公子')
Person.prototype.LastName='陈'
console.log(person1.LastName)
var person2 = new Person('二公子')
console.log(person2.LastName)
复制代码那么从此往后，就没有杨氏宗族了，就是陈氏家族了。
同样的，原型的增删也是同样的原理，只能从源头去执行这些操作才能彻底改变原型里的属性数据，不然个体再如何去修改也是个体，无法去影响整个函数体。
还有一个结论注意嗷，实例对象的隐式原型等同于构造函数的显式原型（具体大家可以比对上面的代码）
原型链
原型链学习参考图
这张原型链图应该可以说是每一个学习原型链的人都应该看的，都应该去学习的一张图，也是每一个前端工程师应该拎得清的东西。接下来，我会带着大家一起来了解这一张图。
细剖原型链
首先，我们先来看它，构造函数Foo()
这里的Foo()有一个prototype的实线箭头指向Foo.prototype，这说明构造函数的显式原型是Foo.prototype；而1它的背后还有一条__proto__虚线箭头指向下方的Function.prototype，这正应了那句话，万物皆对象，而构造函数也是对象，是一个function Function（）创建出来的实例对象，它的隐式原型则会指向function Function（）函数的显式原型，这又应了另外一句话实例对象的隐式原型等同于构造函数的显式原型
然后，我们再来看它，实例对象f1,f2；
它们都是Function Foo()的实例对象，故他们的隐式原型__proto__指向的就是Function Foo()的显式原型，而Function Foo()的显式原型prototype将实线箭头就是指向Foo.prototype的（即Function Foo()的显式原型），实例对象f1,f2的隐式原型__proto__指向也是它。
接下来，我们看到Foo.prototype;
这里可以看到，Foo.prototype有一条实线constructor指向的是Function Foo()，这说明原型Foo.prototype是由Function Foo()构造的，constructor是构造器属性，它会将原型指向它的构造函数。
而同样Foo.prototype也可以看作是一个实例对象，它的隐式原型就是它的构造函数的显式原型。对象的构造函数则是function Object()
那么function Object()的显式原型Object.prototype就是Foo.prototype的隐式原型了
用样的道理，O1和O2也是如此。
它们也是通过function Object（）构造的实例对象，(对了，这里相信已经有不少人从刚才的把原型Foo.prototype看做对象开始那里就有些好奇Object()构造函数是从哪里来的吧？其实Object()函数是系统已经封装好的函数，可以理解为是所有无构造函数对象的构造函数，function Function()也是如此)故它的隐式原型同样是指向Object.prototype的。
最后，我们来看像Obect.prototype这里
此时，Object.prototype已经没有了它的构造函数，没有了构造函数，那么就没有构造函数的显式原型，同样的，Object.prototype的隐式原型就是null了。
这就是原型链的剖析啦，原型链可以理解为：在原型再加一个原型，再加一个原型......把原型连成链，访问顺序也是依照这个链的顺序跟作用域链一样（作用域链可以参考我的另一篇写作用域以及作用域链的文章），叫做原型链。
结束语
也许原型和原型链刚接触会显得很难，但是当你积累了一些知识之后，再回首，你会发现其实它好像没那么难鸭。不要纠结此时没办法理解，只要你有心，终究会成功的！这句话送给你们，也是给我自己的鼓励。