深度理解原型链

1.什么是prototype,constructor,__proto__ 

prototype

prototype是构造函数的属性,指的就是构造函数的原型,在生成实例的时候,js会根据构造函数的prototype属性将该属性下的对象生成为父类,

注意,只有构造函数这个属性才有这种效果哦~如果一个构造函数没有指定该属性,那么该属性下的__proto__会默认的指向原生Object的原型对象,该属性会变成一个对象,其中constructor属性指向本身。

constructor

   constructor,如果通俗的理解,可以理解成原型对象的构造函数,当把一个对象(对象字面量)赋给一个构造函数的原型,constructor 会被复写,如果没有进行prototype的操作的话,constructor是函数声明时指定的,指定为本身:

例如:

function A() {}  

         则 A.prototype.constructor === A; 但是这个属性往往是不准确的:

        function A() {}

         function B() {}

        B.prototype = new A();

​        var b = new B();

        b.constructor; // A

 上面的代码,按照constructor的含义,b的constructor应该指向B,但是确指向了A,原因如下

    A没有进行prototype操作,所以其constructor指向本身; B.prototype = new A();  

    之后B.prototype.constructor === A;         B.prototype被复写为A的实例,B.prototype.constructor === A;  

   而b是B的实例则b.constructor === A;

如果想要实现继承,一般要进行constructor修复,即:  B.prototype = new A();  B.prototype.constructor = B;

__proto__

可以这么说,js的原型链就是通过这个属性串联起来的,__proto__属性指向他的父类,在调用一个对象的属性或者方法的时候就是通过__proto__这一属性指向的对象一层一层的向上查找的。上面的一句:在生成实例的时候,js会根据构造函数的prototype属性将该属性下的对象生成为父类,在这里可以改为,在生成实例的时候,js会根据构造函数的prototype属性将该属性下的对象引用到实例的__proto__属性下

2.什么是原型链

我们首先来说说继承,继承是面向对象语言的重要机制,通俗地讲就是子类可以拥有父类的方法和属性,js的原型链实际上也是一种继承,在ECMAScript标准中,只支持实现继承,而其实现实现继承就是主要依靠于原型链实现的。

 那么,我们再来说说原型,原型其实就是上述所说的继承中的父类。

  这样,原型链 显而易见的 可以理解为,利用原型串起一个继承链,让一个引用类型继承另一个引用类型的属性和方法,再以此类推下去.

3.​构造函数,原型,与实例的关系:

这三者的关系用一句话概括为,每个构造函数都有一个原型,当new 一个构造函数的时候就会生成一个原型链上携带该构造函数的原型的实例。

4.原型链的生成过程:

function parent(){ 

     this.a = "world"; 

     this.b = "world"; 

} 

parent.prototype = { 

   a : "aaa", 

   b : "bbb", 

  c : "!" 

  }

 function temp(){

  this.a = "hello";

 }

temp.prototype = new parent();

var child = new temp();

console.log(child.a +" " + child.b+child.c);//hello world!​​​​​​

上面的代码运行结果就为 : “hello world!”生成的原型链即是

child(temp的实例) > __proto__ > temp.prototype(parent的实例) > __proto_ >parent.prototype > __proto__ > Object.prototype >__proto__ > null

​5.常用函数

function extend(child, parent) {​

      function temp() {

           this.constructor = child;

​      }

     temp.prototype = parent.prototype;

     child.prototype = new temp();

​}

extend函数 两个参数都为构造函数,目的是让一个构造函数(子类)继承另一个构造函数(父类)的原型,并且不调用父类的构造函数(有时候构造函数会需要一些参数或者做一些事情破坏了原型链),这个方法可以用来生成想要的原型链哦。​

评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值