js中閉包的解釋以及變數宣告提前的例子（程式碼）-js教程-PHP中文網

js中閉包的解釋以及變數宣告提前的例子（程式碼）

不言

發布： 2018-08-15 16:28:18

原創

1646 人瀏覽過

這篇文章帶給大家的內容是關於js中閉包的解釋以及變數宣告提前的例子（程式碼），有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

閉包

在函數A中宣告了函數B,函數B中使用了函數A的作用域中的變數,且函數A返回(return)了函數B,那麼函數B就對函數A的作用域形成了閉包,函數A調用完畢之後,只要返回的函數B存在,函數A的作用域也一直存在

function makeFn(){
        var n1 = 100;
        function fn(){
            var n2 = 200;
            console.log(n1);
        }
        return fn;
    }
    var f2 = makeFn();
    f2();

登入後複製

閉包可以實現物件的私有屬性,如:

var obj = {
        name:"sunset",
        age:12,
        speak:function(){
            console.log("我是"+this.name);
        }
    }
    console.log(obj.name);

登入後複製

再來一個範例:

function makeObj(){
        var name = "sunset";
        var age = 12;
        var obj = {
            speak:function(){
                console.log("我叫"+name);
            }
        }
        return obj;
    }
    console.log(obj.speak());

登入後複製

最後一個非常好的範例:(導入jQuery後執行看看)

<script>
    for (var i = 0; i < 10; i++) {
        function makeFn(index) {
            function fn() {
                console.log(index)
            }
            return fn;
        }
        var btn = makeFn(i);
        $("<button></button>")
        .text(i + 1)
        .appendTo(document.body)
        .on("click",btn)
    }
</script>

登入後複製

變數宣告提前:

在js的作用域中,所有變數的宣告都會被提前,但是賦值不會提前(變數提前就不示範了,學到這已經不用解釋了)

var a = 3;
    function f1(){
       console.log(a);
       var a = 10;
    }
 
f1();

登入後複製

等同於

function f1(){
        var a;
        console.log(a);
        a = 10;
    }
f1();

登入後複製