Javascript 面向对象 (声明篇)

 更新时间:2010年04月30日 14:58:21   作者:  
有时间重新审视了遍 Javascript 的面向对象机制。与其他的语言不同,Javascript 可以说提供了更灵活的面向对象机制(比如 function 在完成其自身功能的同时也是对象)。
由于才疏学浅,我不得不将《Javascript 高级程序设计》中的部分内容摘抄过来,这些同时也算是我的读书笔记吧。由于 Javascript 面向对象机制及其的重要,而且内容非常的繁多,在这里就分篇章逐个介绍。

使用对象首先就是声明它(内置的对象当然就不需要了)。该死的 Javascript 总是会让我们死去很多的脑细胞,这篇文章主要说明下声明 Javascript 类的几种方法。

工厂模式
工厂模式可能是很多开发人员使用的一种模式,简单的说这种方法先定义“地基”,然后在往上面扔(绑定)各种功能和属性。下面的代码可能看起来会非常的熟悉:

复制代码 代码如下:

var oCar = new Object;
oCar.color = "red";
oCar.showColor = function() {
alert(this.color);
}
oCar.showColor();


当然,既然包装成一个类,就要重用它(上面的方法从语法上说仅仅是变量)。可以使用返回特定对象的工厂函数(factory function)将其封装起来:
复制代码 代码如下:

function createCar() {
var oCar = new Object;
oCar.color = "red";
oCar.showColor = function() {
alert(this.color);
}

return oCar;
}
oCar = createCar();
oCar.showColor();

当然,变通一下,可以在 createCar 函数上加入些参数,这样看起来已经非常地专业了:
复制代码 代码如下:

function createCar(sColor) {
var oCar = new Object;
oCar.color = sColor;
oCar.showColor = function() {
alert(this.color);
}

return oCar;
}
oCar = createCar();
oCar.showColor();

匿名函数总是让人感觉非常的高深,但是有时候也会迷惑了自己。如果不考虑篇幅,可以外部定义它:
复制代码 代码如下:

function showColor() {
alert(this.color);
}

function createCar(sColor) {
var oCar = new Object;
oCar.color = sColor;
oCar.showColor = showColor;

return oCar;
}
oCar = createCar();
oCar.showColor();

这样做还有一个好处,就是不用重复定义 oCar.showColor 了(高效率的程序每个人都喜欢)。

构造函数模式
构造函数其实和工厂方式差不多。从代码量上来说,就是省略了构造函数内部没有创建一个对象。
复制代码 代码如下:

function Car(sColor) {
this.color = sColor;
this.showColor = function () {
alert(this.color);
}
}
oCar = new Car("red");
oCar.showColor();

其实此隐含的对象已经在 new 以后就被实例化了。默认情况下,构造函数返回的就是其 this 的值(所以不必使用 return 返回)。但构造函数模式和工厂模式一样可能会重复定义方法,这点可以参考上述工厂模式的做法避免它(始终看起来不完美)。

原型模式
已经受够重复定义的问题了,那么有没有完美的解决办法呢?当然有。使用原型方法可以有效的避免此类的问题。
复制代码 代码如下:

function Car() {}
Car.prototype.color = new Array("red", "green", "blue");
Car.prototype.showColor = function() {
alert(this.color);
}
oCar = new Car();
oCar.showColor();

但是使用此模式需要注意的是类中的所有属性和方法都是共用的(其实就是指针)。这意味着虽然被实例化的两个变量,如果其中一处的值被更改,那么另外一个就也会被更改。

注:此段内容有更改,详细请参见这里和这里(感谢 fish 兄弟提出)。

混合模式
看起来越来越完美了,结合上述学到的方法就很容易解决原型模式的问题,这样看起来就更像是专业的程序员了。
复制代码 代码如下:

function Car(sColor) {
this.color = sColor;
}
Car.prototype.showColor = function() {
alert(this.color);
}
oCar = new Car("red");
oCar.showColor();

上述的方法声明的类, showColor 方法是原型(仅创建了一个实例),其他的都是构造(互不干扰)。

