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实现代码
May 23 Javascript
Egret引擎开发指南之视觉编程
Sep 03 Javascript
JavaScript将字符串转换成字符编码列表的方法
Mar 19 Javascript
微信小程序 数组中的push与concat的区别
Jan 05 Javascript
基于bootstrap按钮式下拉菜单组件的搜索建议插件
Mar 25 Javascript
创建Vue项目以及引入Iview的方法示例
Dec 03 Javascript
Vue源码中要const _toStr = Object.prototype.toString的原因分析
Dec 09 Javascript
js实现转动骰子模型
Oct 24 Javascript
微信小程序自定义导航栏(模板化)
Nov 15 Javascript
js实现表格单列按字母排序
Aug 12 Javascript
解决vue elementUI 使用el-select 时 change事件的触发问题
Nov 17 Vue.js
解决vue $http的get和post请求跨域问题
Jun 07 Vue.js
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中jQuery插件autocomplate的简单使用笔记
2012/06/14 PHP
php文件上传简单实现方法
2015/01/24 PHP
php中实现用数组妩媚地生成要执行的sql语句
2015/07/10 PHP
详细讲解JS节点知识
2010/01/31 Javascript
为Extjs加加速(javascript加速)
2010/08/19 Javascript
jQuery实现动画效果的实例代码
2013/05/07 Javascript
JavaScript加强之自定义callback示例
2013/09/21 Javascript
使用jQuery重置(reset)表单的方法
2014/05/05 Javascript
JavaScript字符串对象split方法入门实例(用于把字符串分割成数组)
2014/10/16 Javascript
用简洁的jQuery方法toggleClass实现隔行换色
2014/10/22 Javascript
JavaScript Math.floor方法(对数值向下取整)
2015/01/09 Javascript
angularjs学习笔记之双向数据绑定
2015/09/26 Javascript
跟我学习javascript的全局变量
2015/11/16 Javascript
vue刷新和tab切换实例
2018/02/11 Javascript
Angular利用内容投射向组件输入ngForOf模板的方法
2018/03/05 Javascript
ES6 中可以提升幸福度的小功能
2018/08/06 Javascript
JS在Array数组中按指定位置删除或添加元素对象方法示例
2019/11/19 Javascript
[15:15]教你分分钟做大人:狙击手
2014/10/30 DOTA
[49:43]VG vs FNATIC 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
Python实现将json文件中向量写入Excel的方法
2018/03/26 Python
python 获取指定文件夹下所有文件名称并写入列表的实例
2018/04/23 Python
Python实现多条件筛选目标数据功能【测试可用】
2018/06/13 Python
Tensorflow 查看变量的值方法
2018/06/14 Python
pycharm修改界面主题颜色的方法
2019/01/17 Python
python实现两个文件夹的同步
2019/08/29 Python
python使用yield压平嵌套字典的超简单方法
2019/11/02 Python
将pycharm配置为matlab或者spyder的用法说明
2020/06/08 Python
HTML5 本地存储实现购物车功能
2017/09/07 HTML / CSS
全球知名巧克力品牌:Godiva
2016/07/22 全球购物
大学生社团活动总结
2014/04/26 职场文书
新学期国旗下演讲稿
2014/05/08 职场文书
机械操作工岗位职责
2014/08/08 职场文书
领导干部群众路线剖析材料
2014/10/09 职场文书
Python中文纠错的简单实现
2021/07/07 Python
html5调用摄像头截图功能
2022/01/18 Javascript
Mysql数据库表中为什么有索引却没有提高查询速度
2022/02/24 MySQL