詳談JavaScript函數閉包使用及注意事項程式碼詳解-js教程-PHP中文網

首頁

web前端

js教程

詳談JavaScript函數閉包使用及注意事項程式碼詳解

伊谢尔伦

Jul 25, 2017 pm 03:04 PM

javascript js 注意事項

閉包的英文單字是closure，這是JavaScript中非常重要的一部分知識，因為使用閉包可以大大減少我們的程式碼量，使我們的程式碼看起來更加清晰等等，總之功能十分強大。

閉包的意思：閉包說白了就是函數的嵌套，內層的函數可以使用外層函數的所有變量，即使外層函數已經執行完畢（這點涉及JavaScript作用域鏈）。

範例一

function checkClosure(){
    var str = &#39;rain-man&#39;;
    setTimeout(
        function(){ alert(str); } //这是一个匿名函数
    , 2000);
}
checkClosure();

登入後複製

這個範例看起來十分的簡單，仔細分析下它的執行過程還是有許多知識點的：checkClosure函數的執行是瞬間的（也許用時只是0.00001毫秒），在checkClosure的函數體內創建了一個變數str，在checkClosure執行完畢之後str並沒有被釋放，這是因為setTimeout內的匿名函數存在這對str的引用。待到2秒後函數體內的匿名函數被執行完畢,str才被釋放。

範例二，最佳化程式碼

