博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
[js高手之路]原型式继承与寄生式继承
阅读量:6700 次
发布时间:2019-06-25

本文共 1900 字,大约阅读时间需要 6 分钟。

一、原型式继承本质其实就是个,以一个对象为模板复制出新的对象

1         function object( o ){ 2             var G = function(){}; 3             G.prototype = o; 4             return new G(); 5         } 6         var obj = { 7             name : 'ghostwu', 8             age : 22, 9             show : function(){10                 return this.name + ',' + this.age;11             }12         };13         var obj2 = object( obj );14         console.log( obj2.name, obj.age, obj.show() );

object函数中,以对象o为模板,在object函数体里面,定义一个构造函数,让构造函数的原型对象(prototype)指向o,

返回构造函数的一个实例,这样就可以访问到对象o的所有属性和方法.

二、因为原型式继承是个浅拷贝,所以引用类型的数据共享在不同的实例之间

1         function object( o ){ 2             var G = function(){}; 3             G.prototype = o; 4             return new G(); 5         } 6         var obj = { 7             skills : [ 'php', 'javascript' ] 8         }; 9         var obj2 = object( obj );10         obj2.skills.push( 'python' );11         var obj3 = object( obj );12         console.log( obj3.skills ); //php,javascript,python

obj2改变了skills数组,obj3的skills结果就是其他实例改变的结果

三、在es5中,新增了一个函数Object.create()实现了原型式继承

1         var obj = {2             skills : [ 'php', 'javascript' ]3         };4         var obj2 = Object.create( obj );5         obj2.skills.push( 'python' );6         var obj3 = Object.create( obj );7         console.log( obj3.skills ); //php,javascript,python

四,寄生式继承就是把原型式继承再次封装,然后在对象上扩展新的方法,再把新对象返回

1         function object( o ){ 2             var G = function(){}; 3             G.prototype = o; 4             return new G(); 5         } 6         function CreateObj( srcObj ){ 7             var dstObj = object( srcObj ); 8             dstObj.sayName = function(){ 9                 return this.userName;10             }11             return dstObj;12         }13         var obj = {14             userName : 'ghostwu',15         };16         var obj2 = CreateObj( obj );17         console.log( obj2.sayName() ); //ghostwu

 

转载地址:http://slgoo.baihongyu.com/

你可能感兴趣的文章
GoldenGate—AUTORESTART配置
查看>>
7.15模拟赛
查看>>
MSBuild编译扩展
查看>>
二分查找递归和非递归版
查看>>
Jetty - Container源码分析
查看>>
【转】[教程] CSS入门3:如何插入CSS样式
查看>>
5shift shell
查看>>
[运维]ESXI Web Client ...
查看>>
利用FS寄存器获取KERNEL32.DLL基址算法的证明(ZZ)
查看>>
ubuntu14.04配置caffe
查看>>
python 文本处理2
查看>>
从零开始学习PYTHON3讲义(二)把Python当做计算器
查看>>
Quartz 2D编程笔记
查看>>
【Arduino】使用C#实现Arduino与电脑进行串行通讯
查看>>
bzoj2561 最小生成树
查看>>
java MD5加密
查看>>
mysql多实例
查看>>
购物商城Web开发第二十三天
查看>>
我的Android进阶之旅------>Android利用温度传感器实现带动画效果的电子温度计
查看>>
Selenium UI 举例 getCssValue
查看>>