1.闭包

每次看到jQuery的时候,首先想到的就是闭包。这是个老生常谈的问题了。今天重新回忆了一下闭包。

  • 什么是闭包? 当有一个函数想要访问另一个函数内部的变量,这个是访问不了的。所有我们要用闭包来访问。所以简单的来说,闭包就是连接函数内部和外部的一座桥梁,通过闭包我们能够访问其他函数内部的变量

  1.1作用域

想了解闭包,首先要知道作用域。最简单来说:全局变量和局部变量。

  • 全局变量(Global variable):可以在脚本的任何位置被引用。

  • 局部变量(Local variable):只存在于声明它的那个函数的内部,这个函数之外是无法引用的。

使用var声明的变量在当前作用域里面才起作用,未使用var申明的变量,不管在任何地方声明的,都是全局变量。用var声明的变量不一定是局部变量

1.2闭包的作用

闭包最大的作用就是全局变量私有化。在上面讲过闭包能够访问其他函数内部的变量,还有一个就是能后永久的把一个变量保存在当前作用域中。不会随着函数调用完之后会被JavaScript特有的垃圾回收机制回收。

 function outer(){

    var n=0;

    nAdd=function(){n+=1}

    function inner(){
      alert(n);
    }
    return inner;
  }   var result=outer();
  result(); //
  nAdd();
  result(); //

1.3闭包函数节流

    window.onresize = throttle(function () {
console.log(document.documentElement.clientWidth);
},400); function throttle(fn,delay) {
var timer = null;
return function () {
clearTimeout(timer);
timer = setTimeout(fn, delay);
}
}

2.each的方法

each方法遍历的对象 => 普通对象 | 数组 | 节点

 

  var obj = { 
   name: "sean",
age: 22
};
(1) for..in循环遍历
for(var key in obj)
{
console.log(key, obj[key]);
}
(2) each循环遍历
//遍历对象|数组
//第一个参数:要遍历的对象
//第二个参数:回调函数,每循环一次会把当前的key-value作为回调函数的参数返回给我们
//回调函数的参数:
//第一个参数:代表的是当前这次循环中对应的key
//第二个参数:代表的是当前这次循环中对应的value
$.each(obj,function (key,value) {
console.log(key, value); // sean 22
//如果name的值等于zs.就不遍历
if(value == "sean") return false;
});

  2.1 each在jQuery构造函数的静态方法上的使用

    $.each($(".box>div"),function (index,oDom) {
console.log(index, oDom);
});

  2.2 each在jQuery的原型对象上的方法的使用

 $(".box>div").each(function () {
console.log(index, oDom);
})
总结:如果要遍历jQ对象就使用$().each(fn(index,oDom)),如果要遍历数组或者是对象那么就使用$.each(遍历目标,fn(key,value))

  2.3 each的方法使用的注意点

  (1)this的指向:each中的this的指向比较特殊,this的指向是本次循环的value,并不是指向window

  思考?this为什么指向value呢?

    因为我们在遍历的时候,经常操作的是就是每次循环的value的值,那么设置this指向value有好处,我们的代码写的更少,回调函数的形参可以省略不写

  (2)中断循环

    如果满足条件,通过在回调函数中返回false来终止循环 return false

$.each(obj,function (key,value) {
console.log(key, value);
//如果name的值等于zs.就不遍历
if(value == "sean") return false;
});
遍历对象(有附加参数):
$.each(Object, function(p1, p2) {
this; //这里的this指向每次遍历中Object的当前属性值
p1; p2; //访问附加参数
}, ['参数1', '参数2']);
  遍历数组(有附件参数):
$.each(Array, function(p1, p2){
this; //这里的this指向每次遍历中Array的当前元素
p1; p2; //访问附加参数
}, ['参数1', '参数2'])
  遍历对象(没有附加参数)
$.each(Object, function(name, value) {
this; //this指向当前属性的值
name; //name表示Object当前属性的名称
value; //value表示Object当前属性的值
});
  遍历数组(没有附加参数)
$.each(Array, function(i, value) {
this; //this指向当前元素
i; //i表示Array当前下标
value; //value表示Array当前元素
});
  2.4 顺便说一下几个常见的this的指向
this指向谁由函数的调用方式决定
(1) 普通函数调用 fn() this-->window
(2) 构造函数调用 new fn() this-->内部新创建的对象
(3) 对象的方法调用 obj.fn() this->对象
(4) 函数上下文调用 call|apply this->第一个参数 2.5 对比的说一下map方法

  (1)map方法的使用

    $.map(遍历的对象,fn)

    $().map(fn)

  (2)和each的区别:

  • map的回调函数是和each的回调函数中的key-value是相反的
  • map不能终止循环,但是可以收集每次回调函数的返回值作为一个数组返回
  • map的this指向window
