本文介绍如何在 JavaScript 中手动实现面向对象特性。通过 Namespace.register 方法动态创建命名空间，利用构造函数和原型链定义类。示例展示了如何继承父类属性与方法，并通过重新赋值原型方法实现重载，包含完整的 Employee 与 Developer 类定义及测试代码。
背景与目标
由于团队项目中大量的 JavaScript 和 CSS 客户端工作由另一位同事负责，而该同事近期工作繁忙，无法立即进行代码重构，因此负责人仅提出了建议而未强制实施。然而，我在近期修复一些客户端小 Bug 时，发现原有代码结构混乱、难以理解，导致不敢轻易修改。为此，我决定动手编写一个简单的 JavaScript 框架，以实现命名空间、继承和重载等面向对象特性。
命名空间实现
定义命名空间
Namespace.js
代码如下:
Namespace = new Object();
Namespace.register = function(fullname){
try
{
var nsArray = fullname.split(".");
var strNS = "";
var strEval = "";
for(var i=0;i<nsArray.length;i++){
if(strNS.length >0)
strNS += ".";
strNS += nsArray[i];
strEval += " if(typeof("+ strNS +") =='undefined') " + strNS + " = new Object(); ";
}
if(strEval != "") eval(strEval);
}catch(e){alert(e.message);}
} 类定义与继承
.Employee.js
Employee.js
代码如下:
//注册命名空间
Namespace.register("MyCompany");
//1.类:雇员
MyCompany.Employee = function(empName){
this.Name = empName;
this.Salary = 1000;
this.Position = "cleaner";
}
MyCompany.Employee.prototype.ShowName = function(){
return "I'm "+this.Name+",my salary is $" + this.Salary;
}
MyCompany.Employee.prototype.Work = function(){
return "I'm a "+ this.Position +",I'm cleaning all day!"
}
//2.类:程序员
MyCompany.Developer = function(empName){
//继承父类属性
MyCompany.Employee.call(this,empName);
//覆盖父类属性
this.Position = "developer";
//扩展属性
this.Technology = "C#";
}
//继承父类原型方法
MyCompany.Developer.prototype = new MyCompany.Employee();
//覆盖父类方法
MyCompany.Developer.prototype.Work = function(){
return "I'm a "+ this.Position +",i'm good at "+ this.Technology +",i'm coding all day!"
} 测试与示例
测试代码
代码如下:
<html>
<title>javascript 面向对象的实现 namespace,class,继承，重载</title>
<head>
<script language="javascript" src="namespace.js" type="text/javascript"></script>
<script language="javascript" src="employee.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
function showEmployee(){
var emp = new MyCompany.Employee("xiaoming");
showInfo(emp);
}
function showDeveloper(){
var emp = new MyCompany.Developer("Gates");
showInfo(emp);
}
function showInfo(emp){
alert(emp.ShowName());
alert(emp.Work());
}
</script>
</head>
<body>
<input type="button" value="show employee info" onclick="showEmployee();"/><br/><br/>
<input type="button" value="show developer info" onclick="showDeveloper();"/>
</body>
</html>源代码打包下载