javascript 原型链维护和继承详解

一.两个原型

很多人都知道javascript是原型继承,每个构造函数都有一个prototype成员,通过它就可以把javascript的继承演义的美轮美奂了.
其实啊,光靠这一个属性是无法完成javascript的继承.
我们在代码中使用的prototype完成继承在这里就不多说了.大家可以查一下资料.
另外一个看不见的prototype成员.
每一个实例都有有一条指向原型的prototype属性,这个属性是无法被访问到的,当然也就无法被修改了,因为这是维护javascript继承的基础.

代码如下:

//构造器声明
        function Guoyansi(){ }
        function GuoyansiEx(){}
        //原型继承
         GuoyansiEx.prototype=new Guoyansi();
       //创建对象
       var g1=new GuoyansiEx();
       var g2=new GuoyansiEx();

上面的代码中的对象可以用下面的图来说明

二.原型的维护

一个构造器产生的实例,其constructor属性总是指向该构造器.我们暂且认为该话是对的.

代码如下:

function Guoyansi(){ }
var obj1=new Guoyansi();
console.log(obj1.constructor===Guoyansi);//true

其实构造器本身是没有constructor这个属性的,那么这个属性是来自哪呢?
答案是:来自原型.
因此得出下面的结论

代码如下:

obj1.constructor===Guoyansi.prototype.constructor===Guoyansi

既然我们可以通过constructor来寻找构造器.因此我们就可以进一步完善上面的图了.

代码如下:

function GuoyansiEx(){}
             GuoyansiEx.prototype=new Guoyansi();
             console.log(GuoyansiEx.constructor===GuoyansiEx)//false

根据上图,上面的结果应该是true,但为什么是false呢?

现在做个分析.
GuoyansiEx的原型被Guoyansi的实例重写了,那么GuoyansiEx的原型中的constructor自然也是来自Guoyansi的实例.
而Guoyansi实例中的constructor又是来自Guoyansi.prototype.而Guoyansi.prototype没有被重写,
所以Guoyansi.prototype的constructor指向Guoyansi(构造函数);

根据以上分析得出下面的结论

代码如下:

GuoyansiEx.constructor===Guoyansi.constructor===Guoyansi;

如果在开发过程中对于Constructor的指向要求非常精确的话,可以做如下处理.

代码如下:

/**方法一:**/
 function Guoyansi(){}
             function GuoyansiEx(){}
             GuoyansiEx.prototype=new Guoyansi();
             GuoyansiEx.prototype.constructor=GuoyansiEx;//重置constructor指向.

代码如下:

/**
            方法二
            **/
            function Guoyansi(){}
            function GuoyansiEx(){
                this.constructor=arguments.callee;
            }
            GuoyansiEx.prototype=new Guoyansi();

代码如下:

/**
            方法三
            **/
            function Guoyansi(){}
            function GuoyansiEx(){
                this.constructor=GuoyansiEx;
            }
            GuoyansiEx.prototype=new Guoyansi();

三.看不见的原型有什么用呢?

看得见的原型链我们可以对他操作来完成我们的继承,那么这个看不见的原型链我们既看不见,又无法操作.要它有何用.
面向对象中继承有一个特性:相似性.子类与父类具有相似性.因此在子类中你是无法用delete删除从父类继承而来的成员.也就是说子类必须具有父类的特性.
为了维护这个特性,javascript在对象的内部产生了一条我们看不见的原型属性,并且不允许用户访问.这样,用户可以处于任何目的来修改constructor,
而不会破坏子类拥有父类的特性.
简而言之:内部原型是javascript的原型继承机制所需要的,而外部原型是用户实现继承所需要的.

四.火狐引擎SpiderMonkey中的__proto__

还是这段代码.

代码如下:

function Guoyansi(){}
            Guoyansi.prototype.age=24;
            function GuoyansiEx(){}
            var obj1=new Guoyansi();
            GuoyansiEx.prototype=obj1;
            GuoyansiEx.prototype.constructor=GuoyansiEx;//重置constructor指向.
            var obj2=new GuoyansiEx();

