js的匿名函数使用介绍


Posted in Javascript onDecember 11, 2013

1.匿名函数概述

关于匿名函数的第一次认识还是在jquery源码里,打开jQuery首先看到的是

(function( window, undefined ) {.......................})(window);

这就是一个匿名函数,红色为参数,匿名函数的作用是创建一块封闭区域,外面不能够访问里面的变量和方法。

既然不能访问,那怎么能调用jquery?这是因为jquery的匿名函数有这样两句话(蓝色字):

(function( window, undefined ) { // Define a local copy of jQuery 
var jQuery = function( selector, context ) { 
// The jQuery object is actually just the init constructor 'enhanced' 
return new jQuery.fn.init( selector, context ); 
}, 
......... 
window.jQuery = window.$ = jQuery; 
})(window);

原来在匿名函数里将jQuery传给了window,这也就是为什么参数的传递中要传递window,所以以后每次调用jquery其实是调用window的jQuery这个对象。

由jquery调用自己里面的方法。外面是无法调用的,这样可以保证安全和不冲突。

2.接着上面的话题,关于jQuery的插件

以下是我写的分页控件的部分代码:

;(function ($) { $.fn.tabing = function (arg) { 
instance = new Plugin(this, arg); 
}; 
var instance = null; 
function Plugin(element){ 
this._tabs = $(element); 
this._tabli = $("a[href*='#']",this._tabs); 
this._tabDiv = this._tabs.siblings().filter("div[id*='tab']"); 
this.init(); 
} 
Plugin.prototype = { 
init: function(){ 
this._tabli.addClass("unselected"); 
this._tabli.eq(0).addClass("selected"); 
this._tabDiv.css("display","none"); 
this._tabDiv.eq(0).css("display","block"); 
this._tabli.each(function(){ 
$(this).bind("click",function(){ 
for(var i = 0;i<instance._tabDiv.length;i++){ 
instance._tabDiv.eq(i).css("display","none"); 
} 
instance._tabDiv.filter("#"+$(this).attr("href").split('#')[1]).css("display","block"); 
}); 
}) 
} 
} 
})(jQuery);

注意红色的字,其实jQuery插件也是在写匿名函数,这样保证每个插件的独立性,要不怎么叫插件,红色的字$.fn.tabing说明在这个插件里面有个tabing给了jquery的fn,

这样外面的jquery对象就可以直接调用tabing,这也是插件与外界的唯一接触。

3. 说完了jquery插件对匿名函数的使用,再说一下window的匿名函数

其实jquery本身就是window的匿名函数,即第一点,那我们怎么写window的匿名函数呢?

即写了匿名函数后,在函数里面有个与window交互的接口,例如下面:

(function(){ 
function getObjByID(id){ 
return document.getElementById(id); 
} 
function __addClass(id,className,classValue){ 
$(id).style.className=classValue; 
} 
window.addClass=__addClass; 
})();

同样是看红色的字,这样在该匿名函数外就可以调用addClass(),但无法调用getObjByID()。

4.匿名函数也会在解析的时候执行

如下:

function Video() { }; 
function Movie() { }; var _video = new Video(); 
_video.size = 3; 
_video.toString = function () { 
return "video"; 
}; 
_video.getName = function () { 
return "VideoXXX"; 
}; 
var _movie = new Movie(); 
(function (parent, child) { 
for (var ele in parent) { 
if (!child[ele]) //在child不包含该属性或者方法的时候,才会拷贝parent的一份 
child[ele] = parent[ele]; 
} 
})(_video, _movie); //匿名函数调用的方式 
alert(_movie.size); //3 
alert(_movie.toString()); //[object Object] 
alert(_movie.getName()); //VideoXXX

