[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 相关文章推荐
javascript实现yield的方法
Nov 06 Javascript
用javascript替换URL中的参数值示例代码
Jan 27 Javascript
java和javascript获取word文档的书签位置对比
Jun 19 Javascript
基于javascript实现listbox左右移动
Jan 29 Javascript
用JS动态改变表单form里的action值属性的两种方法
May 25 Javascript
百度地图JavascriptApi Marker平滑移动及车头指向行径方向
Mar 13 Javascript
node简单实现一个更改头像功能的示例
Dec 29 Javascript
node作为中间服务层如何发送请求(发送请求的实现方法详解)
Jan 02 Javascript
vue加载自定义的js文件方法
Mar 13 Javascript
webpack+vue-cil中proxyTable处理跨域的方法
Jul 20 Javascript
taro小程序添加骨架屏的实现代码
Nov 15 Javascript
javascript之Object.assign()的痛点分析
Mar 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
mysql 全文搜索 技巧
2007/04/27 PHP
PHP正则的Unknown Modifier错误解决方法
2010/03/02 PHP
php并发对MYSQL造成压力的解决方法
2013/02/21 PHP
smarty缓存用法分析
2014/12/16 PHP
分享一则PHP定义函数代码
2015/02/26 PHP
刷新PHP缓冲区为你的站点加速
2015/10/10 PHP
PHP实现微信退款功能
2018/10/02 PHP
Thinkphp5.0 框架实现控制器向视图view赋值及视图view取值操作示例
2019/10/12 PHP
Laravel 读取 config 下的数据方法
2019/10/13 PHP
比较新旧两个数组值得增加和删除的JS代码
2013/10/30 Javascript
ExtJS如何设置与获取radio控件的选取状态
2014/01/22 Javascript
Boostrap入门准备之border box
2016/05/09 Javascript
Ionic + Angular.js实现验证码倒计时功能的方法
2017/06/12 Javascript
ReactNative页面跳转Navigator实现的示例代码
2017/08/02 Javascript
js tab栏切换代码实例解析
2019/09/03 Javascript
vue中添加与删除关键字搜索功能
2019/10/12 Javascript
JavaScript实现随机点名程序
2020/03/25 Javascript
解决pycharm双击但是无法打开的情况
2020/10/31 Javascript
[49:07]VGJ.T vs Optic Supermajor小组赛D组 BO3 第二场 6.3
2018/06/04 DOTA
[46:20]DOTA2-DPC中国联赛 正赛 PSG.LGD vs LBZS BO3 第二场 1月22日
2021/03/11 DOTA
浅谈numpy数组的几种排序方式
2017/12/15 Python
pandas按若干个列的组合条件筛选数据的方法
2018/04/11 Python
用python生成1000个txt文件的方法
2018/10/25 Python
详解Python字符串切片
2019/05/20 Python
Python Map 函数的使用
2020/08/28 Python
PHP开发的一般流程
2013/08/13 面试题
行政部工作岗位职责范本
2014/03/05 职场文书
贷款担保书
2015/01/20 职场文书
2015新学期开学寄语
2015/02/26 职场文书
2015年驾驶员工作总结
2015/04/29 职场文书
雷锋的观后感
2015/06/10 职场文书
2015年除四害工作总结
2015/07/23 职场文书
新郎父亲婚礼致辞
2015/07/27 职场文书
获奖感言一句话
2015/07/31 职场文书
React Hook用法示例详解(6个常见hook)
2021/04/28 Javascript
python中Pyqt5使用Qlabel标签播放视频
2022/04/22 Python