[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 相关文章推荐
HTML node相关的一些资料整理
Jan 01 Javascript
jQuery Ajax请求状态管理器打包
May 03 Javascript
String.prototype实现的一些javascript函数介绍
Nov 22 Javascript
jQuery html()方法使用不了无法显示内容的问题
Aug 06 Javascript
javascript关于继承的用法汇总
Dec 20 Javascript
浅谈javascript中onbeforeunload与onunload事件
Dec 10 Javascript
JavaScript动态添加css样式和script标签
Jul 19 Javascript
footer定位页面底部(代码分享)
Mar 07 Javascript
详解Vue监听数据变化原理
Mar 08 Javascript
Vue.js 图标选择组件实践详解
Dec 03 Javascript
vue获取时间戳转换为日期格式代码实例
Apr 17 Javascript
Vue对象赋值视图不更新问题及解决方法
Jun 03 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
自己做矿石收音机
2021/03/02 无线电
PHP初学者最感迷茫的问题小结
2010/03/27 PHP
Drupal7连接多个数据库及常见问题解决
2014/03/02 PHP
PHP判断文章里是否有图片的简单方法
2014/07/26 PHP
PHP图片自动裁切应付不同尺寸的显示
2014/10/16 PHP
PHP网络操作函数汇总
2015/05/18 PHP
php获取英文姓名首字母的方法
2015/07/13 PHP
ThinkPHP开发框架函数详解:C方法
2015/08/14 PHP
php实现的二分查找算法示例
2017/06/20 PHP
多浏览器支持的右下角浮动窗口
2010/04/01 Javascript
jQuery中;function($,undefined) 前面的分号的用处
2014/12/17 Javascript
javascript实现简单的省市区三级联动
2015/05/14 Javascript
jquery插件pagination实现无刷新ajax分页
2015/09/30 Javascript
jQuery插件FusionCharts绘制的2D帕累托图效果示例【附demo源码】
2017/03/28 jQuery
react-native DatePicker日期选择组件的实现代码
2017/09/12 Javascript
详解使用PM2管理nodejs进程
2017/10/24 NodeJs
Bootstrap模态对话框中显示动态内容的方法
2018/08/10 Javascript
Vue源码解读之Component组件注册的实现
2018/08/24 Javascript
在vue项目中集成graphql(vue-ApolloClient)
2018/09/08 Javascript
基于Vue实现图片在指定区域内移动的思路详解
2018/11/11 Javascript
深入学习JavaScript中的bom
2019/05/27 Javascript
用Nodejs实现在终端中炒股的实现
2020/10/18 NodeJs
vue router-link 默认a标签去除下划线的实现
2020/11/06 Javascript
原生js实现滑块区间组件
2021/01/20 Javascript
[02:17]2016国际邀请赛中国区预选赛VG战队领队采访
2016/06/26 DOTA
Python标准异常和异常处理详解
2015/02/02 Python
Python自动生产表情包
2017/03/17 Python
Python创建对称矩阵的方法示例【基于numpy模块】
2017/10/12 Python
PyQt5固定窗口大小的方法
2019/06/18 Python
解决Python正则表达式匹配反斜杠''\''问题
2019/07/17 Python
使用Tensorboard工具查看Loss损失率
2020/02/15 Python
Python bisect模块原理及常见实例
2020/06/17 Python
Python测试框架:pytest学习笔记
2020/10/20 Python
大学生旅游业创业计划书
2014/01/29 职场文书
2015年个人自我剖析材料
2014/12/29 职场文书
浅谈MySQL之浅入深出页原理
2021/06/23 MySQL