[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实现返回顶部
Jan 26 Javascript
微信开发 使用picker封装省市区三级联动模板
Oct 28 Javascript
JS组件系列之Gojs组件 前端图形化插件之利器
Nov 29 Javascript
vue项目国际化vue-i18n的安装使用教程
Mar 14 Javascript
基于打包工具Webpack进行项目开发实例
May 29 Javascript
jQuery 实现倒计时天,时,分,秒功能
Jul 31 jQuery
vue中设置、获取、删除cookie的方法
Sep 21 Javascript
vue路由中前进后退的一些事儿
May 18 Javascript
Javascript Web Worker使用过程解析
Mar 16 Javascript
javascript中的offsetWidth、clientWidth、innerWidth及相关属性方法
May 14 Javascript
webpack 如何同时输出压缩和未压缩的文件的实现步骤
Jun 05 Javascript
js实现简单的轮播图效果
Dec 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知识收集
2012/08/20 PHP
求帮忙修改个php curl模拟post请求内容后并下载文件的解决思路
2015/09/20 PHP
兼容多浏览器的iframe自适应高度(ie8 、谷歌浏览器4.0和 firefox3.5.3)
2009/11/04 Javascript
jQuery函数map()和each()介绍及异同点分析
2014/11/08 Javascript
jQuery使用append在html元素后同时添加多项内容的方法
2015/03/26 Javascript
JavaScript+CSS无限极分类效果完整实现方法
2015/12/22 Javascript
JavaScript时间操作之年月日星期级联操作
2016/01/15 Javascript
JQuery ztree 异步加载实例讲解
2016/02/25 Javascript
JS中setTimeout的巧妙用法前端函数节流
2016/03/24 Javascript
jquery分页插件jquery.pagination.js使用方法解析
2016/04/01 Javascript
jQuery实现图片向左向右切换效果的简单实例
2016/05/18 Javascript
JS Canvas定时器模拟动态加载动画
2016/09/17 Javascript
玩转NODE.JS(四)-搭建简单的聊天室的代码
2016/11/11 Javascript
vue实现element-ui对话框可拖拽功能
2018/08/17 Javascript
es6函数之rest参数用法实例分析
2020/04/18 Javascript
vue props 一次传多个值实例
2020/07/22 Javascript
vue 如何从单页应用改造成多页应用
2020/10/23 Javascript
python操作excel的包(openpyxl、xlsxwriter)
2018/06/11 Python
Windows下PyCharm安装图文教程
2018/08/27 Python
python 递归深度优先搜索与广度优先搜索算法模拟实现
2018/10/22 Python
对Python 除法负数取商的取整方式详解
2018/12/12 Python
Python银行系统实战源码
2019/10/25 Python
pytorch 归一化与反归一化实例
2019/12/31 Python
Python 多线程C段扫描、检测 Ping扫描脚本的实现
2020/09/03 Python
python和node.js生成当前时间戳的示例
2020/09/29 Python
应聘自荐信
2013/12/14 职场文书
2014植树节活动总结
2014/03/11 职场文书
幼儿园家长安全责任书
2014/07/22 职场文书
2014领导班子四风问题查摆思想汇报
2014/09/13 职场文书
机关作风建设心得体会
2014/10/22 职场文书
安全先进班组材料
2014/12/26 职场文书
国庆放假通知怎么写
2015/07/30 职场文书
《半截蜡烛》教学反思
2016/02/19 职场文书
小学生作文写作技巧100例,非常实用!
2019/07/08 职场文书
3招让你摆脱即兴讲话冷场尴尬
2019/08/08 职场文书
Python入门之基础语法详解
2021/05/11 Python