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;
　　

});

 

參考文章：阮一峰的網絡日志