动态原型模式
把自己的方法仍在外面总不是件非常环保的事情,下面的方法就非常的“绿色”:
复制代码 代码如下:

function Car() {
this.color = "red";
if (typeof Car._initialized == "undefined") {
Car.prototype.showColor = function() {
alert(this.color);
};
Car._initialized = true;
}
}
oCar = new Car("red");
oCar.showColor();

此方法于上述的混合模式效果一致,即在构造函数内定义属性,而方法则使用原型模式。唯一的区别就是赋予对象方法的位置。

混合工厂模式
混合工厂模式可以认为是构造模式与混合模式的整合,因为 function 本身就是一个对象,所以可以使用 new 来实例化(请允许我这样描述)。
复制代码 代码如下:

function Car() {
var oCar = new Object;
oCar.color = "red";
oCar.showColor = function() {
alert(this.color);
}

return oCar;
}
oCar = new Car();
oCar.showColor();

不过建议避免使用此方法定义,因为于上述的工厂模式一样,它存在重复声明的问题。

选用何种模式?
其实通过上面的描述已经有所结果,通常使用的是 混合模式 与 动态原型模式 (我个人投动态原型模式一票)。不过不要单独使用 工厂模式 与 构造模式 (或者其两者的结合体),因为这样会造成不必要的浪费。

测试代码

[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]

相关文章

  • 用JavaScript实现单继承和多继承的简单方法

    用JavaScript实现单继承和多继承的简单方法

    JavaScript是一种强大的多泛型编程语言,其融合了面向过程、面向对象和函数式编程于一身,具备强大的表现能力。
    2009-03-03
  • 关于js类的定义

    关于js类的定义

    这两天帮同学做秒杀网,打算将前台和后台彻底分离,仅用ajax通信。这样就免不了大量的使用javascript,于是发现,js果然是难学难用。
    2011-06-06
  • JavaScript 基于原型的对象(创建、调用)

    JavaScript 基于原型的对象(创建、调用)

    在我们写js代码的时候,内部对象是不可避免的要引用,但是光靠这些对象是不够的,所以需要我们自己定义对象,这个时候通常用到的对象是第三种,即基于原型的对象,下面就如何创建自己的对象,定义对象的方法、属性,调用对象给出详细的说明。
    2009-10-10
  • javascript面向对象入门基础详细介绍

    javascript面向对象入门基础详细介绍

    本文章介绍了js中常用的对象包括有JavaScript对象简介 字符串对象 date() 数组 数学对象 函数对象 应用介绍,有需要了解的同学可参考一下
    2012-09-09
  • JavaScript定义类或函数的几种方式小结

    JavaScript定义类或函数的几种方式小结

    js中不论是定义类或者函数,很多朋友想将代码写的更专业,更方便扩展等,那么就可以参考这篇文章了,最好是总结,建议大家收藏下。
    2011-01-01
  • JavaScript 面向对象编程(2) 定义类

    JavaScript 面向对象编程(2) 定义类

    最近这一段时间事情太多了,没有时间再继续写,幸好这两天有点小闲,先小写一下JavaScript中面向对象一中推荐的方法。
    2010-05-05
  • javascript 对象入门实例教程

    javascript 对象入门实例教程

    学习javascript 对象操作的朋友可以参考下,这个是入门级教程。
    2010-04-04
  • 手把手教你自己写一个js表单验证框架的方法

    手把手教你自己写一个js表单验证框架的方法

    其实我自己也就能简单用用js而已,但是呢,相对很多初学者来说多懂了点Know How所以斗胆孟浪一下,将一些所得记录下来,以供更多的初学者能够知道一个东西的实现过程,省去在源码里摸索的过程。
    2010-09-09
  • javascript类式继承新的尝试

    javascript类式继承新的尝试

    研究javascript是很有意思的事情,以前我说过,在javascript中的继承,在于维持prototype指向同一object就行了,确实这样
    2012-01-01
  • javascript最常用与实用的创建类的代码

    javascript最常用与实用的创建类的代码

    组合构造函数模式和原型模式
    2010-08-08

最新评论