JavaScript高级程序设计 读书笔记之八 Function类及闭包


Posted in Javascript onFebruary 27, 2012

Function类

定义

Function类可以表示开发者定义的任何函数,用Function类直接创建函数的语法如下:

var function_name=new Function(agrument1,agrument2,...,argumentN,function_body);

每个argument都是一个参数,最后一个参数是函数主体(要执行的代码)。

示例:

function sayHi(sName,sMessage){ 
alert("Hello "+sName+","+sMessage); 
}

还可以如下定义它:
var sayHi=new Function("sName","sMessage","alert(\"Hello\"+sName+\",\"+sMessage);");

注:尽管可用Function构造函数创建函数,但最好不要使用它,因为用它定义函数比用传统方式要慢得多。不过,所有函数都应看作是Function类的实例。
属性和方法

因为函数是引用类型,所以它们也有属性和方法,ECMAScript定义的属性length声明了函数期望的参数个数,例如:

function doAdd(iNum){ 
alert(iNum+10); 
} 
function sayHi(){ 
alert("Hi"); 
} 
alert(doAdd.length);//outpus 1 
alert(sayHi.length);//outpus 0

Function对象也有与所有对象共享的标准valueOf()方法和toString()方法,这两个方法返回的都是函数的源代码,在调试时尤其有用。

例如:

function doAdd(iNum){ 
alert(iNum+10); 
} 
alert(doAdd.toString());

这段代码输出了doAdd()函数的文本。
闭包
定义

所谓闭包,是指词法表示包括不必计算的变量的函数,也就是说,该函数能使用函数外定义的变量。在ECMAScript中使用全局变量是一个简单的闭包实例。

示例:

var sMessage="Hello World"; 
function sayHelloWold(){ 
alert(sMessage); 
} 
sayHelloWorld();

在一个函数中定义另一个函数会使闭包变得更复杂,如:
var iBaseNum=10; 
function addNumbers(iNum1,iNum2){ 
function doAddtion(){ 
return iNum1+iNum2+iBaseNum; 
} 
return doAddtion(); 
}

这里函数addNumbers()包括函数doAddtion()(闭包)。内部函数是个闭包,因为它将获取外部函数的参数iNum1和iNum2以及全局变量iBaseNum的值。addNumbers()的最后一步调用了内部函数,把两个参数和全局变量相加,并返回它们的和。这里要掌握的重要概念是doAddtion()函数根本不接受参数,它使用的是从执行环境中获取的。

