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 相关文章推荐
jquery 图片预加载 自动等比例缩放插件
Dec 25 Javascript
File文件控件,选中文件(图片,flash,视频)即立即预览显示
Apr 09 Javascript
jQuery 性能优化指南(3)
May 21 Javascript
将HTMLCollection/NodeList/伪数组转换成数组的实现方法
Jun 20 Javascript
jquery操作select option 的代码小结
Jun 21 Javascript
精心挑选的12款优秀的基于jQuery的手风琴效果插件和教程
Aug 22 Javascript
javascript内置对象操作详解
Feb 04 Javascript
JS+CSS实现Li列表隔行换色效果的方法
Feb 16 Javascript
jQuery抛物线运动实现方法(附完整demo源码下载)
Jan 08 Javascript
iview Upload组件多个文件上传的示例代码
Sep 30 Javascript
基于vue2的canvas时钟倒计时组件步骤解析
Nov 05 Javascript
微信小程序拖拽排序列表的示例代码
Jul 08 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
百度地图API应用之获取用户的具体位置
2014/06/10 PHP
PHP弹出对话框技巧详细解读
2015/09/26 PHP
刷新PHP缓冲区为你的站点加速
2015/10/10 PHP
php从数据库中读取特定的行(实例)
2017/06/02 PHP
jquery ajax 登录验证实现代码
2009/09/23 Javascript
热点新闻滚动特效的js代码
2013/08/17 Javascript
给超链接添加特效鼠标移动展示提示信息且随鼠标移动
2013/10/17 Javascript
面向对象设计模式的核心法则
2013/11/10 Javascript
javascript表格的渲染组件
2015/07/03 Javascript
jquery实现超简洁的TAB选项卡效果代码
2015/08/28 Javascript
JS实现的鼠标跟随代码(卡通手型点击效果)
2015/10/26 Javascript
Javascript OOP之面向对象
2016/07/31 Javascript
js的三种继承方式详解
2017/01/21 Javascript
ES6字符串模板,剩余参数,默认参数功能与用法示例
2017/04/06 Javascript
小程序实现左右来回滚动字幕效果
2018/12/28 Javascript
highCharts提示框中显示当前时间的方法
2019/01/18 Javascript
详解NodeJs项目 CentOs linux服务器线上部署
2019/09/16 NodeJs
vue制作抓娃娃机的示例代码
2020/04/17 Javascript
JavaScript实现音乐导航效果
2020/11/19 Javascript
Python卸载模块的方法汇总
2016/06/07 Python
Python实现快速排序算法及去重的快速排序的简单示例
2016/06/26 Python
Python中装饰器学习总结
2018/02/10 Python
对python中的pop函数和append函数详解
2018/05/04 Python
Python利用ORM控制MongoDB(MongoEngine)的步骤全纪录
2018/09/13 Python
python中的逆序遍历实例
2019/12/25 Python
在pycharm中使用matplotlib.pyplot 绘图时报错的解决
2020/06/01 Python
Python collections.defaultdict模块用法详解
2020/06/18 Python
美国内衣品牌:Leonisa
2016/08/14 全球购物
意大利制造的西装、衬衫和针对男士量身定制的服装:Lanieri
2018/04/08 全球购物
芬兰灯具网上商店:Nettilamppu.fi
2018/06/30 全球购物
英国健身仓库:Bodybuilding Warehouse
2019/03/06 全球购物
Java中会存在内存泄漏吗,请简单描述
2016/12/22 面试题
什么样的创业计划书可行性高?
2014/02/01 职场文书
2014年店长工作总结
2014/11/17 职场文书
银行文明优质服务培训心得体会
2016/01/09 职场文书
vue 给数组添加新对象并赋值
2022/04/20 Vue.js