JavaScript闭包的例子

关于JavaScript闭包的例子

闭包： 这个定义解释起来比较费劲, 但看定义很可能被绕晕，网上有很多大牛的解释， 在csdn, 知乎上摘抄大牛的说法吧。 有人说， 你能给不懂js 得人用一句话解释明白闭包是什么， 那你就是大牛中的极品…

定义 1:
JavaScript中的闭包，无非就是变量解析的过程。

(function(){
    var hello="hello,world";
    function welcome(hi){
        alert(hi);        //解析到作用域链的第一个对象的属性
        alert(hello);    //解析到作用域链的第二个对象的属性
    }
    welcome("It's easy");
})();
/*这个例子可以认为是自执行函数*/

: 定义 2:
JavaScript中的函数运行在它们被定义的作用域里，而不是它们被执行的作用域里。

var foo = function(){
    var name = "exe";
    return function inner(){
        console.log( name );
    }
}
var bar = foo();//这里虽然得到的是函数inner的引用，而不是那一坨代码
bar();//这里开始执行inner函数，回头看看上面那句话
/*这个闭包是不是感觉在外部作用域竟然访问到了内部函数*/

: 定义 3:
就是一种允许函数向关联的父级作用域寻址的访问特权。

我感觉,
1. 闭包是个函数(在Chrome F12 debugger, 看”source” 最右边, 它运行时, 会把闭包给显示出来, 展开看, 就是函数);
2. 闭包, 主要外在表现为 一个函数包住了另一个函数;

看这三个代码有啥区别:
一:

var n = 100;
function foo(){
    alert(n);
}
foo(); // ->100

二:

function foo(){
    var n = 100;
}
alert(n); // error

三:

function foo(){
    n = 100;
}
foo();
alert(n); // ->100

从以上代码可以看出:

1. 变量声明的方式 var/ 不带var 是有区别的, 不带var 的变量是全局变量
2. 一般来说外部作用域是不能访问内部作用域的
3. 内部作用域可以访问顺着作用域链, 访问到父作用域的变量

---

闭包的作用

1. 匿名自执行函数
   <因为 不加var 的 function () 会绑定在全局对象的属性上 , 这个匿名函数可以立即执行, 执行完会被立即释放, 好处不会污染全局对象> 参照第一个例子

2. 缓存

3. 封装

(function () {
    var a = 10;
    var b = 20;

    function add(v1, v2) {
        var v1 = !!v1 ? v1 : a;
        var v2 = !!v2 ? v2 : b;
        return v1 + v2;
    }
    window.add = add;
})();
add(1, 2);

1. 实现面向对象中的对象
   到这个在线编辑看看 typeScript 怎么实现 class的概念的
   http://www.typescriptlang.org/play/index.html
   

另外几个闭包

    <button id="btn1">Button 1</button>
    <button id="btn2">Button 2</button>
    <button id="btn3">Button 3</button>

使用for 循环, 让点击按钮弹出对应的button内容
有同学可能认为这么写

for (var i = 1; i <= 3; i++) {
    document.getElementById("btn" + i).onclick = function() {
        alert("This is button: " + i);
    };
}

结果呢: alert出的都是最后一个的内容，4
为什么是4:
这个和js代码的编译-> 运行 有关;

1. 编译 在编译的时候, 确定了作用域

2. 引擎加载执行编译后的代码, 执行代码时候 会产生 执行上下文/变量对象/this指向谁/作用域链

这个for 循环绑定在全局对象上, 在加载执行完成后(点击事件前), 浏览器把for已经跑完了, 你再去点击button , 此时i 已经是4了, 然后就蹦出来了4;

有人会问: 那你的for 跑完了, 我的点击事件怎么还进for循环里的alert了?

答案: 这是事件绑定机制, 简单理解成回调或者叫钩子, 在监听着这个事件呢. 这和nodeJs 的某些思想是相同的.

---

写法2:

for (var i = 1; i <= 3; i++) {
    document.getElementById("btn" + i).onclick = function(i) {
        alert("This is button: " + i);
    }.bind(null, i);
}

利用bind 机制

---

写法3:

for (var i = 1; i <= 3; i++) {
    document.getElementById("btn" + i).onclick = (function(i) {
        return function() {
        alert("This is button: " + i);
        }
    })(i);
}

闭包思想 <请思考这里谁是闭包?>

---

ECMA 6 写法4:

 for(let i = 1; i <= 3; i++){
    document.getElementById("btn" + i).onclick = function() {
        alert("This is button: " + i);
    };
 }

let 的特殊用法: let 在for 循环中只是在 block 内可见, 相当于内部的, 而var 却在整个函数中可见

写法5:

var list = document.getElementsByTagName('button');
for (var i = 0; i <= list.length; i++) {
    (function(i){  
        list[i].onclick = function() { 
            alert(i);  
        }
    })(i);
}