JavaScript 对象声明

calendar Nov 23, 2013   ---   · 2 min read · javascript  ·
Share on: linkedin copy
对象，类，模块的概念可以让系统更清晰，亦能增强代码的重用性。目前 JavaScript 规范本身并不支持类或模块，正在制定中的 ECMAScript 6th Edition 将会纳入类，模块的概念，不过不知会是何年马月的事，毕竟这不能像 JDK 升级那么干脆。


还有种办法来写模块化的 JavaScript 就是使用微软的  TypeScript 或是 Google 的 Dart，它们是面向对象的编程语言， 能直接编译成兼容的 JavaScript 代码，有条件的可以去尝试。

回到现实来，就现有的 JavaScript 规范怎么去模块化。众所周知，JavaScript 中函数是第一等公民，所以我们早先是这样使用函数来声明对象的：

1. 原始写法(比直接调用函数显得高级些)：
 1function Module(){
 2    this.count = 10;
 3    this.foo = function(x){
 4        return x+1;
 5    }
 6}
 7
 8var m1 = new Module();
 9console.log(m1.count);
10console.log(m1.foo(3));

2. 简单写法，借助 JSON 就无需写成 new Object({}) 的形式：
 1var module1 = {
 2
 3    _count : 10,
 4
 5    m1 : function() {
 6        console.info("do something");
 7    },
 8
 9    m2 : function() {
10        // ...
11    }
12
13};
14
15module1.m1();
16console.log(module1._count);

这不能很好的保护好内部成员，象这里你直接访问了 _count 属性。

3. 立即执行函数(Immediately-Invoked Function Expression, IIFE):
 1var module1 = (function() {
 2
 3    var _count = 0;
 4
 5    var _m1 = function() {
 6        // ...
 7    };
 8
 9    var _m2 = function() {
10        // ...
11    };
12
13    return {
14        m1 : _m1,
15        m2 : _m2
16    };
17
18})();
19console.log(module1.m1);

形式 (function(){}(); 就是声明函数并立即执行，你只能访问到 return 语句把暴露的有限的成员。

4. 扩展模式(Augmentation)
1var module2 = (function(mod) {
2    mod.m3 = function() {
3        //...
4    };
5
6    return mod;
7
8})(module1);

其实就是在前一种模式的基础上传入一个参数，却很有意义，例如上面完成了 module2 对 module1 的继承，module2 不仅拥有 module1 所有的属性和方法，还增加了一个 m3 方法。

同时扩展模式还有其他的用途，例如引入其他的 JavaScript 函数库，像 jQuery 等。

下面叫做宽松的扩展模式(Loose augmentation) 是个更保险的做法。比如在浏览器环境下，可能 module1 还未初始化好会导致传入一个空对象，所以加个判断
1var module1 = ( function (mod){
2     //...
3    return mod;
4
5})(window.module1 || {});

再比如引入全局对象，模块中需使用到 jQuery 和 YUI 库
1var module1 = (function ($, YAHOO) {
2
3    //$("div") ...
4
5})(jQuery, YAHOO);

本文主要参考自：Javascript模块化编程（一）：模块的写法

我们可以多读读那些著名的 JavaScript 库的源码，从中取经。像 jQuery 的模式就是
1(function( window, undefined ) {
2    //......
3    ow.jQuery = window.$ = jQuery;
4})( window );

上面这个函数立即执行，并把 jQuery 赋值为 window 的 $ 变量，从而让你在任何时候可以使用 $。

现在似乎不太怎么用 prototype 了，原型链感觉有点深奥，它与传统的面象对象编程中继承的概念有些差异。

另参考：1. JavaScript 模块化编程 - Module Pattern
                2. JavaScript Module Pattern: In-Depth 永久链接 https://yanbin.blog/javascript-object-declaration/, 来自 隔叶黄莺 Yanbin's Blog
[版权声明] 本文采用 署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 进行许可。