jQuery學習心得一

1.閉包

每次看到jQuery的時候,首先想到的就是閉包。這是個老生常談的問題了。今天從新回憶了一下閉包。javascript

  • 什麼是閉包? 當有一個函數想要訪問另外一個函數內部的變量,這個是訪問不了的。全部咱們要用閉包來訪問。因此簡單的來講,閉包就是鏈接函數內部和外部的一座橋樑,經過閉包咱們可以訪問其餘函數內部的變量

  1.1做用域

      想了解閉包,首先要知道做用域。最簡單來講:全局變量和局部變量。html

 

  • 全局變量(Global variable):能夠在腳本的任何位置被引用。java

  • 局部變量(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方法遍歷的對象 => 普通對象 | 數組 | 節點app

 

 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呢?this

    由於咱們在遍歷的時候,常常操做的是就是每次循環的value的值,那麼設置this指向value有好處,咱們的代碼寫的更少,回調函數的形參能夠省略不寫spa

  (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;
  
});

 

參考文章:阮一峯的網絡日誌

相關文章
相關標籤/搜索