首页 > 代码库 > JavaScript面向对象编程
JavaScript面向对象编程
1、引言
JavaScript是一种解释性的，基于对象的脚本语言（an interpreted, object-based scripting language）。JavaScript 基于客户端运行，目前基本上所有的浏览器都支持JavaScript。1995年首次出现时，JavaScript的主要目的还只是处理一些输入的有效性验证，随着互联网的蓬勃发展，JavaScript的应用越来越广泛，特别是近几年AJAX技术（Asynchronous JavaScript and XML）的发展，更使JavaScript的应用达到了一个新的高度。在AJAX技术中，JavaScript是一项关键技术，请求的发送、接收、接收数据后的界面处理都需要使用JavaScript技术，这对JavaScript语言提出了新的需求，本文从JavaScript的基本特点出发，模拟出了面向对象编程的大部分特点，使JavaScript摆脱了以往脚本语言杂乱无章、难以阅读、难以维护的形象，而具有了面向对象特性，极大的方便了JavaScript的开发、维护，提高了软件开发效率。
2、JavaScript的基本特点
JavaScript是解释性的，基于对象的脚本语言。它有下面几个显著特点，这几个特点在后面的面向对象特性模拟中会反复用到，因此这里先详细说明这几个特点。
l 解释型语言：JavaScript是一种解释性语言，解释性语言相对于编译型语言，编译型语言必须先通过编译才能执行，而解释性语言不需要编译，直接从上到下解释执行，一边解释一边执行，这就决定了解释性语言的代码是有先后顺序的，需要执行的代码必须已经解释过。因此，JavaScript需要注意代码的先后顺序。
l 弱类型语言：JavaScript是一种弱类型语言，弱类型语言相对于强类型语言，大部分面向对象语言都是强类型语言，强类型语言是一种需要强制类型定义的语言，它要求每个变量都确定某一种类型，它和别的类型转换必须显式转换。弱类型语言是一种类型可以被忽略的语言，它在变量定义时不指定某一类型，在执行时通过执行结果才能确定类型，不同类型之间不需要通过显式转换就可以转换。
l 动态添加属性和方法：这个特点是指可以动态为某个对象添加以前没有的属性和方法。这个特点使JavaScript非常灵活，正因为有了这个特点，JavaScript的面向对象编程才有了可能。
l prototype（原型）属性：JavaScript是一种基于对象的语言，JavaScript中的所有对象，都具有prototype属性。prototype属性返回对象的所有属性和方法，所有 JavaScript 内部对象都有只读的 prototype 属性，可以向其原型中动态添加属性和方法，但该对象不能被赋予不同的原型。但是自定义的对象可以被赋给新的原型。
3、面向对象的基本特点
面向对象有下列三个主要特点：封装、继承和多态。这里先详细说明这几个特点，后面几个部分分别在JavaScript中实现这些特点，从而实现完整的面向对象模拟。
l 封装：封装就是把各种方法和变量合并到一个类，用这个类代表某个对象为完成一定的任务所能保存的范围以及它能执行的操作。封装隐藏了方法执行的细节。
l 继承：继承就是根据现有类的方法和成员变量生成新的类的功能。
l 多态：多态就是对象随着程序执行而使其形式发生改变的能力。
4、JavaScript语言基础
4.1数据类型
基本数据类型：Number, String, Boolean, Function, Object, Array, null, undefined，注意null和undefined的区别。
日期和时间：日期类型并不是JavaScript的基本数据类型，但JavaScript提供了一个处理日期的类：Date，用法如下：
| var now = new Date();
var year = now.getYear(); // 年 var month = now.getMonth() + 1; // 月 var day = now.getDate(); // 日 var hour = now.getHours(); // 时 var minute = now.getMinutes(); // 分 var second = now.getSeconds(); // 秒
alert("现在时间是: "+year+"-"+month+"-"+day+" "+hour+":"+minute+":"+second); |
正则表达式：主要用于对文本进行模式匹配，实现对文本的查找和替换操作。在JavaScript中，提供了一个RegExp类来处理正则表达式，创建方式和Date一样，用关键字new就可以创建，如var re = new RegExp();
和Date不一样的地方在于，虽然RegExp类也不是JavaScript的基本数据类型，但我们在创建正则表达式对象时，可以不需要用new关键字就可以创建，如 var re = /[1-9][0-9]*/; 这样就直接定义了正则表达式对象，因为在JavaScript中，一对斜线中包括一个文本就认为构成了一个正则表达式对象。
下面就示例用正则表达式判断输入的Email和手机号是否合法：
| // 判断Email是否合法 function isEmail(p_addr) { var reEmail = /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/; return reEmail.test(p_addr); }
// 判断手机号是否合法 function isPhoneNumber(p_num) { var rePhone = /^1\d{10}$/gi; return rePhone.test(p_num); }
// 测试 var email = "tenderghost@163.com"; alert(isEmail(email));
var phone = 137; alert(isPhoneNumber(phone)); |
错误对象：JavaScript中定义了几个用于处理错误类型的类，有：Error, EvalError, RangeError, ReferenceError, SyntaxError, TypeError, URIError。和Java中的异常处理方式类似，JavaScript中的错误对象可以用try...catch...finally语句来处理，示例如下：
| try{ throw new Error("自定义错误示例"); } catch (ex) { alert("Error对象被捕捉，消息为: " + ex.message); } finally { alert("无论如何都会被执行！"); } |
4.2 变量
JavaScript是一种弱类型的语言，这就意味着一个JavaScript变量可以指向任何数据类型，例如：
var i = 10;
i = “ten”;
变量的作用域
var scope = “global scope”; // 全局变量
function checkscope() {
var local = “local scope”; // 局部变量
}
注意：除函数中的变量为局部变量外，其他的全部为全局变量。
4.3 函数
JavaScript中:
function add(a, b) {
return a + b;
}
Java中:
public int add(int a, int b) {
return a + b;
}
函数的参数: arguments对象
在一个函数中，会有一个隐含的arguments对象来保存函数的参数，这样在有些时候，我们在定义函数时，可以不明确指定函数所需要的参数，如下：
| // 求最大值 function max() { var m = Number.NEGATIVE_INFINITY; // 无穷小 for (var i = 0; i < arguments.length; i++) { if (arguments[i] > m) m = arguments[i]; } return m; } // 测试 var largest = max(1, 7, 9, 23, 88, 2, 5); alert(largest); |
5、封装的实现
下面以一个详细的示例来说明常用的私有实例成员、公有实例成员和公有静态成员的封装。
| Human = function(name) // 等于function Human(name) { var me = this;
// 私有属性 var _name = null;
// 公有属性 me.name = null;
// 私有方法 function setName() { _name = name; me.name = _name; }
// 公有方法 me.sayHello = function() { alert("Hello, my name is " + me.name); }
// 模拟构造函数 function constructor() { setName(); }
constructor();
return me; } // 增加类的静态方法 Human.classMethod = function() { alert("Human‘s classMethod"); } // 通过原型(prototype)增加公有方法 Human.prototype.sayGoodbye = function() { alert("Goodbye, " + this.name); }
// 当成类来使用 var m_human = new Human("pengfei"); m_human.sayHello();
// 调用类的静态方法 Human.classMethod();
// 直接当成函数使用 Human("huang"); |
JavaScript语言中类的定义和函数的定义都是使用function关键字，使用function定义的过程，即可以看成是类的定义，也可以看成是函数的定义。从示例代码中可以得出：
· 私有属性和方法的定义，直接在类内部定义一个变量，因为这个变量的作用域只限定在类内部，外部不能使用，因此这样定义的属性是私有属性，私有方法的定义也类似。
· 公有属性和方法的定义，通过定义一个私有变量me等于this，然后动态添加me变量的属性和方法，最后把me变量作为创建的实例对象返回。这样给me变量添加的属性和方法在类外部可以使用，也就是共有属性和方法。
· 构造函数的定义，构造函数是在创建一个对象时，自动执行的一个函数。在Java，C#等面向对象的语言中，只要定义一个函数和类名相同即可。在JavaScript中，可以随便定义一个私有函数，这个函数需要在类定义体中执行，这样的函数即成为构造函数，需要注意的是，为了确保构造函数中的代码都已经被解释过，构造函数最好放在类定义的最后。
· 类静态方法的定义，类静态方法是指不需要通过类实例来调用，而是可以直接通过类名来调用的方法。在Java，C＃等面向对象语言中，一般是通过关键字static来指明一个方法是静态方法。在JavaScript中，没有static关键字，不能在类的定义体中实现静态方法，必须在类的定义体外，通过直接在类上动态添加方法来定义静态方法。需要注意，JavaScript静态方法中不能访问类的公有属性和公有方法，这和Java，C＃等语言是一致的。
· 类的公有属性和公有方法也可以使用prototype来实现， 但是使用prototype有以下几个注意点：需要定义在类定义体外，和Java等语言的封装习惯不一致；prototype方式不能访问类的私有属性。
· JavaScript不能实现只读属性、只写属性的定义，所有的公有属性都是可读可写。
6、继承的实现
JavaScript中没有Java，.Net中实现继承的关键字，JavaScript中的继承都是通过JavaScript语言本身的特性模拟出来的，可以通过两种方式实现继承：
l 创建对象方式
| // 定义父类 Human = function() { var me = this;
me.name = "";
me.age = 0;
me.setName = function(name) { me.name = name; }
me.setAge = function(age) { me.age = age; }
me.sayHello = function() { alert("Human sayHello, name:"+ me.name +", age:"+ me.age); }
return me; }
// 定义子类 Chinese = function(name, age) { // 继承 var me = new Human();
// 覆盖父类的sayHello方法 me.sayHello = function() { alert("中国人问好，名字："+ me.name +"，年龄："+ me.age); }
// 设置name和age me.setName(name); me.setAge(age);
return me; }
// 测试 var c = new Chinese("李四", 21); c.sayHello(); |
定义一个变量me，赋予父类实例，这样me就有了父类的属性和方法，然后给me增加子类的属性和方法，最后把me变量作为创建的实例对象返回。这样定义的类就有了父类的属性和方法，即实现了继承。
l 原型（prototype）方式
| // 定义父类 function Human() { this.name = ""; this.age = 0; } Human.prototype = { setName : function(name) { this.name = name; }, setAge : function(age) { this.age = age; }, sayHello : function() { alert("Human sayHello, name:"+ this.name +", age:"+ this.age); } }
// 定义子类 function Chinese(name, age) { this.setName(name); this.setAge(age); } // 继承 Chinese.prototype = new Human(); // 覆盖父类的sayHello方法 Chinese.prototype.sayHello = function() { alert("中国人问好，名字："+ this.name +"，年龄："+ this.age); }
// 测试 var c = new Chinese("张三", 20); c.sayHello(); |
首先封装好子类的属性和方法，然后创建一个父类实例附给子类的prototype属性，这样子类就有了父类的属性和方法，即实现了继承。
这两种方式都实现了继承，但是和Java，.Net等面向对象语言相关，JavaScript中模拟的继承还要以下问题：
l 不能定义保护的方法和属性。
l 不能继承父类的静态方法。
7、多态的实现
多态主要包括重载（overload）和覆盖（override），重载是指同一个名字的函数或方法可以有多个实现，他们依靠参数的类型或参数的个数来区分识
别。而覆盖是指子类中可以定义与父类中同名的方法，这些方法定义后，在子类的实例化对象中，父类中继承的这些同名方法将被隐藏。
由于JavaScript的弱类型性，JavaScript在定义函数时，不需要指定函数参数的类型和个数，这种特性为重载的实现提供了便利。如下函数：
| function say(param) { // 通过typeof函数，判定不同类型的参数。 if (typeof(param)=="string") alert("string"); else if (typeof(param)=="number") alert("number"); else alert("others"); } |
函数调用时可以传入string，也可以传入number，或别的类型，在函数实现体中可以使用typeof函数得到传入参数的类型，从而实现不同的功能。这样虽然是一个函数实现体，但是也有了多个实现，即重载。JavaScript中另外一种比较常见的重载方式是通过函数的arguments对象来实现，这种方式已在前面讲过，不再赘述。
JavaScript中覆盖的实现，只需在子类中定义一个与父类同名的方法即可。
8、静态类的实现
静态类，是一种不能被实例化，并且只包含有静态成员的类。在Java，C＃等面向对象语言中，一般使用static关键字来指明类是静态类，JavaScript中没有static关键字，但是可以通过实例化匿名函数来实现静态类。如下：
| UtilTool = new function() // 关键在于这个new { var me = this;
// 增加一个静态方法 me.add = function(a, b) { return a+b; }
return me; }
// 测试 var sum = UtilTool.add(10, 100); alert(sum); |
UtilTool其实是一个对象，只是这个对象属于匿名类，该类在创建完UtilTool这个对象后，就不能再被使用了。而UtilTool是一个对象，不是一个 function，所以不能作为一个类被实例化，因此，它就相当于一个静态类。
JavaScript面向对象编程