个人理解JavaScript原型以及原型链

276 阅读2分钟

什么是原型?

平时我们在创建对象时,都会通过对象的构造函数初始化对象,设置一个prototype(原型)属性,它包含的是一个对象

以下通过代码举例解释:

 //1.声明DOG构造函数
 function DOG(name) {
    this.name = name
    this.species = "犬科"
 }
 //2.接着new(实例化两个DOG对象)
 var dogA = new DOG('金毛')
 var dogB = new DOG('二哈')
 //在这里这两个对象的species属性是独立的,修改其中一个,不会影响到另一个。
 dogA.species = '猫科'
 console.log(dogB.species)
  //这里方便掩饰结果我们直接从浏览器中打印

那如果我们想所有的实例对象要共享一些属性和方法,都放在prototype这个对象里;哪些不需要共享的属性和方法,都放在构造函数里面。

现在我们用代码举例实现把species属性放在在prototype这个对象里:

 function DOG(name) {
    this.name = name
 }
DOG.prototype.species = '猫科'
var dogA = new DOG('金毛')
var dogB = new DOG('二哈')
console.log(dogA.species)
console.log(dogB.species)

现在species属性已经放在了dogA和dogB的构造函数DOG的prototype原型对象里了,只要修改了prototype原型对象,就会同时影响到两个实例对象

什么是原型链?

原型链涉及到_proto_,_proto_是在对象生成的时候(调用构造函数)会在内部生成一个_proto_指针来指向该对象的构造函数的原型对象

以DOG为例如图:

原型链就是对象通过_proto_指针寻找其构造函数的原型对象的过程,当_proto_指针指向null的时候,原型链就到最上层了

以图来生动解释

首先,创建 new dogA()对象 生成_proto_指针指向其构造函数DOG的原型对象DOG.prototype,由于在js中函数也属于Object对象,它的原型是Object.prototype。最后Object是js原生底层对象,无原型对象,所以Object.prototype的_proto_指针指向的null,到这里原型链的最上层了。

最后完整的原型链图

总结

由于所有的实例对象共享同一个 prototype 对象,那么从外界看起来,prototype 对象就好像是实例对象的原型,而实例对象则好像”继承”了 prototype 对象一样

原型链作用:对象属性的访问修改和删除

 1.访问。优先在对象本身查找,没有则顺着原型链向上查找
 2.修改。只能修改跟删除自身属性,不会影响到原型链上的其他对象。