`
johnson_gong
  • 浏览: 13203 次
  • 性别: 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中对象的创建和继承机制。在软件工程中,代码复用是一种提高开发效率、降低软件维护成本的有效方式。GoF(设计模式的四位作者,即Erich...

    JavaScript代码复用模式详解

    JavaScript代码复用是提高效率和减少冗余的关键实践。它主要依赖于对象组合和原型继承等机制。在JavaScript中,由于没有传统的类概念,而是基于原型的面向对象模型,因此,代码复用的方式与C++或Java等使用类的语言...

    javascript继承之为什么要继承.docx

    JavaScript 继承之为什么要继承 JavaScript 中的继承机制是指子类继承父类的属性和方法,使得子类可以拥有父类的所有特征。继承是面向对象编程的基本机制之一,它可以实现代码复用、提高编程效率和增强代码的可维护...

    javascript控件开发之继承关系

    总的来说,理解并熟练掌握JavaScript的继承机制对于进行控件开发至关重要,它可以帮助我们构建出可扩展、可维护的代码结构,提升代码复用性,从而提高开发效率和应用质量。通过深入学习和实践,开发者可以创建出各种...

    JavaScript中的类继承

    这种继承机制使得JavaScript具有更强的表现力和灵活性,尤其在代码复用和类型安全方面。 类型安全和代码复用是类继承的主要原因。在强类型语言中,类型转换是必要的,以确保数据在不同类型的变量间正确传递。然而,...

    JavaScript代码复用模式实例分析

    JavaScript代码复用是提高开发效率和维护软件质量的重要手段,在日常的前端开发中,开发者经常需要利用已有的代码段来实现新的功能,而不是每次都从头开始编写。代码复用能够减少重复代码的编写,降低出错的几率,...

    JavaScript继承

    继承的主要目的是代码复用和降低耦合度。通过继承,可以在已有类的基础上扩展功能,而不是从零开始编写代码。当需要修改共享的方法时,只需要在一个地方进行,提高了代码维护性。例如,如果多个类都需要`toString`...

    javascript中类和继承(代码示例+prototype.js)

    了解并熟练运用JavaScript中的类和继承对于开发复杂的前端应用至关重要,特别是当需要构建可复用的组件或者模块化应用时。例如,在框架如React或Vue中,组件的定义往往涉及到类和继承的概念,通过继承基类来扩展功能...

    javascript常见代码合集

    这个"javascript常见代码合集"包含了一系列实现常见效果的JavaScript代码示例,可以帮助开发者理解和学习JavaScript的基础以及进阶功能。 1. **变量与数据类型**: JavaScript支持基本数据类型(如字符串、数字、...

    JavaScript学习之三 — JavaScript实现继承的7种方式

    在JavaScript中,面向对象编程是实现复杂功能和代码复用的关键。继承是面向对象的核心特性之一,它允许一个对象(子类)获取另一个对象(父类)的属性和方法。本篇文章将深入探讨JavaScript实现继承的七种常见方式,...

    【JavaScript源代码】JavaScript继承的三种方法实例.docx

    继承是面向对象编程的一个基本特征,它允许一个类(子类)继承另一个类(父类)的属性和方法,以此实现代码复用和结构化设计。 本文将深入探讨JavaScript中的三种主要继承方式,并通过具体的示例来帮助理解这些概念...

    代码复用避免篇1

    在编程领域,代码复用是提高效率和保持代码可...在实际开发中,可以结合使用这些模式,或者考虑使用更现代的JavaScript语法,如ES6的类和`class`关键字,以及`Object.create()`方法,以实现更高效、更安全的代码复用。

    JavaScript王者归来之源代码

    10. **性能优化**:如何编写高性能的JavaScript代码,如避免内存泄漏、减少DOM操作和优化循环。 11. **模块化**:使用CommonJS、AMD或ES6的import/export实现模块化,以便于代码组织和复用。 通过深入研究...

    深入浅出JavaScript源代码

    这些构成了JavaScript语法的基础,是编写任何JavaScript代码的前提。 接着,深入到函数和作用域,这是JavaScript中至关重要的概念。函数可以封装代码,提高可复用性,而作用域则决定了变量的可见性和生命周期。理解...

    代码复用推荐篇1

    本文将介绍四种最佳实践的代码复用模式,适用于JavaScript环境。 首先,**模式1:原型继承**是JavaScript中实现对象继承的一种常见方式。通过让父对象成为子对象的原型,我们可以确保子对象能够访问父对象的所有...

    精通JavaScript源代码.rar

    理解如何通过对象和类来组织代码,以及如何利用继承和多态性来设计可复用的组件,对于大型项目来说至关重要。 DOM(文档对象模型)操作是前端开发的核心,JavaScript提供了与HTML元素交互的方法,如创建、查找、...

    JavaScript源代码集

    JavaScript,是一种广泛...通过学习这两个文件,开发者不仅可以深入理解JavaScript的核心概念,还能积累丰富的实践经验,提升编写高质量JavaScript代码的能力。无论是初学者还是经验丰富的开发者,都能从中受益匪浅。

    javascript高级代码例子

    通过原型链,子对象可以访问父对象的所有属性和方法,实现代码复用。 3. **函数表达式与函数声明**:JavaScript允许两种定义函数的方式,函数表达式(如`var func = function() {}`)和函数声明(如`function func...

Global site tag (gtag.js) - Google Analytics