[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验证Checkbox是否选中的代码 推荐
Sep 04 Javascript
js获取url中的参数且参数为中文时通过js解码
Mar 19 Javascript
css与javascript跨浏览器兼容性总结
Sep 15 Javascript
使用script的src实现跨域和类似ajax效果
Nov 10 Javascript
js给网页加上背景音乐及选择音效的方法
Mar 03 Javascript
基于Bootstrap重置输入框内容按钮插件
May 12 Javascript
如何解决手机浏览器页面点击不跳转浏览器双击放大网页
Jul 01 Javascript
AngularJS表单基本操作
Jan 09 Javascript
抖音上用记事本编写爱心小程序教程
Apr 17 Javascript
解决layui使用layui-icon出现默认图标的问题
Sep 11 Javascript
js实现带箭头的进度流程
Mar 26 Javascript
JavaScript实现显示和隐藏图片
Apr 29 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中的HashTable结构详解
2013/06/13 PHP
php中使用PHPExcel读写excel(xls)文件的方法
2014/09/15 PHP
跟我学Laravel之视图 & Response
2014/10/15 PHP
使用 PHP Masked Package 屏蔽敏感数据的实现方法
2019/10/15 PHP
javascript与webservice的通信实现代码
2010/12/25 Javascript
Ajax搜索结果页面下方的分页按钮的生成
2012/04/05 Javascript
JS图片无缝滚动(简单利于使用)
2013/06/17 Javascript
使用jQuery UI的tooltip函数修饰title属性的气泡悬浮框
2013/06/24 Javascript
JavaScript link方法入门实例(给字符串加上超链接)
2014/10/17 Javascript
jquery 构造函数在表单提交过程中修改数据
2015/05/25 Javascript
Adapter适配器模式在JavaScript设计模式编程中的运用分析
2016/05/18 Javascript
去除html代码里面的script正则方法
2016/05/19 Javascript
Javascript获取background属性中url的值
2016/10/17 Javascript
前端开发不得不知的10个最佳ES6特性
2017/08/30 Javascript
vue项目中的webpack-dev-sever配置方法
2017/12/14 Javascript
vueJs实现DOM加载完之后自动下拉到底部的实例代码
2018/08/31 Javascript
关于在LayUI中使用AJAX提交巨坑记录
2019/10/25 Javascript
Layui数据表格之单元格编辑方式
2019/10/26 Javascript
简单了解vue 插值表达式Mustache
2020/07/22 Javascript
[01:34]2014DOTA2展望TI 剑指西雅图VG战队专访
2014/06/30 DOTA
[01:14:30]TNC vs VG 2019国际邀请赛淘汰赛 胜者组赛BO3 第二场 8.20.mp4
2019/08/22 DOTA
Python使用内置json模块解析json格式数据的方法
2017/07/20 Python
Python调用.net动态库实现过程解析
2020/06/05 Python
Calzedonia美国官网:意大利风格袜子、打底裤和沙滩装
2018/07/19 全球购物
Invicta手表官方商店:百年制表历史的瑞士腕表品牌
2019/09/26 全球购物
大学生毕业自我鉴定
2013/11/06 职场文书
农村党支部先进事迹
2014/01/14 职场文书
《藏戏》教学反思
2014/02/11 职场文书
检查接待方案
2014/02/27 职场文书
中药学专业求职信
2014/05/31 职场文书
返乡农民工证明
2015/06/24 职场文书
结婚纪念日感言
2015/08/01 职场文书
分布式锁为什么要选择Zookeeper而不是Redis?看完这篇你就明白了
2021/05/21 Redis
10大幻兽系恶魔果实 蝙蝠果实上榜,第一自愈能力强
2022/03/18 日漫
python中的random模块和相关函数详解
2022/04/22 Python
关于vue-router-link选择样式设置
2022/04/30 Vue.js