javascript 原型链维护和继承详解


Posted in Javascript onNovember 26, 2014

一.两个原型

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

//构造器声明

        function Guoyansi(){ }

        function GuoyansiEx(){}

        //原型继承

         GuoyansiEx.prototype=new Guoyansi();

       //创建对象

       var g1=new GuoyansiEx();

       var g2=new GuoyansiEx();

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

javascript 原型链维护和继承详解

二.原型的维护

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

function Guoyansi(){ }

var obj1=new Guoyansi();

console.log(obj1.constructor===Guoyansi);//true

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

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

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

javascript 原型链维护和继承详解

 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面向对象的精髓之一了.小伙伴们自己参考下,根据需求使用到自己的项目中去吧

Javascript 相关文章推荐
Bootstrap表单组件教程详解
Apr 26 Javascript
JS 事件绑定、事件监听、事件委托详细介绍
Sep 28 Javascript
jQuery选择器_动力节点Java学院整理
Jul 05 jQuery
详解Layer弹出层样式
Aug 21 Javascript
浅谈vue引用静态资源需要注意的事项
Sep 28 Javascript
vue  自定义组件实现通讯录功能
Sep 30 Javascript
CKEditor4配置与开发详细中文说明文档
Oct 08 Javascript
ajax跨域访问遇到的问题及解决方案
May 23 Javascript
node crawler如何添加promise支持
Feb 01 Javascript
JavaScript实现简易聊天对话框(加滚动条)
Feb 10 Javascript
微信小程序完美解决scroll-view高度自适应问题的方法
Aug 08 Javascript
关于JavaScript 中 if包含逗号表达式
Nov 27 Javascript
jquery提示效果实例分析
Nov 25 #Javascript
jQuery操作cookie方法实例教程
Nov 25 #Javascript
JavaScript常用验证函数实例汇总
Nov 25 #Javascript
JavaScript导出Excel实例详解
Nov 25 #Javascript
JS倒计时代码汇总
Nov 25 #Javascript
jquery中push()的用法(数组添加元素)
Nov 25 #Javascript
Jquery焦点图实例代码
Nov 25 #Javascript
You might like
PHP远程连接MYSQL数据库非常慢的解决方法
2008/07/05 PHP
php校验表单检测字段是否为空的方法
2015/03/20 PHP
php实现的SSO单点登录系统接入功能示例分析
2016/10/12 PHP
在云虚拟主机部署thinkphp5项目的步骤详解
2017/12/21 PHP
PHP大文件切割上传功能实例分析
2019/07/01 PHP
JS实现程序暂停与继续功能代码解读
2013/10/10 Javascript
JS折半插入排序算法实例
2015/12/02 Javascript
js实现鼠标左右移动,图片也跟着移动效果
2017/01/25 Javascript
详解VUE 定义全局变量的几种实现方式
2017/06/01 Javascript
浅谈webpack组织模块的原理
2018/03/10 Javascript
在vue项目中优雅的使用SVG的方法实例详解
2018/12/03 Javascript
vue-cli2与vue-cli3在一台电脑共存的实现方法
2019/09/25 Javascript
超简单的微信小程序轮播图
2019/11/22 Javascript
jquery插件懒加载的示例
2020/10/24 jQuery
[01:23:35]Ti4主赛事胜者组 DK vs EG 1
2014/07/19 DOTA
[06:06]2018DOTA2亚洲邀请赛主赛事第四日战况回顾 全明星赛欢乐上演
2018/04/07 DOTA
[01:10:02]IG vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
[04:29]【TI9采访】OG.N0tail在胜者组决赛后接受采访
2019/08/25 DOTA
使用Python进行稳定可靠的文件操作详解
2013/12/31 Python
跟老齐学Python之玩转字符串(2)
2014/09/14 Python
python过滤字符串中不属于指定集合中字符的类实例
2015/06/30 Python
Python内存管理实例分析
2019/07/10 Python
Python完成哈夫曼树编码过程及原理详解
2019/07/29 Python
Python在cmd上打印彩色文字实现过程详解
2019/08/07 Python
pandas数据处理进阶详解
2019/10/11 Python
Python tkinter常用操作代码实例
2020/01/03 Python
浅谈pandas.cut与pandas.qcut的使用方法及区别
2020/03/03 Python
如何一键升级Python所有包
2020/11/05 Python
Python xlwings插入Excel图片的实现方法
2021/02/26 Python
德国药房apodiscounter中文官网:德国排名前三的网上药店
2019/06/03 全球购物
Linux管理员面试题 Linux admin interview questions
2014/11/01 面试题
体育专业个人的求职信范文
2013/09/21 职场文书
如何撰写岗位职责
2014/02/01 职场文书
冰淇淋开店创业计划书
2014/02/01 职场文书
党在我心中的演讲稿
2014/09/13 职场文书
pytorch 两个GPU同时训练的解决方案
2021/06/01 Python