参考资料:
《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中对象的创建和继承机制。在软件工程中,代码复用是一种提高开发效率、降低软件维护成本的有效方式。GoF(设计模式的四位作者,即Erich...
JavaScript代码复用是提高效率和减少冗余的关键实践。它主要依赖于对象组合和原型继承等机制。在JavaScript中,由于没有传统的类概念,而是基于原型的面向对象模型,因此,代码复用的方式与C++或Java等使用类的语言...
JavaScript 继承之为什么要继承 JavaScript 中的继承机制是指子类继承父类的属性和方法,使得子类可以拥有父类的所有特征。继承是面向对象编程的基本机制之一,它可以实现代码复用、提高编程效率和增强代码的可维护...
总的来说,理解并熟练掌握JavaScript的继承机制对于进行控件开发至关重要,它可以帮助我们构建出可扩展、可维护的代码结构,提升代码复用性,从而提高开发效率和应用质量。通过深入学习和实践,开发者可以创建出各种...
这种继承机制使得JavaScript具有更强的表现力和灵活性,尤其在代码复用和类型安全方面。 类型安全和代码复用是类继承的主要原因。在强类型语言中,类型转换是必要的,以确保数据在不同类型的变量间正确传递。然而,...
JavaScript代码复用是提高开发效率和维护软件质量的重要手段,在日常的前端开发中,开发者经常需要利用已有的代码段来实现新的功能,而不是每次都从头开始编写。代码复用能够减少重复代码的编写,降低出错的几率,...
继承的主要目的是代码复用和降低耦合度。通过继承,可以在已有类的基础上扩展功能,而不是从零开始编写代码。当需要修改共享的方法时,只需要在一个地方进行,提高了代码维护性。例如,如果多个类都需要`toString`...
了解并熟练运用JavaScript中的类和继承对于开发复杂的前端应用至关重要,特别是当需要构建可复用的组件或者模块化应用时。例如,在框架如React或Vue中,组件的定义往往涉及到类和继承的概念,通过继承基类来扩展功能...
这个"javascript常见代码合集"包含了一系列实现常见效果的JavaScript代码示例,可以帮助开发者理解和学习JavaScript的基础以及进阶功能。 1. **变量与数据类型**: JavaScript支持基本数据类型(如字符串、数字、...
在JavaScript中,面向对象编程是实现复杂功能和代码复用的关键。继承是面向对象的核心特性之一,它允许一个对象(子类)获取另一个对象(父类)的属性和方法。本篇文章将深入探讨JavaScript实现继承的七种常见方式,...
继承是面向对象编程的一个基本特征,它允许一个类(子类)继承另一个类(父类)的属性和方法,以此实现代码复用和结构化设计。 本文将深入探讨JavaScript中的三种主要继承方式,并通过具体的示例来帮助理解这些概念...
在编程领域,代码复用是提高效率和保持代码可...在实际开发中,可以结合使用这些模式,或者考虑使用更现代的JavaScript语法,如ES6的类和`class`关键字,以及`Object.create()`方法,以实现更高效、更安全的代码复用。
10. **性能优化**:如何编写高性能的JavaScript代码,如避免内存泄漏、减少DOM操作和优化循环。 11. **模块化**:使用CommonJS、AMD或ES6的import/export实现模块化,以便于代码组织和复用。 通过深入研究...
这些构成了JavaScript语法的基础,是编写任何JavaScript代码的前提。 接着,深入到函数和作用域,这是JavaScript中至关重要的概念。函数可以封装代码,提高可复用性,而作用域则决定了变量的可见性和生命周期。理解...
本文将介绍四种最佳实践的代码复用模式,适用于JavaScript环境。 首先,**模式1:原型继承**是JavaScript中实现对象继承的一种常见方式。通过让父对象成为子对象的原型,我们可以确保子对象能够访问父对象的所有...
理解如何通过对象和类来组织代码,以及如何利用继承和多态性来设计可复用的组件,对于大型项目来说至关重要。 DOM(文档对象模型)操作是前端开发的核心,JavaScript提供了与HTML元素交互的方法,如创建、查找、...
JavaScript,是一种广泛...通过学习这两个文件,开发者不仅可以深入理解JavaScript的核心概念,还能积累丰富的实践经验,提升编写高质量JavaScript代码的能力。无论是初学者还是经验丰富的开发者,都能从中受益匪浅。
通过原型链,子对象可以访问父对象的所有属性和方法,实现代码复用。 3. **函数表达式与函数声明**:JavaScript允许两种定义函数的方式,函数表达式(如`var func = function() {}`)和函数声明(如`function func...