$.each(obj,function (key,value) {
console.log(key, value);//sean 22
//如果name的值等于zs.就不遍历
if(value == "sean") return false;
});
$.map(obj,function (key,value) {
console.log(key, value);//22 sean
// if(value == "sean") return false;
  
});

参考文章:阮一峰的网络日志

jQuery学习心得一的更多相关文章

  1. jquery学习心得:一个很好的css和js函数调用的例子

    统一目录下的资源结构图: <html><head> <link rel="stylesheet" href="gallery.css&quo ...

  2. jQuery学习心得

    表示在document.ready时执行代码 $(function(){ //1.取得要操作的对象(尽量只限制范围),如果对象多次使用要记得缓存 var $selector = $('selector ...

  3. jquery validate学习心得

    据说,javascript最初的由来就是为了解决表单的验证问题,当然现在的js已经能够用来做各种各样炫酷的效果,不过表单验证一直以来都是js很重要的一个用途(在博客园第一篇博客,不知道说些什么开头~~ ...

  4. JavaScript 秘密花园 学习心得

    目的 记录一下学习心得,便于以后复习,内容是比较基础的...但是很多内容我还是不知道... 对象 对象使用和属性 1.JavaScript 中所有变量都可以当作对象使用,除了两个例外 null和dun ...

  5. fullpage 插件学习心得

    fullpage.js 是一个基于jquery 的插件,它能够轻松的制作出高大上的全屏网站,主要功能有; 1.支持鼠标滚动 2.支持前进后退和键盘控制 3.多个回调函数 4.支持 CSS3 动画 5. ...

  6. 我的MYSQL学习心得(一) 简单语法

    我的MYSQL学习心得(一) 简单语法 我的MYSQL学习心得(二) 数据类型宽度 我的MYSQL学习心得(三) 查看字段长度 我的MYSQL学习心得(四) 数据类型 我的MYSQL学习心得(五) 运 ...

  7. jQuery学习之路(1)-选择器

    ▓▓▓▓▓▓ 大致介绍 终于开始了我的jQuery学习之路!感觉不能再拖了,要边学习原生JavaScript边学习jQuery jQuery是什么? jQuery是一个快速.简洁的JavaScript ...

  8. jquery学习(一)

    简单的jquery学习,首先在页面引入jquery <!-- 引入jquery --> <script src="js/jquery-1.8.3.js" type ...

  9. 我的MYSQL学习心得(二) 数据类型宽度

    我的MYSQL学习心得(二) 数据类型宽度 我的MYSQL学习心得(一) 简单语法 我的MYSQL学习心得(三) 查看字段长度 我的MYSQL学习心得(四) 数据类型 我的MYSQL学习心得(五) 运 ...

随机推荐

  1. Python 爬取美女图片,分目录多级存储

    最近有个需求:下载https://mm.meiji2.com/网站的图片. 所以简单研究了一下爬虫. 在此整理一下结果,一为自己记录,二给后人一些方向. 爬取结果如图:   整体研究周期 2-3 天, ...

  2. UML图学习之三 状态图

    状态图(Statechart Diagram)主要用于描述一个对象在其生存期间的动态行为,表现为一个对象所经历的状态序列,引起状态转移的事件(Event),以及因状态转移而伴随的动作(Action). ...

  3. [one day one question] Vue数组变更不能触发刷新

    问题描述:Vue数组变更不能触发刷新,特别是数组的每个元素都是对象的时候,对象中某个属性的值发生变化,根本无法触发Vue的dom刷新,这怎么破? 解决方案:this.$set(array, index ...

  4. python_7_列表

    什么是列表? --一种数据类型 -- 形式:[值1,值2,[值a,值b],值3]      --可以嵌套 #!/usr/bin/python3 list_a = [1, 2, [3, 'a']] 对于 ...

  5. servlet 监听器分类

    http://blog.csdn.net/cxg200888/article/details/77894842

  6. Asp.net core 2.0.1 Razor 的使用学习笔记(四)

    ASP.net core 2.0.1 中 asp.net identity 2.0.1 的基本使用(三)—用户注册 一.修改用户注册 1.打开Pages文件夹>Account>Regist ...

  7. php与HTML交互问题

    1.将表单中的action属性值设为PHP路径,则网页会跳转到这个网址 <html> <body> <form action="welcome.php" ...

  8. PYTHON3 中的虚假四舍五入:round()

    PYTHON3 中的虚假四舍五入:round() 创建时间: 2017/12/5 17:08 作者: CN_Simo 标签: python基础, round, 四舍五入 一.这不是一个BUG! 在使用 ...

  9. Titanic数据分析

    一.材料准备 https://www.kaggle.com/c/titanic-gettingStarted/ 二.提出问题 生存率和哪些因素有关(性别,年龄,是否有伴侣,票价,舱位等级,包间,出发地 ...

  10. python中的各种转化

    1.数之间的转化 #浮点型to整型 >>> int(5.6) 5 #整型to浮点型 >>> float(5) 5.0 2.数与字符串 #字符串to整型 >&g ...