[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 相关文章推荐
js 内存释放问题
Apr 25 Javascript
JavaScript初学者应注意的七个细节详细介绍
Dec 27 Javascript
JavaScript编写连连看小游戏
Jul 07 Javascript
JavaScript实现相册弹窗功能(zepto.js)
Jun 21 Javascript
Bootstrap Metronic完全响应式管理模板之菜单栏学习笔记
Jul 08 Javascript
原生JS实现风箱式demo,并封装了一个运动框架(实例代码)
Jul 22 Javascript
IntersectionObserver API 详解篇
Dec 11 Javascript
Bootstrap进度条实现代码解析
Mar 07 Javascript
vue项目中使用axios上传图片等文件操作
Nov 02 Javascript
mongodb初始化并使用node.js实现mongodb操作封装方法
Apr 02 Javascript
Vue.js自定义指令学习使用详解
Oct 19 Javascript
插件导致ECharts被全量引入的坑示例解析
Sep 23 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
支付宝服务窗API接口开发php版本
2016/07/20 PHP
AJAX的使用方法详解
2017/04/29 PHP
禁止刷新,回退的JS
2006/11/25 Javascript
网上应用的一个不错common.js脚本
2007/08/08 Javascript
锋利的jQuery 第三章章节总结的例子
2010/03/23 Javascript
jQuery中(function(){})()执行顺序的理解
2013/03/05 Javascript
JQuery设置和去除disabled属性的5种方法总结
2013/05/16 Javascript
js实现两个值相加alert出来精确到指定位
2013/09/25 Javascript
javascript异步编程的4种方法
2014/02/19 Javascript
JavaScript两种跨域技术全面介绍
2014/04/16 Javascript
NodeJS实现阿里大鱼短信通知发送
2016/01/17 NodeJs
谈一谈jQuery核心架构设计
2016/03/28 Javascript
利用node.js本地搭建HTTP服务器
2017/04/19 Javascript
如何在 Vue.js 中使用第三方js库
2017/04/25 Javascript
JS使用正则表达式找出最长连续子串长度
2017/10/26 Javascript
Vue框架下引入ActiveX控件的问题解决
2019/03/25 Javascript
Python3控制路由器——使用requests重启极路由.py
2016/05/11 Python
深入理解python对json的操作总结
2017/01/05 Python
python中使用%与.format格式化文本方法解析
2017/12/27 Python
python验证码识别教程之利用滴水算法分割图片
2018/06/05 Python
django解决跨域请求的问题详解
2019/01/20 Python
python matplotlib画图库学习绘制常用的图
2019/03/19 Python
Django中Middleware中的函数详解
2019/07/18 Python
Django的用户模块与权限系统的示例代码
2019/07/24 Python
python实现PDF中表格转化为Excel的方法
2020/06/16 Python
COACH德国官方网站:纽约现代奢侈品牌,1941年
2018/06/09 全球购物
解除合同协议书
2014/04/17 职场文书
生日庆典策划方案
2014/06/02 职场文书
教师求职自荐书
2014/06/14 职场文书
金融管理专业求职信
2014/07/10 职场文书
优秀高中学生评语
2014/12/30 职场文书
导师对论文的学术评语
2015/01/04 职场文书
幼儿园教学工作总结2015
2015/05/12 职场文书
优秀毕业生主要事迹材料
2015/11/04 职场文书
goland 清除所有的默认设置操作
2021/04/28 Golang
使用Python开发贪吃蛇游戏 SnakeGame
2022/04/30 Python