function forTimeout(x, y){
    alert(x + y);
}
function delay(x , y  , time){
    setTimeout(&#39;forTimeout(&#39; +  x + &#39;,&#39; +  y + &#39;)&#39; , time);    
}
/**
 * 上面的delay函数十分难以阅读，也不容易编写，但如果使用闭包就可以让代码更加清晰
 * function delay(x , y , time){
 *     setTimeout(
 *         function(){
 *             forTimeout(x , y) 
 *         }          
 *     , time);   
 * }
 */

登入後複製

匿名函數最大的用途是建立閉包（這是JavaScript語言的特性之一），也可以建立命名空間，以減少全域變數的使用。

範例三：

var oEvent = {};
(function(){ 
    var addEvent = function(){ /*代码的实现省略了*/ };
    function removeEvent(){}
    oEvent.addEvent = addEvent;
    oEvent.removeEvent = removeEvent;
})();

登入後複製

範例四：

var rainman = (function(x , y){
    return x + y;
})(2 , 3);
/**
 * 也可以写成下面的形式，因为第一个括号只是帮助我们阅读，但是不推荐使用下面这种书写格式。
 * var rainman = function(x , y){
 *    return x + y;
 * }(2 , 3);
 */

登入後複製

在這裡我們建立了一個變數rainman，並透過直接呼叫匿名函數初始化為5，這種小技巧有時十分實用。

範例五：

var outer = null;
(function(){
    var one = 1;
    function inner (){
        one += 1;
        alert(one);
    }
    outer = inner;
})();
outer();    //2
outer();    //3
outer();    //4

登入後複製

這段程式碼中的變數one是一個局部變數（因為它被定義在一個函數之內），因此外部是不可以存取的。但這裡我們建立了inner函數，inner函數是可以存取變數one的；又將全域變數outer引用了inner，所以三次呼叫outer會彈出遞增的結果。

注意：閉包允許內層函數引用父函數中的變量，但是該變量是最終值

示例六：

/**
 * <body>
 * <ul>
 *     <li>one</li>
 *     <li>two</li>
 *     <li>three</li>
 *     <li>one</li>
 * </ul>
 */
var lists = document.getElementsByTagName(&#39;li&#39;);
for(var i = 0 , len = lists.length ; i < len ; i++){
    lists[ i ].onmouseover = function(){
        alert(i);    
    };
}

登入後複製

你會發現當滑鼠移過每一個

解決方法一：

var lists = document.getElementsByTagName(&#39;li&#39;);
for(var i = 0 , len = lists.length ; i < len ; i++){
    (function(index){
        lists[ index ].onmouseover = function(){
            alert(index);    
        };                    
    })(i);
}

登入後複製

解決方法二：

var lists = document.getElementsByTagName(&#39;li&#39;);
for(var i = 0, len = lists.length; i < len; i++){
    lists[ i ].$$index = i;    //通过在Dom元素上绑定$$index属性记录下标
    lists[ i ].onmouseover = function(){
        alert(this.$$index);    
    };
}

登入後複製

解決方法三：

function eventListener(list, index){
    list.onmouseover = function(){
        alert(index);
    };
}
var lists = document.getElementsByTagName(&#39;li&#39;);
for(var i = 0 , len = lists.length ; i < len ; i++){
    eventListener(lists[ i ] , i);
}

登入後複製

以上是詳談JavaScript函數閉包使用及注意事項程式碼詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

熱工具

熱門話題

gmail信箱登陸入口在哪裡

7825

Java教學

1648

CakePHP 教程

1402

Laravel 教程

1300

PHP教程

1239

Related knowledge

建議：優秀JS開源人臉偵測辨識項目 Apr 03, 2024 am 11:55 AM

人臉偵測辨識技術已經是一個比較成熟且應用廣泛的技術。而目前最廣泛的網路應用語言非JS莫屬，在Web前端實現人臉偵測辨識相比後端的人臉辨識有優勢也有弱勢。優點包括減少網路互動、即時識別，大大縮短了使用者等待時間，提高了使用者體驗；弱勢是：受到模型大小限制，其中準確率也有限。如何在web端使用js實現人臉偵測呢？為了實現Web端人臉識別，需要熟悉相關的程式語言和技術，如JavaScript、HTML、CSS、WebRTC等。同時也需要掌握相關的電腦視覺和人工智慧技術。值得注意的是，由於Web端的計

鳴潮測試期間注意事項介紹 Mar 13, 2024 pm 08:13 PM

在鳴潮測試期間，請避免進行系統升級、恢復原廠設定和換件等操作，以防資訊遺失導致遊戲登入異常。特別提醒，測試期間暫無申訴通道，請務必小心處理。鳴潮測試期間注意事項介紹答：不要升級系統、還原出廠設定、更換設備組件等。注意事項介紹：1、請在測試期間內謹慎升級系統避免資訊遺失。 2.若進行系統更新，可能產生無法登陸遊戲的問題。 3.在此階段，申訴通道暫未開啟，敬請玩家酌情選擇是否進行升級。 4.同時，一個遊戲帳號只能與一部安卓設備及一台PC搭配使用。 5.建議您等待測試結束後再行升級手機系統或還原原廠設定、更換設

第一次抖音開直播怎麼弄？第一次直播要注意什麼？ Mar 22, 2024 pm 04:10 PM

隨著短視頻平台的興起，抖音已成為許多人日常生活中不可或缺的一部分。而在抖音上開直播，與粉絲互動，更是許多用戶夢寐以求的事。那麼，第一次抖音開直播怎麼弄呢？一、第一次抖音開直播怎麼弄？ 1.準備工作要開始直播，首先需要確保您的抖音帳號已經完成實名認證。您可以在抖音APP中的「我」->「設定」->「帳號與安全」中找到實名認證教學。完成實名認證後，您就可以滿足直播條件，開始在抖音平台進行直播了。 2.申請直播權限在滿足直播條件後，您需要申請直播權限。開啟抖音APP，點選「我」->「創作者中心」->「直

在沒有網路的情況下安裝pip的步驟和注意事項 Jan 18, 2024 am 10:02 AM

離線環境下安裝pip的方法及注意事項在網路不通暢的離線環境中，安裝pip成為一項挑戰。在本文中，將介紹幾種離線環境下安裝pip的方法，並提供具體的程式碼範例。方法一：使用離線安裝包在可以連接網路的環境中，使用以下指令從官方來源下載pip安裝包：pipdownloadpip此指令將會自動從官方來源下載pip及其依賴的包，並儲存在目前目錄下。將下載的壓縮包移到離

利用localstorage儲存資料的步驟和注意事項 Jan 11, 2024 pm 04:51 PM

利用localStorage儲存資料的步驟和注意事項本文主要介紹如何使用localStorage來儲存數據，並提供相關的程式碼範例。 LocalStorage是一種在瀏覽器中儲存資料的方式，它可以將資料保存在使用者的本機電腦上，而不需要透過伺服器。以下是使用localStorage儲存資料的步驟和需要注意的事項。步驟一：偵測瀏覽器是否支援LocalStorage

簡易JavaScript教學：取得HTTP狀態碼的方法 Jan 05, 2024 pm 06:08 PM

JavaScript教學：如何取得HTTP狀態碼，需要具體程式碼範例前言：在Web開發中，經常會涉及到與伺服器進行資料互動的場景。在與伺服器進行通訊時，我們經常需要取得傳回的HTTP狀態碼來判斷操作是否成功，並根據不同的狀態碼來進行對應的處理。本篇文章將教你如何使用JavaScript來取得HTTP狀態碼，並提供一些實用的程式碼範例。使用XMLHttpRequest

js和vue的關係 Mar 11, 2024 pm 05:21 PM

js和vue的關係：1、JS作為Web開發基石；2、Vue.js作為前端框架的崛起；3、JS與Vue的互補關係；4、JS與Vue的實踐應用。

如何在JavaScript中取得HTTP狀態碼的簡單方法 Jan 05, 2024 pm 01:37 PM

JavaScript中的HTTP狀態碼取得方法簡介：在進行前端開發中，我們常常需要處理與後端介面的交互，而HTTP狀態碼就是其中非常重要的一部分。了解並取得HTTP狀態碼有助於我們更好地處理介面傳回的資料。本文將介紹使用JavaScript取得HTTP狀態碼的方法，並提供具體程式碼範例。一、什麼是HTTP狀態碼HTTP狀態碼是指當瀏覽器向伺服器發起請求時，服務

See all articles

詳談JavaScript函數閉包使用及注意事項程式碼詳解

熱AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

熱門文章

熱工具

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題