【JS基礎】作用域和閉包

SolomonXie 發布于2019-08-23 14:09 / 2354人閱讀

摘要：變量提升的理解語言的執行規則先定義，后執行變量定義函數聲明就屬于定義代碼的范疇注意函數聲明和函數表達式的區別說明幾種不同的使用場景要在執行時才能確認值，定義時無法確認全局環境下的對象方法中的構造函數中的事件函數中的觸發當前事件的對象中的創建

變量提升的理解

js語言的執行規則：先定義，后執行
變量定義、函數聲明就屬于定義代碼的范疇（注意“函數聲明”和“函數表達式”的區別）

說明this幾種不同的使用場景

this 要在執行時才能確認值，定義時無法確認

var a = {
    name: "A",
    fn: function () {
        console.log(this.name);
    }
};
a.fn(); // this === a
a.fn.call({name: "B"}); // this === {name: "B"}
var fn1 = a.fn;
fn1(); // this === window

全局環境下的this

function fn() {
    console.log(this); // this === window
}
fn();

對象方法中的this

var obj = {
    name: "A",
    printName: function () {
        console.log(this.name); // this === obj
    }
};
obj.printName();

構造函數中的this

function Foo(name) {
    this.name = name; // this === f
}
var f = new Foo("can");

事件函數中的this

document.getElementById("div1").onclick = function () {
    console.log(this); // this === div1 觸發當前事件的Element對象
};

call apply bind 中的this

function fn1(name, age) {
    console.log(name, age);
    console.log(this); // this === {x:100}
}

fn1.call({x: 100}, "can", 22);
fn1.apply({x: 100}, ["can", 22]);

var fn2 = function (name, age) {
    console.log(name, age);
    console.log(this); // this === {y:200}
}.bind({y: 200});
fn2("can", 22);

創建10個a標簽，點擊的時候彈出來對應的序號

for (var i = 0; i < 10; i++) {
    (function (i) {
        // 函數作用域
        var a = document.createElement("a");
        a.innerHTML = i + "
";
        a.addEventListener("click", function (e) {
            e.preventDefault();
            alert(i); // i 是自由變量，去父作用域尋找
        });
        document.body.appendChild(a);
    })(i);
}

作用域

ES5中，無塊級作用域

if (true) {
    var name = "can";
}
console.log(name); // "can"

函數和全局作用域

var b = 1;
function fn3() {
    var b = 2;
    console.log("fn", b); // 2
}
console.log("global", b); // 1
fn3();

自由變量

var a = 100;
function fn4() {
    var b = 200;
    // 當前作用域沒有定義的變量，即“自由變量”
    console.log(a); // 100  a 是自由變量，去父作用域尋找
    console.log(b); // 200
}
fn4();

一個函數的父級作用域，是它定義時的父級作用域，而不是執行時

作用域鏈，即自由變量的查找

var a = 100;
function fn5() {
    var b = 200;
    function fn6() {
        var c = 300;
        console.log(a); // 100  a 是自由變量，去父作用域尋找
        console.log(b); // 200  b 是自由變量，去父作用域尋找
        console.log(c); // 300
    }
    fn6();
}
fn5();

閉包的使用場景

1.函數作為返回值

function fn1() {
    var a = 100;
    // 返回一個函數（函數作為返回值）
    return function () {
        console.log(a); // a是自由變量，去父作用域尋找
    }
}

// f1 得到一個函數
var f1 = fn1();
var a = 200;
f1(); // 100

2.函數作為參數傳遞

function fn1() {
    var a = 100;
    // 返回一個函數（函數作為返回值）
    return function () {
        console.log(a); // a是自由變量，去父作用域尋找
    }
}

// f1 得到一個函數
var f1 = fn1();

function fn2(fn) {
    var a = 200;
    fn();
}

fn2(f1); // 100

實際開發中閉包的應用

閉包實際應用中主要用于封裝變量，收斂權限

function isFirstLoad() {
    var list = [];
    return function (id) {
        if (list.indexOf(id) > -1) {
            return false;
        } else {
            list.push(id);
            return true;
        }
    }
}
// 在 isFirstLoad 函數外面，不可能修改到 list 的值
var firstLoad = isFirstLoad();
firstLoad(10); // true
firstLoad(10); // false
firstLoad(20); // true

GPU云服務器云服務器 js作用域和上下文 js閉包 js閉包的理解 js面試閉包如何回答

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

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

javascript作用域和閉包之我見

摘要：查詢是在作用域鏈中，一級級的往上查找該變量的引用。作用域和作用域鏈作用域的概念，應該兩張圖幾句話就能解釋吧。這個建筑代表程序中的嵌套作用域鏈。一層嵌一層的作用域形成了作用域鏈，變量在作用域鏈中的函數內得到了自己的定義。 javascript作用域和閉包之我見看了《你不知道的JavaScript(上卷)》的第一部分——作用域和閉包，感受頗深，遂寫一篇讀書筆記加深印象。路過的大牛歡迎指點...

SoapEye 2019-08-20 14:51 評論0 收藏0
Js基礎知識（三） - 作用域與閉包

摘要：是詞法作用域工作模式。使用可以將變量綁定在所在的任意作用域中通常是內部，也就是說為其聲明的變量隱式的劫持了所在的塊級作用域。作用域與閉包如何用js創建10個button標簽，點擊每個按鈕時打印按鈕對應的序號？看到上述問題，如果你能看出來這個問題實質上是考對作用域的理解，那么恭喜你，這篇文章你可以不用看了，說明你對作用域已經理解的很透徹了，但是如果你看不出來這是一道考作用域的題目，...

lemanli 2019-08-30 13:53 評論0 收藏0
Js基礎知識（三） - 作用域與閉包

摘要：是詞法作用域工作模式。使用可以將變量綁定在所在的任意作用域中通常是內部，也就是說為其聲明的變量隱式的劫持了所在的塊級作用域。作用域與閉包如何用js創建10個button標簽，點擊每個按鈕時打印按鈕對應的序號？看到上述問題，如果你能看出來這個問題實質上是考對作用域的理解，那么恭喜你，這篇文章你可以不用看了，說明你對作用域已經理解的很透徹了，但是如果你看不出來這是一道考作用域的題目，...

XFLY 2019-08-26 11:35 評論0 收藏0
Js基礎知識（三） - 作用域與閉包

摘要：是詞法作用域工作模式。使用可以將變量綁定在所在的任意作用域中通常是內部，也就是說為其聲明的變量隱式的劫持了所在的塊級作用域。作用域與閉包如何用js創建10個button標簽，點擊每個按鈕時打印按鈕對應的序號？看到上述問題，如果你能看出來這個問題實質上是考對作用域的理解，那么恭喜你，這篇文章你可以不用看了，說明你對作用域已經理解的很透徹了，但是如果你看不出來這是一道考作用域的題目，...

tanglijun 2019-08-01 18:30 評論0 收藏0