图解原型链

原型链作为js中最难的一部分,特此将自己的理解记录下来,以免遗忘。

一句话说,原型链就是实现继承的一种方式。换一种方式,原型链就是找原型对象。

1.先说说构造函数:

function Pig(){
    this.name = "猪";       
}  
var pig = new Pig()
//Pig()就是构造函数,pig为实例对象。

  构造函数是一种特殊的函数,学过java的同学应该知道,他就是在创建对象时初始化对象的,也就是给new出来的实例对象进行赋值的,当然那些值都是new的时候传进来的。

2.原型对象(原型链就是找原型对象)

  js中,当一个函数A被申明时,会在内存中创建一个对象B,这个B就是A的原型对象。B对象会创建一个constructor属性指向A,A对象自动创建一个prototype属性指向B。这两个属性默认隐藏的。

  注意,当我们使用new来创建一个实例对象(p1)的时候,这个对象实际上创建完就和构造函数(person())没有联系了,而只是和原型对象有联系。

  通俗的说,就相当于连线一样,构造函数只是在创建连线的时候起到了一个中间部分的作用,当这条线连好了,就把构造函数从线上丢弃了。(过河拆桥啊)

  这里的图有点问题,p1中的属性实际上是__proto__,这个属性是在创建实例的时候自动创建的,指向原型对象。其实,prototype和__proto__都是用来指向原型对象的,只不过一个用于函数,一个用于对象。

3.原型链

  原型链,实际上就是去找它的原型对象,如果某个属性在上一个原型对象没有找到,则依次网上找原型对象。

  原型对象也是对象,所以它也有__proto__,指向上一层的原型对象,比如Object等。

4.instanceof  

//定义构造函数
function C(){
}
function D(){
}
var c = new C();
c instanceof C;  //true
//c instanceof C 相当于判断 c.__proto__=== C.protype
也就是,c的原型对象是不是C的原型对象

 注意,由于构造函数C()的上一层为Object(),所以,c instanceof Object也是对的。因为他们都在原型链上。

(所以,为了解决这个问题,一般都是用 c.__proto__.constructor === C.)

5.执行new运算符过程中发生了什么(深入)

var c = newC();  

第一步:创建一个新的对象,继承自构造函数指向的原型函数

第二步:执行构造函数,将上下文指定给这个新的对象(this)

第三步:判断构造函数是否返回一个对象,如果不是,则返回第一步的对象,如果不是,那么前面的都没用了,直接返回构造函数返回的对象。

 

 

 

  

posted @ 2018-03-13 15:11  leerle  阅读(422)  评论(0编辑  收藏  举报