js溫故而知新4——學習廖雪峰的js教程

genefy 發布于2019-08-21 11:35 / 1581人閱讀

摘要：你可能認為調用，和結果應該是，，，但實際結果是全部都是原因就在于返回的函數引用了變量，但它并非立刻執行。返回閉包時牢記的一點就是返回函數不要引用任何循環變量，或者后續會發生變化的變量。真的是看著很暈那

閉包

另一個需要注意的問題是，返回的函數并沒有立刻執行，而是直到調用了f()才執行。我們來看一個例子：

function count() {
    var arr = [];
    for (var i=1; i<=3; i++) {
        arr.push(function () {
            return i * i;
        });
    }
    return arr;
}

var results = count();
var f1 = results[0];
var f2 = results[1];
var f3 = results[2];

在上面的例子中，每次循環，都創建了一個新的函數，然后，把創建的3個函數都添加到一個Array中返回了。

你可能認為調用f1()，f2()和f3()結果應該是1，4，9，但實際結果是：

f1(); // 16
f2(); // 16
f3(); // 16

全部都是16！原因就在于返回的函數引用了變量i，但它并非立刻執行。等到3個函數都返回時，它們所引用的變量i已經變成了4，因此最終結果為16。

返回閉包時牢記的一點就是：返回函數不要引用任何循環變量，或者后續會發生變化的變量。

如果一定要引用循環變量怎么辦？方法是再創建一個函數，用該函數的參數綁定循環變量當前的值，無論該循環變量后續如何更改，已綁定到函數參數的值不變：

function count() {
    var arr = [];
    for (var i=1; i<=3; i++) {
        arr.push((function (n) {
            return function () {
                return n * n;
            }
        })(i));
    }
    return arr;
}

var results = count();
var f1 = results[0];
var f2 = results[1];
var f3 = results[2];

f1(); // 1
f2(); // 4
f3(); // 9

注意這里用了一個“創建一個匿名函數并立刻執行”的語法：

(function (x) {
    return x * x;
})(3); // 9

理論上講，創建一個匿名函數并立刻執行可以這么寫：

function (x) { return x * x } (3);

但是由于JavaScript語法解析的問題，會報SyntaxError錯誤，因此需要用括號把整個函數定義括起來：

(function (x) { return x * x }) (3);

通常，一個立即執行的匿名函數可以把函數體拆開，一般這么寫：

(function (x) {
    return x * x;
})(3);

ps閉包的繼續學習

待寫。。。。。。（真的是看著很暈那/(ㄒoㄒ)/~~）

云服務器 GPU云服務器廖雪峰的python教程 python教程廖雪峰 python廖雪峰教程廖雪峰python視頻教程

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/86892.html

js溫故而知新8(瀏覽器)——學習廖雪峰的js教程

摘要：對象不但充當全局作用域，而且表示瀏覽器窗口。對象有和屬性，可以獲取瀏覽器窗口的內部寬度和高度。對象表示當前頁面的信息。由于在瀏覽器中以形式表示為樹形結構，對象就是整個樹的根節點。這個行為由瀏覽器實現，主流瀏覽器均支持選項，從開始支持。瀏覽器目前主流的瀏覽器： IE 6~11：從IE10開始支持ES6標準； Chrome：基于Webkit內核，內置了非常強悍的JavaScript引...

charles_paul 2019-08-20 15:07 評論0 收藏0
js溫故而知新2——學習廖雪峰的js教程

摘要：讓我們拆開寫小明正常結果單獨調用函數怎么返回了請注意，我們已經進入到了的一個大坑里。如果單獨調用函數，比如，此時，該函數的指向全局對象，也就是。函數 1. arguments JavaScript還有一個免費贈送的關鍵字arguments，它只在函數內部起作用，并且永遠指向當前函數的調用者傳入的所有參數。arguments類似Array但它不是一個Array： function fo...

Caizhenhao 2019-08-21 11:34 評論0 收藏0
js溫故而知新10(操作表單)——學習廖雪峰的js教程

摘要：用操作表單和操作是類似的，因為表單本身也是樹。因此，第二種方式是響應本身的事件，在提交時作修改可以在此修改的繼續下一步注意要來告訴瀏覽器繼續提交，如果，瀏覽器將不會繼續提交，這種情況通常對應用戶輸入有誤，提示用戶錯誤信息后終止提交。用JavaScript操作表單和操作DOM是類似的，因為表單本身也是DOM樹。 HTML表單的輸入控件主要有以下幾種：文本框，對應的，用于輸入文本； ...

simon_chen 2019-08-20 15:08 評論0 收藏0
js溫故而知新9(操作DOM)——學習廖雪峰的js教程

摘要：根節點已經自動綁定為全局變量。如果寫入的字符串是通過網絡拿到了，要注意對字符編碼來避免攻擊。修改也是經常需要的操作。當你遍歷一個父節點的子節點并進行刪除操作時，要注意，屬性是一個只讀屬性，并且它在子節點變化時會實時更新。 1.操作DOM 操作一個DOM節點實際上就是這么幾個操作：更新、遍歷、添加、刪除。由于ID在HTML文檔中是唯一的，所以document.getElementByI...

Alfred 2019-08-20 15:08 評論0 收藏0
js溫故而知新11(AJAX)——學習廖雪峰的js教程

摘要：在回調函數中，通常我們只需通過判斷請求是否完成，如果已完成，再根據判斷是否是一個成功的響應。因此我們需要首先在頁面中準備好回調函數當前價格最后用函數觸發表示本域，也就是瀏覽器當前頁面的域。 Asynchronous JavaScript and XML，意思就是用JavaScript執行異步網絡請求。如果仔細觀察一個Form的提交，你就會發現，一旦用戶點擊Submit按鈕，表單開始提...

kun_jian 2019-08-20 16:45 評論0 收藏0