可以看到,闭包是ECMAScript中非常强大多用的一部分,可以用于执行复杂的计算。就像使用任何高级函数一样,在使用闭包时要当心,因为它们可能会变得非常复杂。
本文示例代码

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
<title>《JavaScript高级程序设计》读书笔记之八:Function类及闭包</title> 
<script type="text/javascript"> 
function doAdd(iNum){ 
alert(iNum+10); 
} 
function sayHi(){ 
alert("Hi"); 
} 
function lengthProperty(){ 
alert(doAdd.length); 
alert(sayHi.length); 
} 
function valueOfMethod(){ 
alert(doAdd.valueOf()); 
} 
function toStringMethod(){ 
alert(doAdd.toString()); 
} 
var sMessage="Hello World"; 
function sayHelloWorld(){ 
alert(sMessage); 
} 
function demoOne(){ 
sayHelloWorld(); 
} 
var iBaseNum=10; 
function addNumbers(iNum1,iNum2){ 
function doAddtion(){ 
return iNum1+iNum2+iBaseNum; 
} 
return doAddtion(); 
} 
function demoTwo(){ 
alert(addNumbers(1,2)); 
} 
</script> 
</head> 
<body> 
<h1>Length:</h1> 
<input type="button" onclick="lengthProperty()" value="LengthProperty"/> 
<h1>valueOf()/toString():</h1> 
<input type="button" onclick="valueOfMethod()" value="ValueOfMethod"/> 
<input type="button" onclick="toStringMethod()" value="ToStringMethod"/> 
<h1>闭包:</h1> 
<input type="button" onclick="demoOne()" value="Demo One"/> 
<input type="button" onclick="demoTwo()" value="Demo Two"/> 
</body>
Javascript 相关文章推荐
javascript cookie解码函数(兼容ff)
Mar 17 Javascript
JS在IE和FF下attachEvent,addEventListener学习笔记
Nov 26 Javascript
jquery 仿QQ校友的DIV模拟窗口效果源码
Mar 24 Javascript
分享10篇优秀的jQuery幻灯片制作教程及应用案例
Apr 16 Javascript
jQuery下的动画处理总结
Oct 10 Javascript
JS替换字符串中空格方法
Apr 17 Javascript
js判断输入字符串是否为空、空格、null的方法总结
Jun 14 Javascript
Javascript中的迭代、归并方法详解
Jun 14 Javascript
浅谈Javascript中的函数、this以及原型
Oct 09 Javascript
使用async、enterproxy控制并发数量的方法详解
Jan 02 Javascript
Vue 路由 过渡动效 数据获取方法
Jul 31 Javascript
vue 实现websocket发送消息并实时接收消息
Dec 09 Javascript
JavaScript高级程序设计 阅读笔记(七) ECMAScript中的语句
Feb 27 #Javascript
JavaScript高级程序设计阅读笔记(六) ECMAScript中的运算符(二)
Feb 27 #Javascript
JavaScript高级程序设计阅读笔记(五) ECMAScript中的运算符(一)
Feb 27 #Javascript
JavaScript高级程序设计 阅读笔记(四) ECMAScript中的类型转换
Feb 27 #Javascript
《JavaScript高级程序设计》阅读笔记(三) ECMAScript中的引用类型
Feb 27 #Javascript
《JavaScript高级程序设计》阅读笔记(二) ECMAScript中的原始类型
Feb 27 #Javascript
《JavaScript高级程序设计》阅读笔记(一) ECMAScript基础
Feb 27 #Javascript
You might like
php XPath对XML文件查找及修改实现代码
2011/07/27 PHP
深入PHP变量存储的详解
2013/06/13 PHP
解析php中memcache的应用
2013/06/18 PHP
THINKPHP支持YAML配置文件的设置方法
2015/03/17 PHP
js页面滚动时层智能浮动定位实现(jQuery/MooTools)
2011/08/23 Javascript
轻松实现JavaScript图片切换
2016/01/12 Javascript
jQuery文字提示与图片提示效果实现方法
2016/07/04 Javascript
文件上传的几个示例分享【推荐】
2016/12/16 Javascript
ES6中class类用法实例浅析
2017/04/06 Javascript
微信小程序教程系列之设置标题栏和导航栏(7)
2020/06/29 Javascript
Vue-cli中为单独页面设置背景色的实现方法
2018/02/11 Javascript
浅谈使用mpvue开发小程序需要注意和了解的知识点
2018/05/23 Javascript
vue如何引入sass全局变量
2018/06/28 Javascript
js canvas实现红包照片效果
2018/08/21 Javascript
angular 数据绑定之[]和{{}}的区别
2018/09/25 Javascript
layui表单验证select下拉框实现验证的方法
2019/09/05 Javascript
微信小程序保持session会话的方法
2020/03/20 Javascript
[01:38]完美世界DOTA2联赛PWL S3 集锦第四期
2020/12/21 DOTA
python将ip地址转换成整数的方法
2015/03/17 Python
Python命令行参数解析模块getopt使用实例
2015/04/13 Python
Python实现的数据结构与算法之基本搜索详解
2015/04/22 Python
Python中属性和描述符的正确使用
2016/08/23 Python
Python爬取十篇新闻统计TF-IDF
2018/01/03 Python
把JSON数据格式转换为Python的类对象方法详解(两种方法)
2019/06/04 Python
python实现连连看辅助(图像识别)
2020/03/25 Python
Django外键(ForeignKey)操作以及related_name的作用详解
2019/07/29 Python
基于CSS3实现图片模糊过滤效果
2015/11/19 HTML / CSS
Html5新标签解释及用法
2012/02/17 HTML / CSS
LODI女鞋在线商店:阿利坎特的鞋类品牌
2019/02/15 全球购物
关于运动会的广播稿(10篇)
2014/09/12 职场文书
人事局接收函
2015/01/30 职场文书
学生检讨书怎么写
2015/05/07 职场文书
侵犯商业秘密的律师函
2015/05/27 职场文书
离开雷锋的日子观后感
2015/06/09 职场文书
毕业感言怎么写
2015/07/31 职场文书
Spring Data JPA框架Repository自定义实现
2022/04/28 Java/Android