Javascript匿名函数的一种应用 代码封装
更新时间：2010年06月27日 01:41:30 作者：
说实话，对于js初学者的我来说。这个东西太吓人了，在这些JS库中，这个函数基本上把整个库的所有代码全括起来了，这种写法完全超越了我的常识。
在一些Javascript库中可以看见这种写法：
(function(){
//所有库代码代码
})();
说实话，对于js初学者的我来说。这个东西太吓人了，在这些JS库中，这个函数基本上把整个库的所有代码全括起来了，这种写法完全超越了我的常识。难道不应该好好的划分一下吗，难道不应该体现出层次和功能划分吗，怎么会一个函数搞定呢。我一开始完全不敢去细想它的道理。直到使用JS一段时间后，某一天一位同事在闲聊时说起了这个问题，我才知道这个叫匿名函数。匿名函数我并不陌生，C#，Python，Lua中都有这个咚咚。我到网上去查了一下，介绍文章很多，也很详细，但是我心头的疑问却没有得到解决：为什么要这样写。
我找了一款著名的JS开源库JQuery，他的代码就是典型的以上写法，在粗略看了他的代码之后我发现这套代码实在太大了太复杂了，实在不适合我。于是我转而去看另外一个开源js库swfobject，这个库提供了简单的接口把Flash控件嵌入到网页中。这个代码好多了，很短，很快就看完了。看完之后我恍然大悟，原来如此。真理就是如此简单，之所以这样写，只有一个目的：封装。
初学JS的时候，我问过同事，js怎么定义私有函数和变量。当时的得到的答案是：js不是面向对象的，不提供这些功能。我对这个答案也坦然接受了，毕竟严格的封装并不是必要的。现在终于明白了，办法总是有的，在不支持封装的语言里同样可以实现封装。而实现的方法就是匿名函数。来看一段代码：
//定义
function F(x)
{
this.x = x;
function double(x){return x*x;}
this.getDoubleX(){
return double(this.x);
}
}
//使用
f = new F(12);
alert(f.getDoubleX());
上面的代码很简单，我没有去运行它。懂点js的都知道这是JS的类定义方式。函数F相当于一个构造函数，而函数里面的其他定义都是函数私有的外部无法访问，例如double函数。这样就变相实现了私有方法。其他打上“this.”前缀的成员相当于公开成员，外部可以访问。
而这些库之所以要用一个大函数包裹整个库代码，就是为了不向使用者暴露内部方法和变量，强制用户只能访问开放的API。从这一点可以开出这些开发者的良苦用心。
到这里我不禁又要问了，js如何实现继承呢。希望这一次的答案不要像上一次一样：不支持。
复制代码 代码如下:
(function(){
//所有库代码代码
})();
说实话，对于js初学者的我来说。这个东西太吓人了，在这些JS库中，这个函数基本上把整个库的所有代码全括起来了，这种写法完全超越了我的常识。难道不应该好好的划分一下吗，难道不应该体现出层次和功能划分吗，怎么会一个函数搞定呢。我一开始完全不敢去细想它的道理。直到使用JS一段时间后，某一天一位同事在闲聊时说起了这个问题，我才知道这个叫匿名函数。匿名函数我并不陌生，C#，Python，Lua中都有这个咚咚。我到网上去查了一下，介绍文章很多，也很详细，但是我心头的疑问却没有得到解决：为什么要这样写。
我找了一款著名的JS开源库JQuery，他的代码就是典型的以上写法，在粗略看了他的代码之后我发现这套代码实在太大了太复杂了，实在不适合我。于是我转而去看另外一个开源js库swfobject，这个库提供了简单的接口把Flash控件嵌入到网页中。这个代码好多了，很短，很快就看完了。看完之后我恍然大悟，原来如此。真理就是如此简单，之所以这样写，只有一个目的：封装。
初学JS的时候，我问过同事，js怎么定义私有函数和变量。当时的得到的答案是：js不是面向对象的，不提供这些功能。我对这个答案也坦然接受了，毕竟严格的封装并不是必要的。现在终于明白了，办法总是有的，在不支持封装的语言里同样可以实现封装。而实现的方法就是匿名函数。来看一段代码：
复制代码 代码如下:
//定义
function F(x)
{
this.x = x;
function double(x){return x*x;}
this.getDoubleX(){
return double(this.x);
}
}
//使用
f = new F(12);
alert(f.getDoubleX());
上面的代码很简单，我没有去运行它。懂点js的都知道这是JS的类定义方式。函数F相当于一个构造函数，而函数里面的其他定义都是函数私有的外部无法访问，例如double函数。这样就变相实现了私有方法。其他打上“this.”前缀的成员相当于公开成员，外部可以访问。
而这些库之所以要用一个大函数包裹整个库代码，就是为了不向使用者暴露内部方法和变量，强制用户只能访问开放的API。从这一点可以开出这些开发者的良苦用心。
到这里我不禁又要问了，js如何实现继承呢。希望这一次的答案不要像上一次一样：不支持。
相关文章
这篇文章主要介绍了使用JavaScript获取URL中的参数(两种方法)的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下2016-11-11
这篇文章主要介绍了javascript高级定时器，针对javascript的代码队列进行详细解析，感兴趣的小伙伴们可以参考一下2015-12-12
还隐约记得第一次遇到 parseInt这个诡异问题的时候，以为发现了IE的BUG，兴奋不已。2009-09-09
这篇文章主要介绍了前端如何使用FormData对象进行数据传参,包括创建FormData对象、添加数据、发送请求等步骤,文中通过代码介绍的非常详细,需要的朋友可以参考下2025-03-03
Object是JavaScript基本数据类型之一（function也属于object，是特殊的object）,其存储于堆中,这篇文章主要给大家介绍了关于Js中安全获取Object深层对象的相关资料,需要的朋友可以参考下2021-09-09
这篇文章主要介绍了js创建对象的方式,实例总结了3种常用的创建对象的方式,非常实用,需要的朋友可以参考下2015-01-01
阻塞渲染就是在页⾯中我们通常会引⽤外部⽂件，⽽浏览器在解析HTML页⾯是从上到下依次解析、渲染，如果<head>中引⽤了⼀个a.js⽂件，⽽这个⽂件很⼤或者有问题，需要2秒加载，那么浏览器会停⽌渲染页⾯，2秒后加载完成才会继续渲染，这个就是阻塞2022-06-06
本文主要介绍了原生js获取浏览器窗口及元素宽高常用方法。具有一定的参考价值，下面跟着小编一起来看下吧2017-01-01
这篇文章将和大家一起探讨一下动态高度虚拟列表原理并指出常见虚拟列表采用累计高度方式存在缺点,感兴趣的小伙伴可以跟随小编一起学习一下2024-11-11
JS实现常见的TAB、弹出层效果(TAB标签，斑马线，遮罩层等)
这篇文章主要介绍了JS实现常见的TAB、弹出层效果,包括TAB标签，斑马线，遮罩层等.以完整实例总结分析了JavaScript实现tab切换、隔行变换及弹出遮罩层的完整实现技巧,需要的朋友可以参考下2015-10-10
最新评论