程序博客网 > 美利达怎么样知乎

转载--javaScript函数嵌套

来源：互联网 发布：美利达怎么样知乎 编辑：程序博客网 时间：2024/05/16 18:19

原地址：http://blog.csdn.net/haitaohe/article/details/17380155

1. 在Javascript中，函数中可以嵌套其他函数。例如：

[javascript] view plain copy
print?
  1. function distance(x1, y1, x2, y2) {  
  2.     function square (x) {  
  3.         return x * x;  
  4.     }  
  5.       
  6.     return Math.sqrt(square(x1 - x2) + square(y1 - y2));  
  7. }  
  8.   
  9. var result = distance(0, 0, 3, 4);  
  10. console.log(result); // 5  
function distance(x1, y1, x2, y2) {    function square (x) {        return x * x;    }    return Math.sqrt(square(x1 - x2) + square(y1 - y2));}var result = distance(0, 0, 3, 4);console.log(result); // 5

在上述代码中，函数square中嵌套定义在函数distance中。square只能在distance中被调用。如果试图在distance的外面调用square，将会出错。

2. 如果嵌套函数使用了外面函数的变量或者参数，那么这个嵌套函数就形成了一个闭包（Closure）。

2.1 闭包能在它外面的函数执行完之后仍然能够访问他外面函数的参数和变量。例如：

[javascript] view plain copy
print?
  1. function sayGreeting(greeting) {  
  2.     var prefix = “my friend ”;  
  3.       
  4.     return function sayGreetingTo(name) {  
  5.         return greeting + “, ” + prefix + name;  
  6.     }  
  7. }  
  8.   
  9. var sayHi = sayGreeting(“Hi”);  
  10. var sayHiToHarry = sayHi(“Harry”);   
  11. console.log(sayHiToHarry); // Hi, my friend Harry  
  12.   
  13. var sayHello = sayGreeting(“Hello”);  
  14. var sayHelloToPeter = sayHello(“Peter”);   
  15. console.log(sayHelloToPeter); // Hello, my friend Peter  
function sayGreeting(greeting) {    var prefix = "my friend ";    return function sayGreetingTo(name) {        return greeting + ", " + prefix + name;    }}var sayHi = sayGreeting("Hi");var sayHiToHarry = sayHi("Harry"); console.log(sayHiToHarry); // Hi, my friend Harryvar sayHello = sayGreeting("Hello");var sayHelloToPeter = sayHello("Peter"); console.log(sayHelloToPeter); // Hello, my friend Peter

在上述代码中，我们用参数”Hi”或者”Hello”调用函数sayGreeting，在函数sayGreeting结束之后，在闭包sayGreetingTo中仍然能够访问参数greeting和变量prefix。

2.2 闭包中包含指向外面函数的引用。例如：

[javascript] view plain copy
print?
  1. function counter (initialValue) {  
  2.     var privateValue = initialValue;  
  3.       
  4.     function changeBy(delta) {  
  5.         privateValue += delta;  
  6.     }  
  7.       
  8.     return {  
  9.         increament: function() {  
  10.             changeBy(1);  
  11.         },  
  12.         decreament: function() {  
  13.             changeBy(-1);  
  14.         },  
  15.         getValue: function() {  
  16.             return privateValue;  
  17.         }  
  18.     }  
  19. }  
  20.   
  21. var counter1 = counter(5);  
  22. var counter2 = counter(5);  
  23.   
  24. counter1.increament();  
  25. counter1.increament();  
  26. console.log(counter1.getValue()); // 7  
  27.   
  28. counter1.decreament();  
  29. console.log(counter1.getValue()); // 6  
  30.   
  31. console.log(counter2.getValue()); // 5  
function counter (initialValue) {    var privateValue = initialValue;    function changeBy(delta) {        privateValue += delta;    }    return {        increament: function() {            changeBy(1);        },        decreament: function() {            changeBy(-1);        },        getValue: function() {            return privateValue;        }    }}var counter1 = counter(5);var counter2 = counter(5);counter1.increament();counter1.increament();console.log(counter1.getValue()); // 7counter1.decreament();console.log(counter1.getValue()); // 6console.log(counter2.getValue()); // 5
在上面的代码中，3个闭包函数increament、decreament和getValue都嵌套在函数counter里面，都能访问定义在counter里的其他函数以及变量。定义在外面函数中的变量(privateValue)的值能在调用之后得以保存。因此两次调用counter1.increament之后再调用getValue的结果是7。

两次调用counter得到的两个不同对象，它们之间的运行环境（例如counter函数中的变量privateValue等）没有共享。因此在counter1上调用increament或者decreament对counter2没有影响。

上述代码还演示了闭包的一个作用：模拟私有变量和函数。在上述代码中，函数counter中的变量privateValue以及函数changeBy在函数counter之外都不能访问。

2.3 当多个闭包在一个循环中创建时，很多人都会犯错误。例如如下代码：