我现在想要从obj开始向上访问父类Guoyansi的prototype的属性的age.
思路是这样的.
第一步:obj2====>obj2.constructor.prototype
第二部:obj2.constructor.prototype===>GuoyansiEx.prototype;
第三部:GuoyansiEx.prototype===>obj1;
第四部:obj1.constructor====>Guoyansi
第五部:Guoyansi.prototype.age

写成这这样:console.log(obj2.constructor.prototype.constructor.prototype.age)//24;
最终的结果是24.
最终的结果是24.可以正常执行,但是在好多书上说constructor修改后,级无法在找到父类中的原型了.不知道是怎么回事.

在火狐中提够了一种更加简洁的属性._proto_
SpiderMonkey中默认在任何创建的对象上添加了一个名为_proto_的属性,该属性指向构造器所用的原型.
其实就是我们上面提到的不可见的原型链,只不过是在这个地方变相的公开而已.
可以这样访问到age
console.log(obj2.__proto__.__proto__.age);//24
这样的确是成功的访问到了父类的原型属性,但是这个属性只适用于火狐,在其他浏览器中是会出错的.
在E5中对Object做出了扩展Object.getPrototypeOf(),可以访问到所有父类的原型了.

代码如下:

function Guoyansi(){}
            Guoyansi.prototype.age=24;
            function GuoyansiEx(){}
            var obj1=new Guoyansi();
            GuoyansiEx.prototype=obj1;
            GuoyansiEx.prototype.constructor=GuoyansiEx;//重置constructor指向.
            var obj2=new GuoyansiEx();
            var proto=Object.getPrototypeOf(obj2);
            while(proto){
                console.log(proto.constructor);
                proto=Object.getPrototypeOf(proto);
            }
            console.log("object的原型"+proto);

结果是:GuoyansiEx
Guoyansi
Object
object的原型null

个人觉得这些应该算是javascript面向对象的精髓之一了.小伙伴们自己参考下,根据需求使用到自己的项目中去吧

(0)

