[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 相关文章推荐
用JQuery模仿淘宝的图片放大镜显示效果
Sep 15 Javascript
jQuery遍历Table应用示例
Apr 09 Javascript
js添加千分位的实现代码(超简单)
Aug 01 Javascript
jquery 仿锚点跳转到页面指定位置的实例
Feb 14 Javascript
js es6系列教程 - 基于new.target属性与es5改造es6的类语法
Sep 02 Javascript
深入理解Node.js中通用基础设计模式
Sep 19 Javascript
vue中实现先请求数据再渲染dom分享
Mar 17 Javascript
解决vue-router中的query动态传参问题
Mar 20 Javascript
nvm、nrm、npm 安装和使用详解(小结)
Jan 17 Javascript
小程序实现日历左右滑动效果
Oct 21 Javascript
javascript实现倒计时关闭广告
Feb 09 Javascript
javascript遍历对象的五种方式实例代码
Oct 24 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水印技术
2007/02/14 PHP
IIS6+PHP5+MySQL5+Zend Optimizer+phpMyAdmin安装配置图文教程 2009年
2009/06/08 PHP
PHP获取http请求的头信息实现步骤
2012/12/16 PHP
zend framework文件上传功能实例代码
2013/12/25 PHP
学习php设计模式 php实现享元模式(flyweight)
2015/12/07 PHP
Laravel构建即时应用的一种实现方法详解
2017/08/31 PHP
PHP基于rabbitmq操作类的生产者和消费者功能示例
2018/06/16 PHP
IE与firefox之jquery用法区别
2008/10/03 Javascript
Javascript倒计时代码
2010/08/12 Javascript
原生js实现查找/添加/删除/指定元素的class
2013/04/12 Javascript
JS中setTimeout()的用法详解
2013/04/14 Javascript
javascript去掉前后空格的实例
2013/11/07 Javascript
JavaScript的设计模式经典之建造者模式
2016/02/24 Javascript
三种Node.js写文件的方式
2016/03/08 Javascript
JS设置时间无效问题的解决办法
2017/02/18 Javascript
使用JavaScript实现在页面中显示距离2017年中秋节的天数
2017/09/26 Javascript
vue2.0 自定义 饼状图 (Echarts)组件的方法
2018/03/02 Javascript
微信小程序实现带参数的分享功能(两种方法)
2019/05/17 Javascript
JavaScript设计模型Iterator实例解析
2020/01/22 Javascript
Python文件与文件夹常见基本操作总结
2016/09/19 Python
python编程实现12306的一个小爬虫实例
2017/12/27 Python
Python爬取十篇新闻统计TF-IDF
2018/01/03 Python
Django Rest framework频率原理与限制
2019/07/26 Python
Python基于mediainfo批量重命名图片文件
2020/12/29 Python
详解CSS3中@media的实际使用
2015/08/04 HTML / CSS
html5借用repeating-linear-gradient实现一把刻度尺(ruler)
2019/09/09 HTML / CSS
ghd法国官方网站:英国最受欢迎的美发工具品牌
2019/04/18 全球购物
函授毕业自我鉴定
2013/12/19 职场文书
应届大学生简历中的自我评价
2014/01/15 职场文书
篮球比赛口号
2014/06/10 职场文书
2014年度个人工作总结范文
2015/03/09 职场文书
毕业实习单位意见
2015/06/04 职场文书
首次购房证明
2015/06/19 职场文书
财务会计个人原因辞职信
2019/06/21 职场文书
送给客户微信问候语!
2019/07/04 职场文书
python 如何获取页面所有a标签下href的值
2021/05/06 Python