[javascript] view plain copy
print?
  1. function getNumberFuncs(length) {  
  2.     var numberFuncs = [];  
  3.     for(var i = 0; i < length; ++i) {  
  4.         numberFuncs[i] = function() {  
  5.             return i;  
  6.         };  
  7.     }  
  8.       
  9.     return numberFuncs;  
  10. }  
  11. var numberFuncs = getNumberFuncs(3);  
  12. for(var i = 0; i < numberFuncs.length; ++i) {  
  13.     var number = numberFuncs[i]();  
  14.     console.log(number);  
  15. }  
function getNumberFuncs(length) {    var numberFuncs = [];    for(var i = 0; i < length; ++i) {        numberFuncs[i] = function() {            return i;        };    }    return numberFuncs;}var numberFuncs = getNumberFuncs(3);for(var i = 0; i < numberFuncs.length; ++i) {    var number = numberFuncs[i]();    console.log(number);}
上述代码期待的输出可能是3行，分别为0、1和2。然而，上述代码的实际输出的3行都是3。这是因为三个闭包函数都通过引用使用了printNumber函数中的变量i。当函数printNumber执行结束之后，i的值是3。因此三个闭包函数再试图输出i时，输出的数值都是3。
我们可以使用立即调用函数机制（Immediately Invoked Function Expression, IIFE）来解决这个问题。修改之后的代码为：

[javascript] view plain copy
print?
  1. function getNumberFuncs(length) {  
  2.     var numberFuncs = [];  
  3.     for(var i = 0; i < length; ++i) {  
  4.         numberFuncs[i] = function(j) {  
  5.             return j;  
  6.         }(i);  
  7.     }  
  8.       
  9.     return numberFuncs;  
  10. }  
  11. var numberFuncs = getNumberFuncs(3);  
  12. for(var i = 0; i < numberFuncs.length; ++i) {  
  13.     var number = numberFuncs[i];  
  14.     console.log(number);  
  15. }  
function getNumberFuncs(length) {    var numberFuncs = [];    for(var i = 0; i < length; ++i) {        numberFuncs[i] = function(j) {            return j;        }(i);    }    return numberFuncs;}var numberFuncs = getNumberFuncs(3);for(var i = 0; i < numberFuncs.length; ++i) {    var number = numberFuncs[i];    console.log(number);}

3.1 闭包的一个作用是给函数以参数之外的形式传入数据。有些API的参数是其他函数，但是没有预留位置给函数传入参数。例如，函数setTimeout、setInterval有两个参数，第一个参数是一个函数，第二个是以毫秒为单位的时间。当传给setTimeout、setInterval的函数也有自己的参数的时候，就有可能有问题。比如如下代码：

[javascript] view plain copy
print?
  1. function printNumber(number) {  
  2.     console.log(number);  
  3. }  
  4.   
  5. setInterval(printNumber, 1000); // undefined  
function printNumber(number) {    console.log(number);}setInterval(printNumber, 1000); // undefined
由于没有给printNumber传入参数，因此每隔1秒钟之后实际输出的都是undefined。

我们可以用闭包解决这种类型的问题。修改之后的代码如下所示：

[javascript] view plain copy
print?
  1. function printNumberFunc(number) {  
  2.     return function() {  
  3.         console.log(number);  
  4.     }  
  5. }  
  6.   
  7. var func = printNumberFunc(20);  
  8. setInterval(func, 1000); // 20  
function printNumberFunc(number) {    return function() {        console.log(number);    }}var func = printNumberFunc(20);setInterval(func, 1000); // 20

很多JavaScript的新手会试图直接给setInterval中printNumber以如下形式传入参数：

[javascript] view plain copy
print?
  1. function printNumber(number) {  
  2.     console.log(number);  
  3. }  
  4.   
  5. setInterval(printNumber(20), 1000);   
function printNumber(number) {    console.log(number);}setInterval(printNumber(20), 1000);
这样调用setInterval的结果是最终只输出一行20。这是因为上述代码只是调用了一次printNumber(20)。由于printNumber没有返回值，因此并没有给函数setInterval传入一个函数。

3.2 闭包的另一个作用是封装数据，这些数据只有闭包函数才能访问。

假如我们需要一个函数把一个人的名字和邮件地址生成HTML表格中的一行。例如输入”Harry”和”harry@abcd.com”，则输出”<tr><td>Harry</td><td>harry@abcd.com</td></tr>”。下面这个函数可以完成这一功能：

[javascript] view plain copy
print?
  1. function getRowData(name, email) {  
  2.     var rowTemplate = [“<tr><td>”,  
  3.                        ”“, // placeholder for name  
  4.                        ”</td><td>”,  
  5.                        ”“, // placeholder for email  
  6.                        ”</td></tr>”];  
  7.       
  8.     rowTemplate[1] = name;  
  9.     rowTemplate[3] = email;  
  10.       
  11.     return rowTemplate.join(“”);  
  12. }  
  13.   
  14. var row = getRowData(“Harry”, “harry@abcd.com”);  
  15. console.log(row);  
