javascript 模式(1)——代码复用

程序的开发离不开代码的复用,通过代码复用可以减少开发和维护成本,在谈及代码复用的时候,会首先想到继承性,但继承并不是解决代码复用的唯一方式,还有其他的复用模式比如对象组合。本节将会讲解多种继承模式以实现代码复用。

  1. 继承复用-默认模式
  2. 继承复用-apply函数
  3. 继承复用-临时构造

继承复用之默认模式:

每个javascript对象都和另一个对象 相关联,而这个对象就是原型(prototype),而原型又可以链接到其他原型行程原型链,如果当前对象不存在类似方法则会沿原型链查找,直到查找为止。继承的默认模式即通过这种原型链的特性实现的。

Person类为基类定义了一些属性和方法

/**
 *  person 基类
 */
var Person = function () {
    this.name = "";
    this.age = 0;
    this.sex = "";
    this.say = function () {
        return "my name is" + this.name;
    }
}

Person.prototype.sayHello = function () {
    return "Hello";
}

定义一个空的子函数对象

/**
 * 原型继承
 */
var Engineer1 = function () {

}

将子对象的原型链中加入父类和父类原型

Engineer1.prototype = new Person();
var enginneer1 = new Engineer1();
enginneer1.name = ‘stephen‘;
console.log(enginneer1.say());

此类继承实现缺点:

不能传递构造的参数:假设person基类中可以接受构造传参,而继承的子类想通过父类构造传递参数则是不可行的。

继承复用-apply函数

apply函数定义:用于调用当前函数functionObject,并可同时使用指定对象thisObj作为本次函数执行时函数内部的this指针引用。通俗的讲,就是将当前函数对象的成员复制到this所引用的函数对象中去。

可以在子类构造中通过apply方法将父类的成员复制到子类中,而且可以通过apply传递参数,而不是绑定原型链,

var Engineer2 = function () {
    Person.apply(this);
}

相反由于不是绑定原型链因此如果在父类原型中的方法是不能被继承的 ,如下代码所示

Person.prototype.sayHello = function () {
    return "Hello";
}

使用示例

var enginner2 = new Engineer2();
enginner2.name = ‘adam‘;
console.log(enginner2.say());

继承复用-临时构造

上面两种方法各有优劣,但都不完美,默认继承不能传递构造的参数,而通过Apply()函数的构造绑定又不能继承父类原型链的方法,而且有时基类有私有的方法不想被子类继承,以上两种都不能做到。而临时构造函数的方法能得到一个比较完美的解决方案。

首先生成一个临时函数对象,通过原型链共享将临时函数对象的原型链指定为父类原型链(注意这里不是绑定哦),接着将子类的原型链绑定上临时函数的原型链。

var temp = function (){};
temp.prototype =  Person.prototype;
Engineer1.prototype = new temp();
var enginner3 = new Engineer1();
enginner3.name = "stphen";
console.log(enginner3.say());

通过上面代码的处理,子对象拥有了临时函数的原型链,却没有继承父类在函数中定义的成员,这样如果想要定义私有的方法则可以在函数定义中,如果想定义可继承方法可在函数prototype中,从而比较完美的解决继承。

小结:

在javascript中实现继承有许多方法,在本节中讲解了三种主要的方法,每种方法继承都有各自的优势和缺点,可以在开发项目时约定使用某一种方式,当然除了继承外还可以使用apply借用某一个方法从而达到复用的目的,毕竟为了使用某一个方法而建立长长的原型链并不是一种可取的方式。

参考内容

《javascript 模式》 stoyan stefanov

时间: 2024-11-14 13:47:20

javascript 模式(1)——代码复用的相关文章

javascript代码复用模式(二)

前面说到,javascript的代码复用模式,可分为类式继承和非类式继承(现代继承).这篇就继续类式继承. 类式继承模式-借用构造函数 使用借用构造函数的方法,可以从子构造函数得到父构造函数传任意数量的参数.这个模式借用了父构造函数,它传递子对象以绑定到this,并转发任意数量的参数: function Child(a,b,c,d){ Parent.apply(this,arguments); } 在这种方式中,只能继承在父构造函数中添加到this的属性,并不能继承添加到原型中的成员. 使用借用

javascript代码复用模式

