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;
});
參考文章:阮一峯的網絡日誌