原型与原型链

2017-12-01  本文已影响0人  海山城

原型

function Person(name, age){
  this.name = name
  this.age  = age
}

Person.prototype.printName = function(){
  console.log(this.name)
}

var p1 = new Person('hsc', 25)
p1.printName()
原型图

原型链

知道了原型,那么原型链又是什么呢?有什么用呢?先来看个例子

var mycars=new Array(1,2,3)
mycars.valueOf() //[1, 2, 3]

这个valueOf方法哪里来的?
首先实例本身没有这个方法,接着去原型mycars.__proto__找,也就是Array.prototype上找,发现也没有这个方法,但是mycars.__proto__里面也有个__proto__,发现valueOf方法在这个里面,如下图


寻找valueOf方法

总结一下: valueOf方法的寻找过程。
①首先在实例mycars本身去寻找
②没有的话,去构造这个实例的函数Array的原型prototype(即Array.prototype)上去寻找
③仍然没找到的话,去构造Array.prototype的函数Object的原型prototype (即Object.prototype)上去寻找
④就这样一级一级的往上找。最终在Array.prototype.__proto__上找到了,即在mycars.__proto__.__proto__
⑤总的来说就是 实例.__proto__.__proto__....... 这样的一条链上找下去,这条链就是原型链
可能说的有点抽象,结合下面的原型链的图来理解

原型链图

补充

最后附上一张自己的手绘图


image
上一篇 下一篇

猜你喜欢

热点阅读