[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 获得绝对,相对位置的坐标方法
Feb 09 Javascript
suggestion开发小结以及对键盘事件的总结(针对中文输入法状态)
Dec 20 Javascript
Jquery带搜索框的下拉菜单
May 06 Javascript
JS 实现图片直接下载示例代码
Jul 22 Javascript
jquery得到iframe src属性值的方法
Sep 25 Javascript
浅谈 javascript 事件处理
Jan 04 Javascript
js图片加载效果实例代码(延迟加载+瀑布流加载)
May 12 Javascript
微信小程序之swiper轮播图中的图片自适应高度的方法
Apr 23 Javascript
Vue3.0中的monorepo管理模式的实现
Oct 14 Javascript
jQuery 选择器用法基础入门示例
Jan 04 jQuery
JS实现滑动插件
Jan 15 Javascript
vue实现计算器功能
Feb 22 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
Drupal7中常用的数据库操作实例
2014/03/02 PHP
php找出指定范围内回文数且平方根也是回文数的方法
2015/03/23 PHP
php模板引擎技术简单实现
2016/03/15 PHP
PHP中大括号'{}'用法实例总结
2017/02/08 PHP
CMSPRESS 10行代码搞定 PHP无限级分类2
2018/03/30 PHP
js 判断浏览器类型 去全角、半角空格 自动关闭当前窗口
2009/04/10 Javascript
JS request函数 用来获取url参数
2010/05/17 Javascript
在css加载完毕后自动判断页面是否加入css或js文件
2014/09/10 Javascript
JavaScript中常用的六种互动方法示例
2015/03/13 Javascript
jquery+CSS实现的水平布局多级网页菜单效果
2015/08/24 Javascript
基于jQuery实现的美观星级评论打分组件代码
2015/10/30 Javascript
浅谈jquery.form.js的ajaxSubmit和ajaxForm的使用
2016/09/09 Javascript
ReactNative-JS 调用原生方法实例代码
2016/10/08 Javascript
详解JavaScript中this的指向问题
2017/01/20 Javascript
详解使用angular的HttpClient搭配rxjs
2017/09/01 Javascript
Node.js中使用mongoose操作mongodb数据库的方法
2017/09/12 Javascript
JS实现查找数组中对象的属性值是否存在示例
2019/05/24 Javascript
jQuery实现容器间的元素拖拽功能
2020/12/01 jQuery
[01:27]2014DOTA2展望TI 剑指西雅图IG战队专访
2014/06/30 DOTA
[00:39]DOTA2上海特级锦标赛 Liquid战队宣传片
2016/03/04 DOTA
python中使用urllib2获取http请求状态码的代码例子
2014/07/07 Python
Python生成器(Generator)详解
2015/04/13 Python
Python中字典和集合学习小结
2017/07/07 Python
浅析Git版本控制器使用
2017/12/10 Python
python绘制立方体的方法
2018/07/02 Python
Python文件循环写入行时防止覆盖的解决方法
2018/11/09 Python
使用python实现数组、链表、队列、栈的方法
2019/12/20 Python
Python抖音快手代码舞(字符舞)的实现方法
2021/02/07 Python
详解HTML5中div和section以及article的区别
2015/07/14 HTML / CSS
浅析移动设备HTML5页面布局
2015/12/01 HTML / CSS
html5中的一些标签学习(心得)
2016/10/18 HTML / CSS
意大利珠宝店:Luxury Zone
2019/01/05 全球购物
使用索引(Index)有哪些需要考虑的因素
2016/10/19 面试题
四查四看剖析材料
2014/02/14 职场文书
电子表的操作介绍说明书
2019/10/28 职场文书
VW、VH适配移动端的解决方案与常见问题
2023/05/21 HTML / CSS