[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 相关文章推荐
JavaScript Perfection kill 测试及答案
Mar 23 Javascript
jQuery对表单元素的取值和赋值操作代码
May 19 Javascript
借助javascript代码判断网页是静态还是伪静态
May 05 Javascript
个人总结的一些JavaScript技巧、实用函数、简洁方法、编程细节
Jun 10 Javascript
JavaScript中var关键字的使用详解
Aug 14 Javascript
JavaScript中点击事件的写法
Jun 28 Javascript
快速解决js开发下拉框中blur与click冲突
Oct 10 Javascript
angularJs关于指令的一些冷门属性详解
Oct 24 Javascript
微信小程序 后台登录(非微信账号)实例详解
Mar 31 Javascript
Vue.js 无限滚动列表性能优化方案
Dec 02 Javascript
浅谈vue获得后台数据无法显示到table上面的坑
Aug 13 Javascript
React中使用Vditor自定义图片详解
Dec 25 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
php4的session功能评述(二)
2006/10/09 PHP
PHP 网页过期时间的控制代码
2009/06/29 PHP
利用PHP函数计算中英文字符串长度的方法
2014/11/11 PHP
php购物车实现方法
2015/01/03 PHP
PHP中使用file_get_contents post数据代码例子
2015/02/13 PHP
orm获取关联表里的属性值
2016/04/17 PHP
PHP中常用的数组操作方法笔记整理
2016/05/16 PHP
jQuery弹出(alert)select选择的值
2013/04/21 Javascript
解析jQuery与其它js(Prototype)库兼容共存
2013/07/04 Javascript
js中如何把字符串转化为对象、数组示例代码
2013/07/17 Javascript
js替换字符串的所有示例代码
2013/07/23 Javascript
基于jquery的手风琴图片展示效果实现方法
2014/12/16 Javascript
简洁实用的BootStrap jQuery手风琴插件
2016/08/31 Javascript
JavaScript SHA1加密算法实现详细代码
2016/10/06 Javascript
JavaScript模板引擎Template.js使用详解
2016/12/15 Javascript
微信小程序中input标签详解及简单实例
2017/05/18 Javascript
Vue表单控件绑定图文详解
2019/02/11 Javascript
解决Idea、WebStorm下使用Vue cli脚手架项目无法使用Webpack别名的问题
2019/10/11 Javascript
JS实现小星星特效
2019/12/24 Javascript
小程序自定义弹框效果
2020/11/16 Javascript
python生成随机验证码(中文验证码)示例
2014/04/03 Python
python中is与双等于号“==”的区别示例详解
2017/11/21 Python
python检索特定内容的文本文件实例
2018/06/05 Python
对Python _取log的几种方式小结
2019/07/25 Python
简单了解python filter、map、reduce的区别
2020/01/14 Python
Python3爬虫关于识别点触点选验证码的实例讲解
2020/07/30 Python
Python虚拟环境的创建和使用详解
2020/09/07 Python
Python判断变量是否是None写法代码实例
2020/10/09 Python
全球最大的房车租赁市场:Outdoorsy
2018/09/19 全球购物
中华美德颂演讲稿
2014/05/20 职场文书
经贸日语专业自荐信
2014/09/02 职场文书
个人四风问题对照检查材料思想汇报
2014/10/06 职场文书
绿色校园广播稿
2014/10/13 职场文书
2019年入党思想汇报
2019/03/25 职场文书
Python 数据科学 Matplotlib图库详解
2021/07/07 Python
MySQL存储过程及语法详解
2022/08/05 MySQL