随着HTML5标准的成熟和在移动开发领域的大规模使用，JavaScript正成为Web开发领域最热门的开发语言，而且随着NodeJS等技术的发展，JavaScript的应用也从传统前端开发领域延伸到了服务器端开发。但同时需要注意的是，我们项目中的JavaScript代码规模也变得越来越大和更加复杂。这就要求开发人员能够编写高效且可维护的JavaScript代码，虽然JavaScript不像Java那样对面向对象设计有那么好的支持，但我们可以通过在JavaScript中应用这些面向对象的设计模式，来使我们写出更优秀的JavaScript代码。
在这篇教程中，你将学习基于JavaScript的面向对象编程。其中的代码示例是基于EcmaScript 5(JavaScript的标准定义)来实现。
Java与JavaScript的比对
| Java | ** JavaScript** |
|---|---|
| 静态类型 | 动态类型 |
| 使用类，接口和枚举来定义类型 | 使用函数和原型来定义类型 |
| 在运行时类型无法改变 | 类型可以在运行时变更 |
| 需要给所有变量声明类型（强类型校验） | 声明变量时不需要指定类型 （弱类型校验） |
| 构造器是特殊的方法 | 构造器也是一个函数，与其他函数没有区别 |
| 类和对象是不同的实体 | 包括构造器，函数原型在内的一切都是对象 |
| 支持静态方法和实例 | 不直接支持静态方法和实例 |
| 通过抽象类和接口支持抽象类型 | 不直接支持抽象类型 |
| 通过private,package,protected,public定义对象的作用域 | 只支持public成员 |
| 提供丰富的继承机制 | 通过原型实现继承 |
| 支持方法级的重写和重载机制 | 不直接支持重写和重载 |
| 提供丰富的反射特性 | 具有一些反射特性 |
| 通过包提供模块化支持 | 没有直接的模块化支持 |
对象类型定义- Object Type
function MyType(){
if (!(this instanceof MyType))
throw new Error("Constructor can’t be called as a function");
}
var myInstance = new MyType();
MyType(); // Error: Constructor can’t be called as a function
在Eclipse的JavaScript视图中，构造器，实例成员，静态成员和内部函数都能被识别，并在Outline视图中显示出来。
实例成员 - Instance Members
通过"new"关键字可以创建一个实例对象，而实例成员（变量或方法）能够通过这个实例对象来访问。实例成员可以通过"this"关键字，原型（prototype），构造器或Object.defineProperty来定义。
function Cat(name){
var voice = "Meow";
this.name = name;
this.say = function(){
return voice;
}
}
Cat.prototype.eat = function(){
return "Eating";
}
var cat = new Cat("Fluffy");
Object.defineProperty(cat, "numLegs",{value: 4,writable:true,enumerable:true,configurable:tr
ue});
console.log(cat.name); // Fluffy
console.log(cat.numLegs); // 4
console.log(cat.say()); // Meow
console.log(cat.eat()); // Eating
静态成员 - Static Members
JavaScript中并不直接支持静态成员。你可以通过构造器来创建静态成员。静态成员不允许通过"this"关键字直接访问。
公共静态成员
function Factory(){
}
// public static method
Factory.getType = function (){
return "Object Factory";
};
// public static field
Factory.versionId = "F2.0";
Factory.prototype.test = function(){
console.log(this.versionId); // undefined
console.log(Factory.versionId); // F2.0
console.log(Factory.getType()); // Object Factory
}
var factory = new Factory();
factory.test();
私有静态成员
var Book = (function () {
// private static field
var numOfBooks = 0;
// private static method
function checkIsbn(isbn) {
if (isbn.length != 10 && isbn.length != 13)
throw new Error("isbn is not valid!");
}
function Book(isbn, title) {
checkIsbn(isbn);
this.isbn = isbn;
this.title = title;
numOfBooks++;
this.getNumOfBooks = function () {
return numOfBooks;
}
}
return Book;
})();
var firstBook = new Book("0-943396-04-2", "First Title");
console.log(firstBook.title); // First Title
console.log(firstBook.getNumOfBooks()); // 1
var secondBook = new Book("0-85131-041-9", "Second Title");
console.log(firstBook.title); // First Title
console.log(secondBook.title); // Second Title
console.log(firstBook.getNumOfBooks()); // 2
console.log(secondBook.getNumOfBooks()); // 2
抽象类型 - Abstract Types
JavaScript是一个弱类型语言，所以当你声明一个变量时，不需要指定它的类型。这就减弱了对于像接口这样的抽象类型的依赖。但有时候，你仍然希望使用抽象类型来将一些共有的功能放在一起，并采用继承的机制，让其他类型也具有相同的功能，你可以参考下面的示例：
(function(){
var abstractCreateLock = false;
// abstract type
function BaseForm(){
if(abstractCreateLock)
throw new Error("Can’t instantiate BaseForm!");
}
BaseForm.prototype = {};
BaseForm.prototype.post = function(){
throw new Error("Not implemented!");
}
function GridForm(){
}
GridForm.prototype = new BaseForm();
abstractCreateLock = true;
GridForm.prototype.post = function(){
// ...
return "Grid is posted.";
}
window.BaseForm = BaseForm;
window.GridForm = GridForm;
})();
var myGrid = new GridForm();
console.log(myGrid.post()); // Grid is posted.
var myForm = new BaseForm(); // Error: Can’t instantiate BaseForm!
接口 - Interfaces
JavaScript同样没有对接口的直接支持。你可以通过下面代码中实现的机制来定义接口。
var Interface = function (name, methods) {
this.name = name;
// copies array
this.methods = methods.slice(0);
};
Interface.checkImplements = function (obj, interfaceObj) {
for (var i = 0; i < interfaceObj.methods.length; i++) {
var method = interfaceObj.methods[i];
if (!obj[method] || typeof obj[method] !=="function")
thrownewError("Interfacenotimplemented! Interface: " + interfaceObj.name + " Method: " + method);
}
};
var iMaterial = new Interface("IMaterial", ["getName", "getPrice"]);
function Product(name,price,type){
Interface.checkImplements(this, iMaterial);
this.name = name;
this.price = price;
this.type = type;
}
Product.prototype.getName = function(){
return this.name;
};
Product.prototype.getPrice = function(){
return this.price;
};
var firstCar = new Product("Super Car X11",20000,"Car");
console.log(firstCar.getName()); // Super Car X11
delete Product.prototype.getPrice;
var secondCar = new Product("Super Car X12",30000,"Car"); // Error: Interface not implemented!
单例对象 - Singleton Object
如果你希望在全局范围内只创建一个某一类型的示例，那么你可以有下面两种方式来实现一个单例。
var Logger = {
enabled:true,
log: function(logText){
if(!this.enabled)
return;
if(console && console.log)
console.log(logText);
else
alert(logText);
}
}
或者
function Logger(){
}
Logger.enabled = true;
Logger.log = function(logText){
if(!Logger.enabled)
return;
if(console && console.log)
console.log(logText);
else
alert(logText);
};
Logger.log("test"); // test
Logger.enabled = false;
Logger.log("test"); //
创建对象 - Object Creation
通过new关键字创建
可以使用"new"关键字来创建内置类型或用户自定义类型的实例对象，它会先创建一个空的实例对象，然后再调用构造函数来给这个对象的成员变量赋值，从而实现对象的初始化。
//or var dog = {};
//or var dog = new MyDogType();
var dog = new Object();
dog.name = "Scooby";
dog.owner = {};
dog.owner.name = "Mike";
dog.bark = function(){
return "Woof";
};
console.log(dog.name); // Scooby
console.log(dog.owner.name); // Mike
console.log(dog.bark()); // Woof
通过字面量直接创建
通过字面量创建对象非常简单和直接，同时你还可以创建嵌套对象。
var dog = {
name:"Scoobyî",
owner:{
name:"Mike"
},
bark:function(){
return "Woof";
}
};
console.log(dog.name); // Scooby
console.log(dog.owner.name); // Mike
console.log(dog.bark()); // Woof
成员作用域 - Scoping
私有字段 - Private Fields
在JavaScript中没有对私有字段的直接支持，但你可以通过构造器来实现它。首先将变量在构造函数中定义为私有的，任何需要使用到这个私有字段的方法都需要定义在构造函数中，这样你就可以通过这些共有方法来访问这个私有变量了。
function Customer(){
// private field
var risk = 0;
this.getRisk = function(){
return risk;
};
this.setRisk = function(newRisk){
risk = newRisk;
};
this.checkRisk = function(){
if(risk > 1000)
return "Risk Warning";
return "No Risk";
};
}
Customer.prototype.addOrder = function(orderAmount){
this.setRisk(orderAmount + this.getRisk());
return this.getRisk();
};
var customer = new Customer();
console.log(customer.getRisk()); // 0
console.log(customer.addOrder(2000)); // 2000
console.log(customer.checkRisk()); // Risk Warning
私有方法 - Private Methods
私有方法也被称作内部函数，往往被定义在构造体中，从外部无法直接访问它们。
function Customer(name){
var that = this;
var risk = 0;
this.name = name;
this.type = findType();
// private method
function findType() {
console.log(that.name);
console.log(risk);
return "GOLD";
}
}
或者
function Customer(name){
var that = this;
var risk = 0;
this.name = name;
// private method
var findType = function() {
console.log(that.name);
console.log(risk);
return "GOLD";
};
this.type = findType();
}
var customer = new Customer("ABC Customer"); // ABC Customer
// 0
console.log(customer.type); // GOLD
console.log(customer.risk); // undefined
如果私有内部函数被实例化并被构造函数返回，那么它将可以从外部被调用。
function Outer(){
return new Inner();
//private inner
function Inner(){
this.sayHello = function(){
console.log("Hello");
}
}
}
(new Outer()).sayHello(); // Hello
特权方法 - Privileged Methods
原型方法中的一切都必须是公共的，因此它无法调用类型定义中的私有变量。通过在构造函数中使用"this."声明的函数称为特权方法，它们能够访问私有字段，并且可以从外部调用。
function Customer(orderAmount){
// private field
var cost = orderAmount / 2;
this.orderAmount = orderAmount;
var that = this;
// privileged method
this.calculateProfit = function(){
return that.orderAmount - cost;
};
}
Customer.prototype.report = function(){
console.log(this.calculateProfit());
};
var customer = new Customer(3000);
customer.report(); // 1500
公共字段 - Public Fields
公共字段能够被原型或实例对象访问。原型字段和方法被所有实例对象共享（原型对象本身也是被共享的）。当实例对象改变它的某一个字段的值时，并不会改变其他对象中该字段的值，只有直接使用原型对象修改字段，才会影响到所有实例对象中该字段的值。
function Customer(name,orderAmount){
// public fields
this.name = name;
this.orderAmount = orderAmount;
}
Customer.prototype.type = "NORMAL";
Customer.prototype.report = function(){
console.log(this.name);
console.log(this.orderAmount);
console.log(this.type);
console.log(this.country);
};
Customer.prototype.promoteType = function(){
this.type = "SILVER";
};
var customer1 = new Customer("Customer 1",10);
// public field
customer1.country = "A Country";
customer1.report(); // Customer 1
// 10
// NORMAL
// A Country
var customer2 = new Customer("Customer 2",20);
customer2.promoteType();
console.log(customer2.type); // SILVER
console.log(customer1.type); // NORMAL
公共方法 - Public Methods
原型方法是公共的，所有与之关联的对象或方法也都是公共的。
function Customer(){
// public method
this.shipOrder = function(shipAmount){
return shipAmount;
};
}
// public method
Customer.prototype.addOrder = function (orderAmount) {
var totalOrder = 0;
for(var i = 0; i < arguments.length; i++) {
totalOrder += arguments[i];
}
return totalOrder;
};
var customer = new Customer();
// public method
customer.findType = function(){
return "NORMAL";
};
console.log(customer.addOrder(25,75)); // 100
console.log(customer.shipOrder(50)); // 50
console.log(customer.findType()); // NORMAL
继承 - Inheritance
有几种方法可以在JavaScript中实现继承。其中"原型继承"——使用原型机制实现继承的方法，是最常用的。如下面示例：
function Parent(){
var parentPrivate = "parent private data";
var that = this;
this.parentMethodForPrivate = function(){
return parentPrivate;
};
console.log("parent");
}
Parent.prototype = {
parentData: "parent data",
parentMethod: function(arg){
return "parent method";
},
overrideMethod: function(arg){
return arg + " overriden parent method";
}
}
function Child(){
// super constructor is not called, we have to invoke it
Parent.call(this);
console.log(this.parentData);
var that = this;
this.parentPrivate = function(){
return that.parentMethodForPrivate();
};
console.log("child");
}
//inheritance
Child.prototype = new Parent();// parent
Child.prototype.constructor = Child;
//lets add extented functions
Child.prototype.extensionMethod = function(){
return "child’s " + this.parentData;
};
//override inherited functions
Child.prototype.overrideMethod = function(){
//parent’s method is called
return "Invoking from child" + Parent.prototype.
overrideMethod.call(this, " test");
};
var child = new Child();// parent
// parent data
// child
console.log(child.extensionMethod()); //child’s parent data
console.log(child.parentData); //parent data
console.log(child.parentMethod()); //parent method
console.log(child.overrideMethod()); //Invoking from child test
overriden parent method
console.log(child.parentPrivate()); // parent private data
console.log(child instanceof Parent); //true
console.log(child instanceof Child); //true
当一个成员字段或函数被访问时，会首先搜索这个对象自身的成员。如果没有找到，那么会搜索这个对象对应的原型对象。如果在原型对象中仍然没有找到，那么会在它的父对象中查找成员和原型。这个继承关系也被成为 "原型链"。下面这张图就反映了原型链的继承关系。
模块化 - Modularization
当我们的项目中，自定义的对象类型越来越多时，我们需要更有效地组织和管理这些类定义，并控制他们的可见性，相互依赖关系以及加载顺序。"命名空间"和"模块"能够帮助我们很好地解决这个问题。（EcmaScript 6已经实现了模块系统，但因它还没有被所有浏览器实现，此处我们仍以ES5为例来进行说明）
命名空间 - Namespaces
JavaScript中并没有命名空间的概念。我们需要通过对象来创建命名空间，并将我们定义的对象类型放入其中。
//create namespace
var myLib = {};
myLib.myPackage = {};
//Register types to namespace
myLib.myPackage.MyType1 = MyType1;
myLib.myPackage.MyType2 = MyType2;
模块 - Modules
模块被用来将我们的JavaScript代码分解到包中。模块可以引用其他模块或将自己定义的对象类型对外暴露，以供其他模块使用。同时它能够用来管理模块间的依赖关系，并按照我们指定的顺序进行加载。目前有一些第三方库可以用来实现模块的管理。
下面的例子中，我们在模块里定义新的类型，并且引用其他模块并将自身的公共类型对外暴露。
Module.define("module1.js",
["dependent_module1.js","dependent_module2.js",...],
function(dependentMod1, dependentMod2) {//IMPORTS
//TYPE DEFINITIONS
function ExportedType1(){
// use of dependent module’s types
var dependentType = new dependentMod1.DependentType1();
...
}
function ExportedType2(){
}
...
// EXPORTS
return { ExportedType1: ExportedType1, ExportedType2:ExportedType2,...};
});
//To use a module (can work asynchronously or synchronously):
Module.use(["module1.js"], function(aModule){
console.log("Loaded aModule!");
var AType = aModule.AnExportedType;
var atype1Instance = new AType();
});
自定义异常 - Custom Exceptions
JavaScript中有一些内部定义的异常，如Error、TypeError和SyntaxError。它们会在运行时被创建和抛出。所有的异常都是"unchecked"。一个普通的对象也可以被用作一个异常，并在throw语句中抛出。因此，我们可以创建自己定义的异常对象，并且在程序中捕获它们进行处理。一个异常处理的最佳实践是，扩展JavaScript中标准的Error对象。
function BaseException() {}
BaseException.prototype = new Error();
BaseException.prototype.constructor = BaseException;
BaseException.prototype.toString = function() {
// note that name and message are properties of Error
return this.name + ":"+this.message;
};
function NegativeNumberException(value) {
this.name = "NegativeNumberException";
this.message = "Negative number!Value: "+value;
}
NegativeNumberException.prototype = new BaseException();
NegativeNumberException.prototype.constructor = NegativeNumberException;
function EmptyInputException() {
this.name = "EmptyInputException";
this.message = "Empty input!";
}
EmptyInputException.prototype = new BaseException();
EmptyInputException.prototype.constructor = EmptyInputException;
var InputValidator = (function() {
var InputValidator = {};
InputValidator.validate = function(data) {
var validations = [validateNotNegative, validateNotEmpty];
for (var i = 0; i < validations.length; i++) {
try {
validations[i](data);
} catch (e) {
if (e instanceof NegativeNumberException) {
//re-throw
throw e;
} else if (e instanceof EmptyInputException) {
// tolerate it
data = "0";
}
}
}
};
return InputValidator;
function validateNotNegative(data) {
if (data < 0)
throw new NegativeNumberException(data)
}
function validateNotEmpty(data) {
if (data == "" || data.trim() == "")
throw new EmptyInputException();
}
})();
try {
InputValidator.validate("-1");
} catch (e) {
console.log(e.toString()); // NegativeNumberException:Negative number!Value: -1
console.log("Validation is done."); // Validation is done.
}
自定义事件 - Custom Events
自定义事件能够帮助我们减小代码的复杂度，并且有效地进行对象之间的解耦。下面是一个典型的自定义事件应用模式：
function EventManager() {}
var listeners = {};
EventManager.fireEvent = function(eventName, eventProperties) {
if (!listeners[eventName])
return;
for (var i = 0; i < listeners[eventName].length; i++) {
listeners[eventName][i](eventProperties);
}
};
EventManager.addListener = function(eventName, callback) {
if (!listeners[eventName])
listeners[eventName] = [];
listeners[eventName].push(callback);
};
EventManager.removeListener = function(eventName, callback) {
if (!listeners[eventName])
return;
for (var i = 0; i < listeners[eventName].length; i++) {
if (listeners[eventName][i] == callback) {
delete listeners[eventName][i];
return;
}
}
};
EventManager.addListener("popupSelected", function(props) {
console.log("Invoked popupSelected event: "+props.itemID);
});
EventManager.fireEvent("popupSelected", {
itemID: "100"
}); //Invoked popupSelected event: 100
编写组件 - Components
JavaScriipt允许开发人员通过编写组件来向HTML元素添加行为。下面是一个典型的应用场景，将JavaScript对象绑定到了DOM元素上。
1-定义JavaScript组件
function InputTextNumberComponent(domElement) {
this.initialize(domElement);
}
InputTextNumberComponent.prototype.initialize =
function(domElement) {
domElement.onchange = function() {
//just a format
domElement.value = "-" +domElement.value + " -";
};
domElement.jsComponent = this; //Expando property
this.domElement = domElement;
};
InputTextNumberComponent.prototype.resetValue = function() {
this.domElement.value = "";
};
2-定义一个CSS样式用于与JavaScript组件写作控制HTML元素
<style type="text/css">
.inputTextNumber { text-align:right; }
</style>
HTML元素的定义如下
<input type="text" class="inputTextNumber" name="NumberField"
size="10" value="Click me!" onClick="this.jsComponent.
resetValue()">
2-当页面加载时（或DOM元素都已准备就绪），检测HTML元素并创建JavaScript组件
window.onload = function() {
var inputTextNumbers = document.getElementsByClassName("inputTextNumber");
for (var i = 0; i < inputTextNumbers.length; i++) {
var myComp = new InputTextNumberComponent(
inputTextNumbers.item(i));
}
};
简书签约作者：技匠，以上内容欢迎大家分享到朋友圈/微博等。如需转载，请通过简信联系授权。谢谢大家！
