[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 ajax执行后台方法
Mar 18 Javascript
jquery事件与函数的使用介绍
Sep 29 Javascript
javascript关于继承的用法汇总
Dec 20 Javascript
HTML5实现留言和回复页面样式
Jul 22 Javascript
javascript 判断页面访问方式电脑或者移动端
Sep 19 Javascript
AngularJS实现在ng-Options加上index的解决方法
Nov 03 Javascript
vue双向绑定简要分析
Mar 23 Javascript
在 Node.js 中使用原生 ES 模块方法解析
Sep 19 Javascript
详解vue中使用express+fetch获取本地json文件
Oct 10 Javascript
基于Vue中点击组件外关闭组件的实现方法
Mar 06 Javascript
vue小白入门教程
Apr 02 Javascript
Threejs实现滴滴官网首页地球动画功能
Jul 13 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 var_dump()函数的详解
2013/06/05 PHP
thinkPHP简单调用函数与类库的方法
2017/03/15 PHP
基于ThinkPHP5.0实现图片上传插件
2017/09/25 PHP
js树形控件脚本代码
2008/07/24 Javascript
javascript的onchange事件与jQuery的change()方法比较
2009/09/28 Javascript
JS实现控制表格内指定单元格内容对齐的方法
2015/03/30 Javascript
一看就懂:jsonp详解
2015/06/01 Javascript
Javascript实现检测客户端类型代码封包
2015/12/03 Javascript
AngularJS Ajax详解及示例代码
2016/08/17 Javascript
老生常谈Javascript中的原型和this指针
2016/10/09 Javascript
jQuery ajax的功能实现方法详解
2017/01/06 Javascript
jquery自定义显示消息数量
2017/12/19 jQuery
详解NODEJS的http实现
2018/01/04 NodeJs
Angular4学习教程之DOM属性绑定详解
2018/01/04 Javascript
vue使用自定义事件的表单输入组件用法详解【日期组件与货币组件】
2020/06/01 Javascript
html中创建并调用vue组件的几种方法汇总
2020/11/17 Javascript
使用pandas实现csv/excel sheet互相转换的方法
2018/12/10 Python
Python+OpenCV图片局部区域像素值处理改进版详解
2019/01/23 Python
基于Tensorflow高阶读写教程
2020/02/10 Python
Django 如何使用日期时间选择器规范用户的时间输入示例代码详解
2020/05/22 Python
Python lambda表达式原理及用法解析
2020/08/18 Python
Python datetime模块的使用示例
2021/02/02 Python
Python爬虫爬取微博热搜保存为 Markdown 文件的源码
2021/02/22 Python
python元组拆包实现方法
2021/02/28 Python
沙特阿拉伯家用电器和电子产品购物网站:Sheta and Saif
2020/04/03 全球购物
精细化工应届生求职信
2013/11/17 职场文书
中学教师岗位职责
2013/11/26 职场文书
旷课检讨书2000字
2014/01/14 职场文书
《小鹰学飞》教学反思
2014/04/23 职场文书
电子商务优秀毕业生求职信
2014/07/11 职场文书
2015年度培训工作总结范文
2015/04/02 职场文书
2015年宣传思想工作总结
2015/05/22 职场文书
给校长的建议书作文300字
2015/09/14 职场文书
中国梦党课学习心得体会
2016/01/05 职场文书
MySQL 数据丢失排查案例
2021/05/08 MySQL
详解 TypeScript 枚举类型
2021/11/02 Javascript