相关推荐

  • JavaScript中的原型链prototype介绍

    JavaScript中的继承是通过原型链(prototype chain)来完成的:每个对象内部都有另外一个对象作为其prototype而存在,对象从这个prototype中继承属性(property).对于每个对象来说,可以用以下三种方式来访问其原型对象: 1.__proto__.可以通过对象的__proto__属性来访问其原型对象.该属性仅在Firefox.Safari和Chrome中得到支持,在IE和Opera中不支持. 2.Object.getPrototypeOf().可以将对象作为参

  • JavaScript中原型和原型链详解

    javascript中的每个对象都有一个内置的属性prototype,Javascript中对象的prototype属性的解释是:返回对象类型原型的引用.意思是是prototype属性保存着对另一个JavaScript对象的引用,这个对象作为当前对象的父对象. 复制代码 代码如下: A.prototype = new B(); 理解prototype不应把它和继承混淆.A的prototype为B的一个实例,可以理解A将B中的方法和属性全部克隆了一遍.A能使用B的方法和属性.这里强调的是克隆而不是

  • javascript学习笔记(九)javascript中的原型(prototype)及原型链的继承方式

    在使用面向对象编程时,对象间的继承关系自然少不了!而原型正是实现javascript继承的很重要的一种方法! 我们首先来看以下代码: 复制代码 代码如下: function person(name, age) { this.name = name; this.age = age; } person.prototype.getInfo = function() { alert("My name is "+this.name+", and I have "+this.a

  • js原型链原理看图说明

    当初ECMAscript的发明者为了简化这门语言,同时又保持继承的属性,于是就设计了这个链表.. 在数据结构中学过链表不,链表中有一个位置相当于指针,指向下一个结构体. 于是乎__proto__也一样,每当你去定义一个prototype的时候,相当于把该实例的__proto__指向一个结构体,那么这个被指向结构体就称为该实例的原型. 文字说起来有点儿绕,看图说话 复制代码 代码如下: var foo = { x: 10, y: 20 }; 当我不指定__proto__的时候,foo也会预留一个这

  • 跟我学习javascript的prototype原型和原型链

    用过JavaScript的同学们肯定都对prototype如雷贯耳,但是这究竟是个什么东西却让初学者莫衷一是,只知道函数都会有一个prototype属性,可以为其添加函数供实例访问,其它的就不清楚了,最近看了一些 JavaScript高级程序设计,终于揭开了其神秘面纱. 每个函数都有一个prototype属性,这个属性是指向一个对象的引用,这个对象称为原型对象,原型对象包含函数实例共享的方法和属性,也就是说将函数用作构造函数调用(使用new操作符调用)的时候,新创建的对象会从原型对象上继承属性和

  • JS原型链怎么理解

    在谈原型链之前,我们首先要了解自定义函数与 Function 之间是什么关系,而构造函数.原型和实例之间又存在什么千丝万缕的关系呢?其实,所有的函数都是 Function 的实例.在构造函数上都有一个原型属性 prototype,该属性也是一个对象:那么在原型对象上有一个 constructor 属性,该属性指向的就是构造函数:而实例对象上有一个 _proto_ 属性,该属性也指向原型对象,并且该属性不是标准属性,不可以用在编程中,该属性用于浏览器内部使用. // _proto_ 在函数里有一个

  • JS继承--原型链继承和类式继承

    什么是继承啊?答:别人白给你的过程就叫继承. 为什么要用继承呢?答:捡现成的呗. 好吧,既然大家都想捡现成的,那就要学会怎么继承! 在了解之前,你需要先了解构造函数.对象.原型链等概念...... JS里常用的两种继承方式: 原型链继承(对象间的继承)类式继承(构造函数间的继承) 原型链继承: 复制代码 代码如下: //要继承的对象var parent={name : "baba" say : function(){ alert("I am baba");}} //

  • javascript学习笔记(五)原型和原型链详解

    私有变量和函数 在函数内部定义的变量和函数,如果不对外提供接口,外部是无法访问到的,也就是该函数的私有的变量和函数. 复制代码 代码如下: <script type="text/javascript">     function Test(){         var color = "blue";//私有变量         var fn = function() //私有函数         { }     } </script> 这样在

  • Javascript之旅 对象的原型链之由来

    以问题开始: function Base(){}var base = new Base() 上面两行代码会创建几个对象(object)? 要回答这个问题,先明确一下Javascript里object的概念. Objects 在Javascript里,几乎一切都是object(Arrays.Functions.Numbers.Objects--),而没有C#里的class的概念.object的本质是一个name-value pairs的集合,其中name是string类型的,可以把它叫做"prop

  • js对象继承之原型链继承实例

    本文实例讲述了js对象继承之原型链继承的用法.分享给大家供大家参考.具体分析如下: 复制代码 代码如下: <script type="text/javascript"> //定义猫的对象 var kitty  = {color:'yellow',bark:function(){alert('喵喵');},climb:function(){alert('我会爬树')}}; //老虎对象的构造函数 function tiger(){  this.color = "ye

  • JavaScript继承基础讲解(原型链、借用构造函数、混合模式、原型式继承、寄生式继承、寄生组合式继承)

    说好的讲解JavaScript继承,可是迟迟到现在讲解.废话不多说,直接进入正题. 既然你想了解继承,证明你对JavaScript面向对象已经有一定的了解,如还有什么不理解的可以参考<面向对象JS基础讲解,工厂模式.构造函数模式.原型模式.混合模式.动态原型模式>,接下来讲一般通过那些方法完成JavaScript的继承. 原型链 JavaScript中实现继承最简单的方式就是使用原型链,将子类型的原型指向父类型的实例即可,即"子类型.prototype = new 父类型();&qu

  • javascript prototype 原型链

    JavaScript中的prototype概念恰如其分地反映了这个词的内含,我们不能将其理解为C++的prototype那种预先声明的概念. JavaScript 的所有function类型的对象都有一个prototype属性.这个prototype属性本身又是一个object类型的对象,因此我们也可以给这个prototype对象添加任意的属性和方法.既然prototype是对象的"原型",那么由该函数构造出来的对象应该都会具有这个"原型"的特性.事实上,在构造函数

随机推荐