function getRowData(name, email) {    var rowTemplate = ["<tr><td>",                       "", // placeholder for name                       "</td><td>",                       "", // placeholder for email                       "</td></tr>"];    rowTemplate[1] = name;    rowTemplate[3] = email;    return rowTemplate.join("");}var row = getRowData("Harry", "harry@abcd.com");console.log(row);
上面的函数有一个缺点：每一次调用函数getRowData的时候都会生成一个rowTemplate对象。虽然这些对象会被GC释放掉，但生成和释放对象都是需要时间开销。我们需要尽量减少不必要的开销。

一个办法把rowTemplate从函数getRowData中移出来，变成：

[javascript] view plain copy
print?
  1. var rowTemplate = [“<tr><td>”,  
  2.                    ”“, // placeholder for name  
  3.                    ”</td><td>”,  
  4.                    ”“, // placeholder for email  
  5.                    ”</td></tr>”];  
  6.   
  7. function getRowData(name, email) {  
  8.     rowTemplate[1] = name;  
  9.     rowTemplate[3] = email;  
  10.       
  11.     return rowTemplate.join(“”);  
  12. }  
  13.   
  14. var row = getRowData(“Harry”, “harry@abcd.com”);  
  15. console.log(row);  
var rowTemplate = ["<tr><td>",                   "", // placeholder for name                   "</td><td>",                   "", // placeholder for email                   "</td></tr>"];function getRowData(name, email) {    rowTemplate[1] = name;    rowTemplate[3] = email;    return rowTemplate.join("");}var row = getRowData("Harry", "harry@abcd.com");console.log(row);
这样多次调用函数getRowData使用的都是同一个rowTemplate对象。不必要的开销是消除了，但我们引入了一个新的全局变量。每引入一个全局变量，就增加了变量名字冲突的可能。因此我们需要尽量减少全局变量的数目。

如果我们使用闭包，则既可以避免重复生成rowTemplate对象，又不引入新的全局变量。下面是利用闭包实现同样的功能：

[javascript] view plain copy
print?
  1. var getRowData = (function() {  
  2.     var rowTemplate = [“<tr><td>”,  
  3.                        ”“, // placeholder for name  
  4.                        ”</td><td>”,  
  5.                        ”“, // placeholder for email  
  6.                        ”</td></tr>”];  
  7.       
  8.     return function(name, email) {  
  9.         rowTemplate[1] = name;  
  10.         rowTemplate[3] = email;  
  11.       
  12.         return rowTemplate.join(“”);  
  13.     };  
  14. })();  
  15.   
  16. var row = getRowData(“Harry”, “harry@abcd.com”);  
  17. console.log(row);  
var getRowData = (function() {    var rowTemplate = ["<tr><td>",                       "", // placeholder for name                       "</td><td>",                       "", // placeholder for email                       "</td></tr>"];    return function(name, email) {        rowTemplate[1] = name;        rowTemplate[3] = email;        return rowTemplate.join("");    };})();var row = getRowData("Harry", "harry@abcd.com");console.log(row);
我们定义了一个匿名函数，该匿名函数是一个立即调用函数，函数的返回值是另一个函数。getRowData指向这个返回的函数。我们仍然可以通过getRowData调用函数根据人名和邮件地址生成HTML表格中的一行数据。由于立即调用函数只会调用一次，因此只会生成一个rowTemplate对象。






阅读全文
0 0
美利达怎么样知乎 美利达怎么样知乎
原创粉丝点击
热门IT博客
golang base64 decodegolang base64 decode
戴尔ubuntu怎么装系统戴尔ubuntu怎么装系统
帝国cms网站登录模板
上海游戏公司 知乎
苹果5s不是4g网络
中国与英国知乎
mac svn 管理工具下载
串口数据拦截原理
单片机课后答案霍孟友
淘宝网加绒运动服装
project tango 淘宝
it精英自我评价
淘宝杂志
台湾经济前景 知乎
windows图片查看器
2017淘宝卖什么成本低
音乐社美工基本功
淘宝店关了信誉还在吗
mac有没有软件助手
什么软件有烟雾
热门问题 老师的惩罚 人脸识别 我在镇武司摸鱼那些年 重生之率土为王 我在大康的咸鱼生活 盘龙之生命进化 天生仙种 凡人之先天五行 春回大明朝 姑娘不必设防，我是瞎子 大理古镇到双廊 大理到双廊怎么坐车 双廊聆海沐月客栈 双廊民宿 双廊图片 洱海双廊 双廊到大理古城 云南双廊旅游 云南双廊 丽江到双廊 双廊攻略 大理到双廊 双廊酒店 双廊有什么好玩的 洱海到双廊 双廊景点 大理双廊旅游 双廊镇 大理旅游攻略自助游 双开 应用双开 双开双控 双开单控 双开君 双开接线 比翼双开 双开软件 双开神器 双开大师 怀旧服双开 双开开关 魔兽双开 手机双开 双开接线图 双开应用 手游双开 双开肋手 双开的意思 软件双开 安卓双开 双开app

程序博客网，程序员的互联网技术博客家园。csdn论坛精品 msdn技术资料都在这里