原文链接:http://www.faceye.net/search/143351.html 代码复用有一个著名的原则,是GoF提出的:优先使用对象组合,而不是类继承.在中,并没有类的概念,所以代码的复用,也并不局限于类式继承.javascript中创建对象的方法很多,有构造函数,可以使用new创建对象,并且可以动态的修改对象.javascript的非类式继承(可称为现代继承模式)复用方法也很多,例如,利用其它对象组合成所需要的对象,对象混入技术,借用和复用所需要的方法. 类式继承模式-默认模式

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

介绍 本文介绍的四种代码复用模式都是最佳实践,推荐大家在编程的过程中使用. 模式1:原型继承 原型继承是让父对象作为子对象的原型,从而达到继承的目的: function object(o) { function F() { } F.prototype = o; return new F(); } // 要继承的父对象 var parent = { name: "Papa" }; // 新对象 var child = object(parent); // 测试 console.log(c

深入理解JavaScript系列(45):代码复用模式(避免篇)

介绍 任何编程都提出代码复用,否则话每次开发一个新程序或者写一个新功能都要全新编写的话,那就歇菜了,但是代码复用也是有好要坏,接下来的两篇文章我们将针对代码复用来进行讨论,第一篇文避免篇,指的是要尽量避免使用这些模式,因为或多或少有带来一些问题:第二排是推荐篇,指的是推荐大家使用的模式,一般不会有什么问题. 模式1:默认模式 代码复用大家常用的默认模式,往往是有问题的,该模式使用Parent()的构造函数创建一个对象,并且将该对象赋值给Child()的原型.我们看一下代码: function i

JavaScript模式读书笔记 第6章 代码复用模式

主要使用代码继承来完成复用. 1,使用类式继承. -1,类式继承:按照类的方式来实现继承,即所谓的类式. -2,类式继承:通过构造函数(child)获取来自parent的属性,从而创建对象. <script> //parent function Parent(name){ this.name = name || 'Adam'; } Parent.prototype.say = function(){   return this.name; } //child function Child(na

javascript代码复用(四)-混入、借用方法和绑定

这篇继续说js的现代复用模式:混入.借用方法和绑定. 混入 可以针对前面提到的通过属性复制实现代码复用的想法进行一个扩展,就是混入(mix-in).混入并不是复制一个完整的对象,而是从多个对象中复制出任意的成员并将这些成员组合成一个新的对象. 混入的实现并不难,只需要遍历每个参数,并且复制出传递给这个函数的每个对象中的每个属性. function mix(){ var arg,prop,child={}; for(arg=0:arg<arguments.length;arg++){ for(ar

Atitit 代码复用的理解attilax总结

1.1. 继承1 1.1.1. 模式1:原型继承1 1.1.2. 模式2:复制所有属性进行继承 拷贝继承1 1.1.3. 模式3:混合(mix-in)1 1.1.4. 模式4:借用方法1 1.2. 组合2 1.3. API提供了一种代码复用的机制.2 1.4. 类库机制2 1.5. Include import2 1.6. Cfg2 1.7. 良好的复用和不良的复用2 1.8. 可复用组件的 5 种类型  代码块 Code Block算法 模式   数据类型 库3 1.9. 2. 算法 Algo

分析模式(可复用的对象模型)- 读书笔记

读后感: Martin Fowler 20年前的书,OO和领域的思想对于今天的我们来说很基础,但在那时应该算是萌芽.Smalltalk语言简单,语法中省略空格可能因为那时的硬件设备昂贵,而不得不做出的选择,但是可读性真的很差,而书中基本是用Smalltalk进行示例.翻开这本书是为了查找财务模型,它没有让我失望,特别是第6章"库存与财务"给了我思维建模的概念.这本书和UML.GOF的"设计模式"差不多是在同一时间段出现,所以书的内容看上去有点古董的感觉.不过,大师的

JavaScript模式 --- 札记

全局变量的问题 创建隐式全局变量的反模式是带有var声明的链式赋值.在下面的代码片段中, a 是局部变量, b 是全局变量,这也许并不是你想要的 function foo(){ var a = b = 0; //var a window.b; // ....}//造成上面的原因是源于从右至左的操作符优先级.首先,优先级较高的是表达式 b=0, 此时b未声明.表达式的返回值为0,它被赋给 var 声明的局部变量 a. /* 建议这样做 */ function foo(){ var a, b; //