javaScript基础(六)闭包

闭包的例子

function outer(){

    var localVal = 30;

    return localVal;

 }

outer();//30

//闭包

function outer(){

    var localVal = 30;

    return function(){

        return localVal;

扫描二维码关注公众号,回复: 1675464 查看本文章

     }

 }

var func = outer();

func();//30


闭包-无处不在

!function(){

    var localData = "localData here";

    document.addEventListener('click',function(){

        console.log(localData);

     });

 }();


!function(){

    var localData = "localData here";

    var url = "http://www.baidu.com";

    $.ajax({

        url:url,

        success:function(){

            //todo

            console.log(loaclData);

         }

     });

 }();

闭包-常见错误之循环闭包

//点击div aaa、bbb、ccc显示1、2、3,实际显示都为4,因为i的值最后等于4,点击后所有都是4

document.body.innerHTML="<div id=div1>aaa</div>"

    +"<div id=div2>bbb</div><div id=div3>ccc</div> ";

for(var i = 1;i<4;i++ ){

    document.getElementById('div' + i).

        addEventListener('click',function(){

        alert(i);//all are 4;

     });

 }

//如何显示1,2,3

document.body.innerHTML="<div id=div1>aaa</div>"

    +"<div id=div2>bbb</div><div id=div3>ccc</div> ";

for(var i = 1;i<4;i++ ){

    !function(i){

        document.getElementById('div' + i).

        addEventListener('click',function(){

        alert(i);//all are 4;

         });

     }(i);

 }

闭包-封装

(function(){

    var _userId = 23492;

    var _typeId = 'item';

    var export = 0;


    function converter(userId){

        return +userId;

     }

    export.getUserId = function(){

        return converter(_userId);

     }

    export.getTypeId = function(){

        return _typeId;

     }

    window.export = export;

}());


export.getUserId();//23492

export.getTypeId();//item


export._userId;//undefined

export._typeId;//undefined

export.converter;//undefined

//闭包可以封装私有变量,直接无法访问


闭包的概念

- 在计算机科学中,闭包(也称词法闭包或函数闭包)是指一个函数或函数的引用,与一个引用环境绑定在一起。这个引用环境是一个存储该函数每个非局部变量(也叫自由变量)的表。

- 闭包,不同于一般的函数,它允许一个函数在立即词法作用域外调用时,仍可访问非本地变量。


        优点                               缺点

闭包灵活和方便                      空间浪费

                                           内存泄漏

封装                                     性能消耗


作用域

全局、函数、eval

var a = 10; //全局

(function(){

    var b = 20; //函数作用域

 })();

console.log(a);//10

console.log(b);//error,b in ont defined


for(var item in {a:1,b:2}){ //var item 全局

    console.log(item);//

 }

console.log(item);//item still in scope

eval("var a - 1;"); 

作用域链

function outer2(){

    var local2 = 1;

    function outer1(){

        var local1 = 1;

     }

    outer1();

 }


var global3 = 1;

outer2();


function outer(){

    var I = 1;

    var func = new Function("console.log(typeof i);");

    func();//undefined

利用函数作用域封装

匿名函数,前面加一个!不会被先处理掉 ,函数声明被前置 ,所以被优先处理掉

(function(){

    var a,b;

 })();

!function(){

    var a,b; 

 }();


ES3执行上下文(忽略)可以去网上找找看看呀!



猜你喜欢

转载自blog.csdn.net/jianghai_csdn/article/details/79376514
今日推荐