闭包

来源：互联网发布：负离子吹风机知乎编辑：程序博客网时间：2024/05/18 03:21

*比如我们通过js构建一个商品对象，初始化传入商品ID。
该对象里面有个方法，该方法假设要通过『有逼格』的计算才能获获取商品名称*

<script type="text/javascript">    var product = function(id){        var prodID = id;        this.prodName = "药品"; //这个属性外部可以访问        function loadProd(){ //这个方法不希望外部访问            //假设这个过程需要复杂的计算            if (prodID == 1) {                this.prodName = "霸王油";            }else if (prodID == 2) {                this.prodName = "老鼠药";            }        }    }    var p1 = new product(1);    alert(p1.prodName); //打印:药品</script>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

并没有获取到我们认为的『霸王油』，这是因为实例化后的p1并不能调用loadProd这个方法。

2.所以我们只能在内部调用

var product = function(id){        var prodID = id;        this.prodName = "药品"; //这个属性外部可以访问        function loadProd(){ //这个方法不希望外部访问            //假设这个过程需要复杂的计算            if (prodID == 1) {                this.prodName = "霸王油";            }else if (prodID == 2) {                this.prodName = "老鼠药";            }        }        loadProd(); //内部调用啦    }    var p1 = new product(1);    alert(p1.prodName); //打印:药品1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

上面代码还是弹出『药品』，这是因为loadProd()函数内部的this并不是我们传入的。
优化：

var product = function(id){        var prodID = id;        this.prodName = "药品"; //这个属性外部可以访问        function loadProd(oo){ //这个方法不希望外部访问            //假设这个过程需要复杂的计算            if (prodID == 1) {                oo.prodName = "霸王油";            }else if (prodID == 2) {                oo.prodName = "老鼠药";            }        }        loadProd(this); //传入this    }    var p1 = new product(1);    alert(p1.prodName); //打印:霸王油    var p2 = new product(2);    alert(p2.prodName); //打印:老鼠药1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

3.闭包的写法

    var product = function(id){        var prodID = id;        var prodName = "药品";         function loadProd(){ //这个方法不希望外部访问            //假设这个过程需要复杂的计算            if (prodID == 1) {                prodName = "霸王油";            }else if (prodID == 2) {                prodName = "老鼠药";            }            return prodName; // 返回私有变量        }        return loadProd; //返回函数本身    }    var p1 = new product(1);    alert(p1()); //p1() 就是执行了loadProd()，结果打印：霸王油1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

再次优化：

    var product = function(id){        var prodID = id;        var prodName = "药品";         return function loadProd(){ //这个方法不希望外部访问            //假设这个过程需要复杂的计算            if (prodID == 1) {                prodName = "霸王油";            }else if (prodID == 2) {                prodName = "老鼠药";            }            return prodName; // 返回私有变量        }    }    var p1 = new product(1);    alert(p1()); //结果打印：霸王油1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

简单总结：
1.内部function访问了外部变量
2.内部函数维持了外部函数（对象）的数据
3.闭包本身是为了简化代码、减少过多的人工细节参与

<script type="text/javascript">    var product = function(id){        var prodID = id;        var prodName = "药品";         return function loadProd(){ //这个方法不希望外部访问            //假设这个过程需要复杂的计算            if (prodID == 1) {                prodName = prodName + "霸王油"; // 内部函数也可以使用外部函数的数据            }else if (prodID == 2) {                prodName = prodName +"老鼠药";            }            return prodName; // 返回私有变量        }    }    var p1 = new product(1);    alert(p1()); //结果打印：药品霸王油</script>

0 0