[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 相关文章推荐
利用Ext Js生成动态树实例代码
Sep 08 Javascript
利用WebBrowser彻底解决Web打印问题(包括后台打印)
Jun 22 Javascript
通过DOM脚本去设置样式信息
Sep 19 Javascript
jQuery控制图片的hover效果(smartRollover.js)
Mar 18 Javascript
JavaScript作用域链使用介绍
Aug 29 Javascript
js获取字符串字节数方法小结
Jun 09 Javascript
基于Jquery和html5的7款个性化地图插件
Nov 17 Javascript
同步异步动态引入js文件的几种方法总结
Sep 23 Javascript
Vue+jquery实现表格指定列的文字收缩的示例代码
Jan 09 jQuery
bootstrap+jquery项目引入文件报错的解决方法
Jan 22 jQuery
微信小程序将字符串生成二维码图片的操作方法
Jul 17 Javascript
微信小程序动态增加按钮组件
Sep 14 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使用pcntl_fork实现多进程下载图片的方法
2014/12/16 PHP
PHP环形链表实现方法示例
2017/09/15 PHP
PHP中引用类型和值类型功能与用法示例
2019/02/26 PHP
PHP过滤器 filter_has_var() 函数用法实例分析
2020/04/23 PHP
js loading加载效果实现代码
2009/11/24 Javascript
jQuery 行背景颜色的交替显示(隔行变色)实现代码
2009/12/13 Javascript
通过JavaScript使Div居中并随网页大小改变而改变
2013/06/24 Javascript
浏览器打开层自动缓慢展开收缩实例代码
2013/07/04 Javascript
javaScript的函数对象的声明详解
2015/02/06 Javascript
JavaScript中的this,call,apply使用及区别详解
2016/01/29 Javascript
JS中frameset框架弹出层实例代码
2016/04/01 Javascript
浅谈JS原生Ajax,GET和POST
2016/06/08 Javascript
AngularJS中的DOM操作用法分析
2016/11/04 Javascript
jquery.flot.js简单绘制折线图用法示例
2017/03/13 Javascript
详解vue2路由vue-router配置(懒加载)
2017/04/08 Javascript
vue权限路由实现的方法示例总结
2018/07/29 Javascript
微信小程序实现图片选择并预览功能
2019/07/25 Javascript
[02:38]DOTA2 夜魇暗潮2020活动介绍官方视频
2020/11/04 DOTA
Python实现简单字典树的方法
2016/04/29 Python
详解Python文本操作相关模块
2017/06/22 Python
基于Django filter中用contains和icontains的区别(详解)
2017/12/12 Python
python按综合、销量排序抓取100页的淘宝商品列表信息
2018/02/24 Python
anaconda3安装及jupyter环境配置全教程
2020/08/24 Python
python 爬取B站原视频的实例代码
2020/09/09 Python
使用Python快速打开一个百万行级别的超大Excel文件的方法
2021/03/02 Python
VSCode中autopep8无法运行问题解决方案(提示Error: Command failed,usage)
2021/03/02 Python
英国乐购杂货:Tesco Groceries
2018/11/29 全球购物
mysql_pconnect()和mysql_connect()有什么区别
2012/05/25 面试题
毕业实习个人鉴定范文
2013/12/10 职场文书
致共产党员倡议书
2014/04/16 职场文书
学党史心得体会
2014/09/05 职场文书
承诺保证书格式
2015/02/28 职场文书
会计专业求职信范文
2015/03/19 职场文书
canvas绘制折线路径动画实现
2021/05/12 Javascript
让文件路径提取变得更简单的Python Path库
2021/05/27 Python
数据分析数据库ClickHouse在大数据领域应用实践
2022/04/03 MySQL