jQuery学习心得一

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(); // 0
　　nAdd();
　　result(); // 1

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;
　　

});

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

posted on 2018-02-27 18:35 seanlxj 阅读(1375) 评论(0) 编辑收藏举报

刷新页面返回顶部

前端之癫

导航

公告