收藏本站 收藏本站
積木網首頁 - 軟件測試 - 常用手冊 - 站長工具 - 技術社區
首頁 > JavaScript > JS基礎入門 > 正文

首頁 - PHP - 數據庫 - 操作系統 - 游戲開發 - JS - Android - MySql - Redis - MongoDB - Win8 - Shell編程 - DOS命令 - jQuery - CSS樣式 - Python - Perl

Access - Oracle - DB2 - SQLServer - MsSql2008 - MsSql2005 - Sqlite - PostgreSQL - node.js - extjs - JavaScript vbs - Powershell - Ruby

深入解析JavaScript的閉包機制

JavaScript 變量可以是局部變量或全局變量。
私有變量可以用到閉包。
全局變量
函數可以訪問是有函數內部定義的變量,如:
實例

function myFunction() {
  var a = 4;
  return a * a;
}


函數也可以訪問函數外部定義的變量,如:
實例

var a = 4;
function myFunction() {
  return a * a;
}

后面一個實例中, a 是一個 全局 變量。
在web頁面中全局變量屬于 window 對象。
全局變量可應用于頁面上的所有腳本。
在第一個實例中, a 是一個 局部 變量。
局部變量只能用于定義它函數內部。對于其他的函數或腳本代碼是不可用的。
全局和局部變量即便名稱相同,它們也是兩個不同的變量。修改其中一個,不會影響另一個的值。
Note
變量聲明是如果不使用 var 關鍵字,那么它就是一個全局變量,即便它在函數內定義。

變量生命周期
全局變量的作用域是全局性的,即在整個JavaScript程序中,全局變量處處都在。
而在函數內部聲明的變量,只在函數內部起作用。這些變量是局部變量,作用域是局部性的;函數的參數也是局部性的,只在函數內部起作用。
計數器困境
設想下如果你想統計一些數值,且該計數器在所有函數中都是可用的。
你可以使用全局變量,函數設置計數器遞增:
實例

var counter = 0;

function add() {
  counter += 1;
}

add();
add();
add();

// 計數器現在為 3

計數器數值在執行 add() 函數時發生變化。
但問題來了,頁面上的任何腳本都能改變計數器,即便沒有調用 add() 函數。
如果我在函數內聲明計數器,如果沒有調用函數將無法修改計數器的值:
實例

function add() {
  var counter = 0;
  counter += 1;
}

add();
add();
add();

// 本意是想輸出 3, 但事與愿違,輸出的都是 1 !

以上代碼將無法正確輸出,每次我調用 add() 函數,計數器都會設置為 1。
JavaScript 內嵌函數可以解決該問題。
JavaScript 內嵌函數
所有函數都能訪問全局變量。
實際上,在 JavaScript 中,所有函數都能訪問它們上一層的作用域。
JavaScript 支持嵌套函數。嵌套函數可以訪問上一層的函數變量。
該實例中,內嵌函數 plus() 可以訪問父函數的 counter 變量:
實例

function add() {
  var counter = 0;
  function plus() {counter += 1;}
  plus();  
  return counter; 
}

如果我們能在外部訪問 plus() 函數,這樣就能解決計數器的困境。
我們同樣需要確保 counter = 0 只執行一次。
我們需要閉包。
JavaScript 閉包
還記得函數自我調用嗎?該函數會做什么?
實例

var add = (function () {
  var counter = 0;
  return function () {return counter += 1;}
})();

add();
add();
add();

// 計數器為 3

實例解析
變量 add 指定了函數自我調用的返回字值。
自我調用函數只執行一次。設置計數器為 0。并返回函數表達式。
add變量可以作為一個函數使用。非常棒的部分是它可以訪問函數上一層作用域的計數器。
這個叫作 JavaScript 閉包。它使得函數擁有私有變量變成可能。
計數器受匿名函數的作用域保護,只能通過 add 方法修改。

Note
閉包是可訪問上一層函數作用域里變量的函數,即便上一層函數已經關閉。

JavaScript函數的調用以及參數傳遞
JavaScript函數調用JavaScript函數有4種調用方式。每種方式的不同方式在于this的初始化。this關鍵字一般而言,在Javascript中,this指向函數執行時的當前對象

詳解JavaScript操作HTML DOM的基本方式
通過HTMLDOM,可訪問JavaScriptHTML文檔的所有元素。HTMLDOM(文檔對象模型)當網頁被加載時,瀏覽器會創建頁面的文檔對象模型(DocumentObjectModel)。HTMLDOM模型

JavaScript對HTML DOM使用EventListener進行操作
addEventListener()方法實例點用戶點擊按鈕時觸發監聽事件:document.getElementById("myBtn").addEventListener("click",displayDate);addEventListener()方法用于向指定元素添加事

本周排行

更新排行

強悍的草根IT技術社區,這里應該有您想要的! 友情鏈接:b2b電子商務
Copyright © 2010 Gimoo.Net. All Rights Rreserved  京ICP備05050695號
手游棋牌游戏运营
经网新时时杀号 河北时时推荐号码 网赌AG是如何作假的 pk10app做号 胆码图 云南时时官网平台 十二生肖走势图 冠亚大小什么意思 秒速时时选开奖网 win007足球即时比分 ag不同平台有时间差吗 澳洲5分彩 开奖 好彩客彩票官方下载 星空娱乐游戏 棋牌二人麻将 500元 倍投方案 稳赚