[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 相关文章推荐
js借助ActiveXObject实现创建文件
Sep 29 Javascript
一个简单的jquery进度条示例
Apr 28 Javascript
javascript制作网页图片上实现下雨效果
Feb 26 Javascript
Bootstrap 模态框(Modal)带参数传值实例
Aug 20 Javascript
vue Element-ui input 远程搜索与修改建议显示模版的示例代码
Oct 19 Javascript
javascript+css3开发打气球小游戏完整代码
Nov 28 Javascript
使用vue打包时vendor文件过大或者是app.js文件很大的问题
Jun 29 Javascript
微信小程序实现星级评分和展示
Jul 05 Javascript
ES6 Array常用扩展的应用实例分析
Jun 26 Javascript
解决vue项目中页面调用数据 在数据加载完毕之前出现undefined问题
Nov 14 Javascript
js实现内置计时器
Dec 16 Javascript
vue 动态组件用法示例小结
Mar 06 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
利用static实现表格的颜色隔行显示
2006/10/09 PHP
php数组函数序列之array_unique() - 去除数组中重复的元素值
2011/10/29 PHP
thinkphp四种url访问方式详解
2014/11/28 PHP
PHP计算日期相差天数实例分析
2016/02/23 PHP
thinkphp中U方法按路由规则生成url的方法
2018/03/12 PHP
php进程daemon化的正确实现方法
2018/09/06 PHP
Aster vs Newbee BO5 第三场2.19
2021/03/10 DOTA
在textarea中屏蔽js的某个function的javascript代码
2007/04/20 Javascript
JQuery Ajax通过Handler访问外部XML数据的代码
2010/06/01 Javascript
JavaScript 异步方法队列链实现代码分析
2010/06/05 Javascript
jquery插件之信息弹出框showInfoDialog(成功/错误/警告/通知/背景遮罩)
2013/01/09 Javascript
用jquery存取照片的具体实现方法
2013/06/30 Javascript
php与js的区别是什么
2013/08/05 Javascript
innerText 使用示例
2014/01/23 Javascript
浅谈JavaScript事件的属性列表
2015/03/01 Javascript
详解页面滚动值scrollTop在FireFox与Chrome浏览器间的兼容问题
2015/12/03 Javascript
dul无法加载bootstrap实现unload table/user恢复
2016/09/29 Javascript
基于Node的React图片上传组件实现实例代码
2017/05/10 Javascript
深入浅析Nodejs的Http模块
2017/06/20 NodeJs
详解vue-cli 接口代理配置
2017/12/13 Javascript
vue实现随机验证码功能的实例代码
2019/04/30 Javascript
vue 监听 Treeselect 选择项的改变操作
2020/08/31 Javascript
微信小程序向Java后台传输参数的方法实现
2020/12/10 Javascript
html5以及jQuery实现本地图片上传前的预览代码实例讲解
2021/03/01 jQuery
[03:15]2014DOTA2国际邀请赛 专访国士无双信心满满
2014/07/12 DOTA
python监控linux内存并写入mongodb(推荐)
2017/09/11 Python
Python中enumerate()函数编写更Pythonic的循环
2018/03/06 Python
Python3 中把txt数据文件读入到矩阵中的方法
2018/04/27 Python
使用 Python 实现文件递归遍历的三种方式
2018/07/18 Python
Python实现八皇后问题示例代码
2018/12/09 Python
对python特殊函数 __call__()的使用详解
2019/07/02 Python
HTML5拖放API实现拖放排序的实例代码
2017/05/11 HTML / CSS
司法建议书范文
2014/05/13 职场文书
医药公司采购员岗位职责
2014/09/12 职场文书
见习报告的格式
2014/11/04 职场文书
病人慰问信范文
2015/02/15 职场文书