[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弹窗代码 可以指定弹出间隔
Jul 03 Javascript
JavaScript 函数replace深入了解
Mar 14 Javascript
JS解决ie6下png透明的方法实例
Aug 02 Javascript
js实现收缩菜单效果实例代码
Oct 30 Javascript
AngularJS模仿Form表单提交的实现代码
Dec 08 Javascript
Bootstrap modal 多弹窗之叠加关闭阴影遮罩问题的解决方法
Feb 27 Javascript
Java与JavaScript中判断两字符串是否相等的区别
Mar 13 Javascript
vue-cli监听组件加载完成的方法
Sep 07 Javascript
JavaScript计算正方形面积
Nov 26 Javascript
vue中的计算属性和侦听属性
Nov 06 Javascript
关于JavaScript回调函数的深入理解
Jun 27 Javascript
详解TypeScript的基础类型
Feb 18 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缓存类代码(附详细说明)
2011/06/09 PHP
用穿越火线快速入门php面向对象
2012/02/22 PHP
php使用SAE原生Mail类实现各种类型邮件发送的方法
2016/10/10 PHP
PHP常见数组排序方法小结
2018/08/20 PHP
Laravel 将数据表的数据导出,并生成seeds种子文件的方法
2019/10/09 PHP
php+js实现的拖动滑块验证码验证表单操作示例【附源码下载】
2020/05/27 PHP
Textarea与懒惰渲染实现代码
2012/01/04 Javascript
JS实现跟随鼠标闪烁转动色块的方法
2015/02/26 Javascript
IE7浏览器窗口大小改变事件执行多次bug及IE6/IE7/IE8下resize问题
2015/08/21 Javascript
简介alert()与console.log()的不同
2015/08/26 Javascript
微信小程序 icon组件详细及实例代码
2016/10/25 Javascript
通过vue提供的keep-alive减少对服务器的请求次数
2018/04/01 Javascript
JavaScript闭包与作用域链实例分析
2019/01/21 Javascript
JavaScript原型继承和原型链原理详解
2020/02/04 Javascript
JavaScript实现瀑布流布局的3种方式
2020/12/27 Javascript
Python ZipFile模块详解
2013/11/01 Python
python实现带验证码网站的自动登陆实现代码
2015/01/12 Python
详解python发送各类邮件的主要方法
2016/12/22 Python
Python使用当前时间、随机数产生一个唯一数字的方法
2017/09/18 Python
浅谈Python peewee 使用经验
2017/10/20 Python
Python OpenCV处理图像之图像像素点操作
2018/07/10 Python
利用python numpy+matplotlib绘制股票k线图的方法
2019/06/26 Python
使用Python完成15位18位身份证的互转功能
2019/11/06 Python
详解pandas中iloc, loc和ix的区别和联系
2020/03/09 Python
通过代码实例解析Pytest运行流程
2020/08/20 Python
使用placeholder属性设置input文本框的提示信息
2020/02/19 HTML / CSS
AT&T Wireless:手机、无限数据计划和配件
2018/06/03 全球购物
网络工程与软件技术毕业生自荐信
2013/09/24 职场文书
酒店行政人事部经理职务说明书
2014/02/26 职场文书
会计与审计专业自荐信范文
2014/03/15 职场文书
人事代理委托书
2014/09/27 职场文书
工会2014法制宣传日活动总结
2014/11/01 职场文书
房地产项目合作意向书
2015/05/08 职场文书
爱国主义教育基地观后感
2015/06/18 职场文书
Vue Element UI自定义描述列表组件
2021/05/18 Vue.js
解决Navicat for Mysql连接报错1251的问题(连接失败)
2021/05/27 MySQL