`
johnson_gong
  • 浏览: 12431 次
  • 性别: Icon_minigender_1
  • 来自: 重庆
社区版块
存档分类
最新评论

javascrpt 代码复用之继承

 
阅读更多

参考资料:

《JavaScript 模式》(<< JavaScript Patterns >>)

中国电力出版社。Stoyan Stefanov著, 陈新 译。

 

 

1.原型继承;

var Main = {};

/**
原型继承
prototypal inheitance.
*/
Main.createObj = function(o){
    function F() {};
    F.prototype = o;
    return new F();
};

function Person(pName){
    this.name = pName || "Adam";
};

Person.prototype.getName = function() {
return this.name;
};

Person.prototype.color = "red";

Main.testPrototypal = function(o){
    var papa = new Person();
    var kid = Main.createObj(papa);
    
    console.info(kid.getName());
    console.info("kid-name:" + kid.hasOwnProperty("name"));
    console.info("kid-color:" + kid.hasOwnProperty("color"));
    console.info("kid-getName:" + kid.hasOwnProperty("getName"));
    
    console.info("papa-name:" + papa.hasOwnProperty("name"));// papa-name:true
    console.info("papa-color:" + papa.hasOwnProperty("color"));
    console.info("papa-getName:" + papa.hasOwnProperty("getName"));
};

 

 

2. 通过复制属性实现继承;

2.1 浅复制

/**
复制属性实现继承--浅复制 (shallow copy)<br/>
修改子对象会 影响 父对象!!
*/
Main.extend = function(parent, child) {
    var i;
    child = child || {};
    for (i in parent) {
        if (parent.hasOwnProperty(i)) {
            child[i] = parent[i];
        }
    }
    return child;
};

/**
浅复制
*/
Main.testShallowCopy = function(){

console.info(" >>> Main.testShallowCopy");
    var Car = {
        doors: [1,2,3,4],
        energy: {price: "$2.00"}
    };
    
    var oneCar = Main.extend(Car);
    // 修改子对象会 影响 父对象!!
    oneCar.doors.push(9);
    
    // oneCar.doors, 1,2,3,4,9
    console.info("oneCar.doors, " + oneCar.doors.toString());
    // Car.doors, 1,2,3,4,9
    console.info("Car.doors, " + Car.doors.toString());
};

2.2 深度复制 

 

/**
复制属性实现继承--深度复制 (deep copy)<br/>
*/
Main.extendDeep = function(parent, child) {
var i,
    toStr = Object.prototype.toString,
    astr = "[object Array]";
    
child = child || {};

for(i in parent) {
    if(parent.hasOwnProperty(i)){
        if(typeof parent[i] === "object"){
            child[i] = (toStr.call(parent[i]) === astr) ? []:{};
            Main.extendDeep(parent[i], child[i]);
        }else{
            child[i] = parent[i];
        }
    }
}
return child;

};


/**
深度复制
*/
Main.testDeepCopy = function(){
    console.info(" >>> Main.testDeepCopy");
    var Car = {
        doors: [5,6,7,8],
        energy: {price: "$2.00"}
    };
    
    var oneCar = Main.extendDeep(Car);
    // 修改子对象 不会影响 父对象!!
    oneCar.doors.push(1);
    
    // oneCar.doors, 5,6,7,8,1
    console.info("oneCar.doors, " + oneCar.doors.toString());
    // Car.doors, 5,6,7,8
    console.info("Car.doors, " + Car.doors.toString());
};

 

 

分享到:
评论

相关推荐

    简单谈谈javascript代码复用模式

    主要简单谈谈javascript代码复用模式,主要详细介绍了类式继承模式中的默认模式,希望大家能够喜欢。

    JavaScript代码复用模式详解

    在谈及代码复用的时候,我们首先可以想到的是继承性。代码复用的原则是: 优先使用对象组合,而不是类继承 在js中,由于没有类的概念,因此实例的概念也就没多大意义,js中的对象是简单的键-值对,可以动态的创建和...

    【JavaScript源代码】简单谈谈JavaScript寄生式组合继承.docx

    简单谈谈JavaScript寄生式组合继承  组合继承也被称为伪经典继承,它综合了我们昨天说的原型链和盗用构造函数,将俩者的有点结合在了一起。它的基本思想是使用原型链继承原型上的属性和方法,通过盗用构造函数继承...

    JavaScript模式中文[pdf] 百度云

     第6章 代码复用模式  传统与现代继承模式的比较  使用类式继承时的预期结果  类式继承模式#1——默认模式  类式继承模式#2——借用构造函数  类式继承模式#3——借用和设置原型  类式继承模式#4——共享原型...

    深入理解JavaScript系列(46):代码复用模式(推荐篇)详解

    主要介绍了深入理解JavaScript系列(46):代码复用模式(推荐篇)详解,本文讲解了原型继承、复制所有属性进行继承、混合(mix-in)、借用方法等模式,需要的朋友可以参考下

    JavaScript for PHP Developers(中文版)第2版

    深入介绍的面向对象特性,包括原型、代码复用和继承。学习内建的API并了解其全局函数、属性和对象。学习最新的ECMAScript5标准的更新之处。在为大型应用程序编码的时候,使用常用的设计模式。 致谢 前言 第1章简介 ...

    JavaScript模式 斯托扬·斯特凡洛夫 著

    第6章 代码复用模式 传统与现代继承模式的比较 使用类式继承时的预期结果 类式继承模式#1——默认模式 类式继承模式#2——借用构造函数 类式继承模式#3——借用和设置原型 类式继承模式#4——共享原型 类式继承模式#...

    聊聊JavaScript如何实现继承及特点

    “继承”是面向对象编程里面经常提及到的概念,它的目的是实现代码复用。JavaScript并没有“类”的概念,那么,它如何实现继承呢? (ES6有关键字class和extend,继承的语法与Java等面向对象语言类似,但是,ES6 ...

    JavaScript你一定要搞懂的原型链

    能学到什么:理解原型链对于 JavaScript 开发者来说非常重要,因为它影响了对象的属性访问、继承和代码复用等方面。通过掌握原型链的概念和工作原理,开发者可以更好地利用 JavaScript 的面向对象特性。 这是一个可...

    JavaScript程序设计课件:面向对象概述.pptx

    代码结构混乱,不易维护,不易复用,不易扩展。 面向对象 面向对象有封装、继承、多态性的特性,所以具有易维护、易复用、易扩展的特点。 类的调用需要实例化,开销较大,因此性能方面较面向过程低。 6.1.1 面向过程...

    老生常谈 关于JavaScript的类的继承

    继承,即复用。 如果抛开继承的固有思想,让b复用a的成员,最简单粗暴的做法, b=a; 那么,问题来了: 对b的任何改动,就是对a的改动(同一个object嘛)。 好吧,那就拷贝一份,浅拷贝不够安全的话,就用深拷贝。 问题:...

    javascript 继承学习心得总结

    看了不少js继承的东西也该总结总结了。 先说一下大概的理解,有不对的还望指正,也好更正一下三观。另外说明下,下面的例子并非原创基本就是改了个...真正是用来干啥的呢,主要是用来复用我们之前写过的代码。比如写过

    阿里巴巴技术文章分享 Javascript继承机制的实现

    难道把所有的共有逻辑都拷贝一遍,实现最低级的代码复用? 答案当然是——NO,所以,我们要自己实现继承! 目标 最关键的目标当然是继承——子类自动拥有父类的所有公共属性和方法。 支持instanceof,例如c是子类的...

    Javascript组合继承方法代码实例解析

    组合继承,指将原型链和借用构造函数的技术组合到一块,从而发挥二者之长的一种继承模式。其背后思路使用用原型链实现对原型属性和方法的继承,而通过构造函数来实现对实例属性的继承。这样,即通过在原型上定义方法...

    JavaScript深度复制(deep clone)的实现方法

    谈到代码复用的时候,很有可能想到的是代码的继承性(inheritance),但重要的是要记住其最终目标——我们要复用代码。继承性只是实现代码复用的一种手段,而不是唯一的方法。复制属性也是一种复用模式,它跟继承性是...

    编写高质量代码-Web前端开发修炼之道.azw3

    4.4.3 挂多个class还是新建class——多用组合,少用继承 4.4.4 如何处理上下margin 4.5 低权重原则——避免滥用子选择器 4.6 CSS sprite 4.7 CSS的常见问题 4.7.1 CSS的编码风格 4.7.2 id和class 4.7.3 CSS ...

    数据结构与算法:进度40%以C语言严谨描述数据结构与算法,同时以Go、JavaScript、C++等语言以简洁方式实现

    源码中并未采取面向接口、继承等思想来实现工具方法的复用,笔者认为不应该将编程语言的学习成本带入数据结构,笔者的意愿是:学习者拿到每个数据结构,都可以做到信手使用,而不是还要反复查询其继承、实现结构。

Global site tag (gtag.js) - Google Analytics