三个alert都有结果,说明了匿名函数内部执行了。
Javascript 相关文章推荐
经常用到的JavasScript事件的翻译
Apr 09 Javascript
javascript之解决IE下不渲染的bug
Jun 29 Javascript
扩展Jquery插件处理mouseover时内部有子元素时发生样式闪烁
Dec 08 Javascript
取消选中单选框radio的三种方式示例介绍
Dec 23 Javascript
详解vuex的简单使用
Mar 12 Javascript
JavaScript函数apply()和call()用法与异同分析
Aug 10 Javascript
electron + vue项目实现打印小票功能及实现代码
Nov 25 Javascript
详解Vue+ElementUI从零开始搭建自己的网站(一、环境搭建)
Apr 30 Javascript
angular多语言配置详解
May 16 Javascript
使用Vue实现简单计算器
Feb 25 Javascript
原生js实现html手机端城市列表索引选择城市
Jun 24 Javascript
关于element-ui表单中限制输入纯数字的解决方式
Sep 08 Javascript
jquery ajax jsonp跨域调用实例代码
Dec 11 #Javascript
JavaScript Math.ceil() 函数使用介绍
Dec 11 #Javascript
Javascript实现返回上一页面并刷新的小例子
Dec 11 #Javascript
div浮层,滚动条移动,位置保持不变的4种方法汇总
Dec 11 #Javascript
判断javascript的数据类型(示例代码)
Dec 11 #Javascript
利用javaScript实现点击输入框弹出窗体选择信息
Dec 11 #Javascript
使用JQuery快速实现Tab的AJAX动态载入(实例讲解)
Dec 11 #Javascript
You might like
PHP array操作10个小技巧分享
2011/06/23 PHP
Yii2分页的使用及其扩展方法详解
2016/05/23 PHP
JS效率个人经验谈(8-15更新),加入range技巧
2007/01/09 Javascript
js实现幻灯片播放图片示例代码
2013/11/07 Javascript
JavaScript字符串对象substring方法入门实例(用于截取字符串)
2014/10/17 Javascript
jquery mobile 实现自定义confirm确认框效果的简单实例
2016/06/17 Javascript
JS中的进制转换以及作用
2016/06/26 Javascript
JS添加删除DIV的简单实例
2016/07/08 Javascript
Node.js + Redis Sorted Set实现任务队列
2016/09/19 Javascript
select下拉框插件jquery.editable-select详解
2017/01/22 Javascript
vue.js移动端app之上拉加载以及下拉刷新实战
2017/09/11 Javascript
基于vue2.x的电商图片放大镜插件的使用
2018/01/22 Javascript
详解ES6中的三种异步解决方案
2018/06/28 Javascript
vue表单验证你真的会了吗?vue表单验证(form)validate
2019/04/07 Javascript
js使用cookie实现记住用户名功能示例
2019/06/13 Javascript
vue绑定class的三种方法
2020/12/24 Vue.js
Python读写Redis数据库操作示例
2014/03/18 Python
Python实现压缩与解压gzip大文件的方法
2016/09/18 Python
Python获取当前公网ip并自动断开宽带连接实例代码
2018/01/12 Python
python中不能连接超时的问题及解决方法
2018/06/10 Python
Python下简易的单例模式详解
2019/04/08 Python
Python supervisor强大的进程管理工具的使用
2019/04/24 Python
使用WingPro 7 设置Python路径的方法
2019/07/24 Python
解决python3.6用cx_Oracle库连接Oracle的问题
2020/12/07 Python
CSS3 制作绽放的莲花采用效果叠加实现
2013/01/31 HTML / CSS
德国最大的网上鞋店之一:Schuhe24.de
2017/06/10 全球购物
River Island美国官网:英国高街时尚品牌
2018/09/04 全球购物
Chemist Warehouse中文网:澳洲连锁大药房
2021/02/05 全球购物
运动会入场口号
2014/06/07 职场文书
初级党校心得体会
2014/09/11 职场文书
2014年大学学生会工作总结
2014/12/02 职场文书
班主任经验交流心得体会
2015/11/02 职场文书
oracle表分区的概念及操作
2021/04/24 Oracle
pytorch 权重weight 与 梯度grad 可视化操作
2021/06/05 Python
node.js如何自定义实现一个EventEmitter
2021/07/16 Javascript
Python OpenCV超详细讲解读取图像视频和网络摄像头
2022/04/02 Python