js中闭包的解释以及变量声明提前的例子（代码）

程序员文章站 2022-03-20 23:16:16

...

本篇文章给大家带来的内容是关于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();