[js高手之路]原型式继承与寄生式继承详解


Posted in Javascript onAugust 28, 2017

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

function object( o ){
      var G = function(){};
      G.prototype = o;
      return new G();
    }
    var obj = {
      name : 'ghostwu',
      age : 22,
      show : function(){
        return this.name + ',' + this.age;
      }
    };
    var obj2 = object( obj );
    console.log( obj2.name, obj.age, obj.show() );

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

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

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

function object( o ){
      var G = function(){};
      G.prototype = o;
      return new G();
    }
    var obj = {
      skills : [ 'php', 'javascript' ]
    };
    var obj2 = object( obj );
    obj2.skills.push( 'python' );
    var obj3 = object( obj );
    console.log( obj3.skills ); //php,javascript,python

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

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

var obj = {
      skills : [ 'php', 'javascript' ]
    };
    var obj2 = Object.create( obj );
    obj2.skills.push( 'python' );
    var obj3 = Object.create( obj );
    console.log( obj3.skills ); //php,javascript,python

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

function object( o ){
      var G = function(){};
      G.prototype = o;
      return new G();
    }
    function CreateObj( srcObj ){
      var dstObj = object( srcObj );
      dstObj.sayName = function(){
        return this.userName;
      }
      return dstObj;
    }
    var obj = {
      userName : 'ghostwu',
    };
    var obj2 = CreateObj( obj );
    console.log( obj2.sayName() ); //ghostwu

以上这篇[js高手之路]原型式继承与寄生式继承详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript中数组的concat()方法使用介绍
Dec 18 Javascript
JavaScript获取当前页面上的指定对象示例代码
Feb 28 Javascript
巧用replace将文字表情替换为图片
Apr 17 Javascript
如何用angularjs制作一个完整的表格
Jan 21 Javascript
jQuery 如何给Carousel插件添加新的功能
Apr 18 Javascript
简单理解js的prototype属性及使用
Dec 07 Javascript
在vue中通过axios异步使用echarts的方法
Jan 13 Javascript
从零开始搭建一个react项目开发
Feb 09 Javascript
vue.js的双向数据绑定Object.defineProperty方法的神奇之处
Jan 18 Javascript
vue实现路由切换改变title功能
May 28 Javascript
JS中的算法与数据结构之链表(Linked-list)实例详解
Aug 20 Javascript
详解TypeScript的基础类型
Feb 18 Javascript
[js高手之路]寄生组合式继承的优势详解
Aug 28 #Javascript
ajax+node+request爬取网络图片的实例(宅男福利)
Aug 28 #Javascript
js排序与重组的实例讲解
Aug 28 #Javascript
利用ES6的Promise.all实现至少请求多长时间的实例
Aug 28 #Javascript
JS自定义函数实现时间戳转换成date的方法示例
Aug 27 #Javascript
JavaScript学习笔记之惰性函数示例详解
Aug 27 #Javascript
Vue实现typeahead组件功能(非常靠谱)
Aug 26 #Javascript
You might like
简单了解PHP编程中数组的指针的使用
2015/11/30 PHP
php日期操作技巧小结
2016/06/25 PHP
PHP进阶学习之类的自动加载机制原理分析
2019/06/18 PHP
jquery $.trim()方法使用介绍
2014/05/21 Javascript
Angular实现跨域(搜索框的下拉列表)
2017/02/16 Javascript
Bootstrap3多级下拉菜单
2017/02/24 Javascript
vue组件父子间通信之综合练习(聊天室)
2017/11/07 Javascript
微信小程序页面生命周期详解
2018/01/31 Javascript
webpack热模块替换(HMR)/热更新的方法
2018/04/05 Javascript
JavaScript实现的DOM树遍历方法详解【二叉DOM树、多叉DOM树】
2018/05/07 Javascript
浅谈angular2子组件的事件传递(任意组件事件传递)
2018/09/30 Javascript
Phaser.js实现简单的跑酷游戏附源码下载
2018/10/26 Javascript
详解VScode编辑器vue环境搭建所遇问题解决方案
2019/04/26 Javascript
vue请求服务器数据后绑定不上的解决方法
2019/10/30 Javascript
整理 node-sass 安装失败的原因及解决办法(小结)
2020/02/19 Javascript
python持久性管理pickle模块详细介绍
2015/02/18 Python
Python 序列的方法总结
2016/10/18 Python
Python时间戳使用和相互转换详解
2017/12/11 Python
python实现TF-IDF算法解析
2018/01/02 Python
python中yaml配置文件模块的使用详解
2018/04/27 Python
Python+OpenCV实现实时眼动追踪的示例代码
2019/11/11 Python
关于Python3 lambda函数的深入浅出
2019/11/27 Python
Matplotlib 绘制饼图解决文字重叠的方法
2020/07/24 Python
python飞机大战游戏实例讲解
2020/12/04 Python
Original Penguin美国官网:布拉德皮特、强尼德普喜爱的服装品牌
2016/10/25 全球购物
艺术学院毕业生求职信
2014/07/09 职场文书
医德医魂心得体会
2014/09/11 职场文书
2014党员学习《反腐倡廉警示教育读本》思想汇报
2014/09/13 职场文书
银行奉献演讲稿
2014/09/16 职场文书
2015年医院创卫工作总结
2015/04/22 职场文书
公司捐书倡议书
2015/04/27 职场文书
综治目标管理责任书
2015/05/11 职场文书
严以用权学习心得体会
2016/01/12 职场文书
导游词之安徽巢湖
2019/12/26 职场文书
十大最强妖精系宝可梦,哲尔尼亚斯实力最强,第五被称为大力士
2022/03/18 日漫
Go语言编译原理之变量捕获
2022/08/05 Golang