JavaScript 模拟类与命名空间实现详解
作者:代码拾荒时间:2026-10-26 02:01:19浏览:354
本文详细讲解如何在 JavaScript 中模拟类和命名空间。通过构造函数、对象字面量、匿名函数及 JSON 等多种方式,演示私有成员、公有成员及静态成员的创建与调用方法,帮助开发者理解 JS 面向对象编程的基础实现。
JavaScript 模拟类与命名空间基础
首先展示一段最基础的示例代码。
具体实现如下:
以下代码片段演示了如何定义和使用命名空间、类以及函数:
NameSpace = {};
NameSpace.Class = function(){
this.Method = function(info){alert(info);}
};
new NameSpace.Class().Method("Hello world"); 类与命名空间的多种实现方式
接下来展示更多具有代表性的代码案例,涵盖各种常见场景。
1.类的模拟
代码实现如下:
// 类定义
function Class(info){
// 私有成员
var privateData = "private data";
var privateMethod = function(){writeline("private");};
function privateMethod2(info){writeline("private");}
// 公有成员(使用this)
this.Data = "public data";
this.Method = function(){writeline(info);};
};
// 类的静态成员
Class.StaticData = "static data";
Class.StaticMethod = function(info){writeline(info);}; 2.命名空间的模拟
代码示例如下:
function NameSpace(){}
或者
NameSpace = {};
或者
NameSpace = new Object(); 3.目标:创建类实例,并调用实例方法
代码片段如下:
var o = new NameSpace.Class("hello world");
o.Method();
// 使用已有的类定义,并将静态方法挂载到 NameSpace 下
NameSpace.Class1 = Class;
new NameSpace.Class1("new NameSpace.Class1().Method()").Method();
// 或者:新建类定义
NameSpace.Class2 = function(info){
this.Method = function(){writeline(info);};
};
new NameSpace.Class2("new NameSpace.Class2().Method()").Method(); 4.目标:调用类的静态函数
代码示例如下:
NameSpace.Class.StaticMethod();
// 静态对象+静态方法
NameSpace.Class3 = {}; // {}表示这是一个对象,或者用new object();
NameSpace.Class3.Method = function(info) {writeline(info);};
NameSpace.Class3.Method("NameSpace.Class3.Method()");
// 或者:new一个对象赋予静态成员
NameSpace.Class4 = new Class("NameSpace.Class4.Method()");
NameSpace.Class4.Method();
// 或者:匿名函数用于定义类,再用new创建对象
NameSpace.Class5 = new (function(info){
this.Method = function(){writeline(info);};
})("NameSpace.Class5.Method()");
NameSpace.Class5.Method();
// 或者:JSON方式(类定义+创建同时完成)
// 优点是简单,缺点是不能传递参数进去
NameSpace.Class6 = {
Method : function(info){writeline(info);}
};
NameSpace.Class6.Method("NameSpace.Class6.Method()"); 演示代码:
<html> <head> </head> <body> <h1>Javascript 类和命名空间的模拟</h1> <p><b>请查看源代码并跟踪测试</b></p> <p>整理收集:<i>http://surfsky.cnblogs.com</i></p> <p>最后更新:<i>2010-10</i></p> </body> </html>[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
ps.很开心,vs2010对js的智能感知越来越好用了:p
出处:http://surfsky.cnblogs.com
作者最新文章
JavaScript异步发送HTTP请求时怎么优雅地处理错误
2026-11-05 17:10:44
5款主流JS在线运行工具对比:CodePen、JSFiddle与StackBlitz怎么选
2026-11-05 17:04:04
JavaScript入门书籍避坑:这些书不适合初学者
2026-11-05 16:31:15
JS使用Math.round实现保留两位小数的原理与代码
2026-11-05 15:35:55
JavaScript 原生 Date 对象怎么实现日期加减
2026-11-05 14:30:00
