[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 相关文章推荐
ASP.NET jQuery 实例18 通过使用jQuery validation插件校验DropDownList
Feb 03 Javascript
DWZ刷新dialog解决方法
Mar 03 Javascript
JS获取iframe中longdesc属性的方法
Apr 01 Javascript
JavaScript实现仿网易通行证表单验证
May 25 Javascript
JS实现光滑展开合拢的菜单效果代码
Sep 16 Javascript
JS控制弹出悬浮窗口(一览画面)的实例代码
May 30 Javascript
HTML页面定时跳转方法解析(2种任选)
Dec 22 Javascript
原生JS改变透明度实现轮播效果
Mar 24 Javascript
jQuery实现的页面遮罩层功能示例【测试可用】
Oct 14 jQuery
在create-react-app中使用sass的方法示例
Oct 01 Javascript
JS/jQuery实现简单的开关灯效果【案例】
Feb 19 jQuery
JS实现处理时间,年月日,星期的公共方法示例
May 31 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过滤html中的其他网站链接的方法(域名白名单功能)
2014/04/24 PHP
php获取汉字拼音首字母的方法
2015/10/21 PHP
PHP 中提示undefined index如何解决(多种方法)
2016/03/16 PHP
laravel 出现command not found问题的解决方案
2019/10/23 PHP
php使用gearman进行任务分发操作实例详解
2020/02/26 PHP
你的编程语言可以这样做吗?
2006/09/07 Javascript
node.js入门教程
2014/06/01 Javascript
js键盘事件的keyCode
2014/07/29 Javascript
jQuery实现菜单感应鼠标滑动动画效果的方法
2015/02/28 Javascript
深入理解JavaScript编程中的原型概念
2015/06/25 Javascript
javascript 中的 delete及delete运算符
2015/11/15 Javascript
js判断当前页面用什么浏览器打开的方法
2016/01/06 Javascript
js老生常谈之this,constructor ,prototype全面解析
2016/04/05 Javascript
JS代码随机生成姓名、手机号、身份证号、银行卡号
2016/04/27 Javascript
Bootstrap表单Form全面解析
2016/06/13 Javascript
nodejs body-parser 解析post数据实例
2017/07/26 NodeJs
浅谈vue+webpack项目调试方法步骤
2017/09/11 Javascript
实例分析javascript中的异步
2020/06/02 Javascript
vue打开其他项目页面并传入数据详解
2020/11/25 Vue.js
vue 数据操作相关总结
2020/12/17 Vue.js
[01:56]《DOTA2》中文配音CG
2013/04/22 DOTA
python 解析html之BeautifulSoup
2009/07/07 Python
解决python写入mysql中datetime类型遇到的问题
2018/06/21 Python
opencv python 图像去噪的实现方法
2018/08/31 Python
python实现一个简单的ping工具方法
2019/01/31 Python
python opencv 二值化 计算白色像素点的实例
2019/07/03 Python
Python3与fastdfs分布式文件系统如何实现交互
2020/06/23 Python
python中@property的作用和getter setter的解释
2020/12/22 Python
快速一键生成Python爬虫请求头
2021/03/04 Python
用HTML5实现鼠标滚轮事件放大缩小图片的功能
2015/06/25 HTML / CSS
美国受欢迎的女性牛仔裤品牌:DL1961
2016/11/12 全球购物
函授毕业生自我鉴定范文
2014/03/25 职场文书
小学生差生评语
2014/12/29 职场文书
大学生社会实践活动总结报告
2015/05/06 职场文书
摩登时代观后感
2015/06/03 职场文书
Python通用验证码识别OCR库ddddocr的安装使用教程
2022/07/07 Python