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 相关文章推荐
js文件中调用js的实现方法小结
Oct 23 Javascript
javascript实现动态导入js与css等静态资源文件的方法
Jul 25 Javascript
JavaScript驾驭网页-获取网页元素
Mar 24 Javascript
使用BootStrapValidator完成前端输入验证
Sep 28 Javascript
微信小程序progress组件使用详解
Jan 31 Javascript
vue中vee validate表单校验的几种基本使用
Jun 25 Javascript
vue项目中使用tinymce编辑器的步骤详解
Sep 11 Javascript
JavaScript 复制对象与Object.assign方法无法实现深复制
Nov 02 Javascript
在webstorm开发微信小程序之使用阿里自定义字体图标的方法
Nov 15 Javascript
如何用webpack4.0撸单页/多页脚手架 (jquery, react, vue, typescript)
Jun 18 jQuery
通过循环优化 JavaScript 程序
Jun 24 Javascript
vue scroll滚动判断的实现(是否滚动到底部、滚动方向、滚动节流、获取滚动区域dom元素)
Jun 11 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 empty函数判断mysql表单是否为空
2010/04/12 PHP
分享下PHP register_globals 值为on与off的理解
2013/09/26 PHP
PHP检测字符串是否为UTF8编码的常用方法
2014/11/21 PHP
19个Android常用工具类汇总
2014/12/30 PHP
Laravel5中contracts详解
2015/03/02 PHP
jquery+thinkphp实现跨域抓取数据的方法
2016/10/15 PHP
PHP网页安全认证的实例详解
2017/09/28 PHP
jquery 简短右键菜单 多浏览器兼容
2010/01/01 Javascript
js实现的点击div区域外隐藏div区域
2014/06/30 Javascript
JavaScript利用append添加元素报错的解决方法
2014/07/01 Javascript
jQuery移动web开发中的页面初始化与加载事件
2015/12/03 Javascript
浅谈js中function的参数默认值
2017/02/20 Javascript
详解开源的JavaScript插件化框架MinimaJS
2017/10/26 Javascript
JavaScript实现仿Clock ISO时钟
2018/06/29 Javascript
vue-rx的初步使用教程
2018/09/21 Javascript
js array数组对象操作方法汇总
2019/03/18 Javascript
微信小程序与公众号卡券/会员打通的问题
2019/07/25 Javascript
微信小程序开发之转发分享功能
2019/10/22 Javascript
three.js利用卷积法如何实现物体描边效果
2019/11/27 Javascript
微信小程序getLocation 需要在app.json中声明permission字段
2020/03/03 Javascript
详细探究Python中的字典容器
2015/04/14 Python
在Python中操作时间之strptime()方法的使用
2020/12/30 Python
python编程培训 python培训靠谱吗
2018/01/17 Python
Django工程的分层结构详解
2019/07/18 Python
解决Django中调用keras的模型出现的问题
2019/08/07 Python
python 计算积分图和haar特征的实例代码
2019/11/20 Python
python读取mysql数据绘制条形图
2020/03/25 Python
5分钟快速掌握Python定时任务框架的实现
2021/01/26 Python
阿迪达斯印尼官方网站:adidas印尼
2020/02/10 全球购物
如何写一个Java类既可以用作applet也可以用作java应用
2016/01/18 面试题
祖国在我心中演讲稿
2014/01/15 职场文书
演讲稿开场白台词
2014/08/25 职场文书
街道党风廉政建设调研报告
2015/01/01 职场文书
2015年生产部工作总结范文
2015/05/25 职场文书
消夏晚会主持词
2015/06/30 职场文书
2016参观监狱警示教育活动心得体会
2016/01/15 职场文书