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 相关文章推荐
学习ExtJS(二) Button常用方法
Oct 07 Javascript
通过百度地图获取公交线路的站点坐标的js代码
May 11 Javascript
动态加载dtree.js树treeview(示例代码)
Dec 17 Javascript
js获取IP地址的方法小结
Jul 01 Javascript
jQuery 选择器详解
Jan 19 Javascript
CSS图片响应式 垂直水平居中
Aug 14 Javascript
node vue项目开发之前后端分离实战记录
Dec 13 Javascript
JS实现动态生成html table表格的方法分析
Jul 11 Javascript
通过实例了解js函数中参数的传递
Jun 15 Javascript
浅谈Layui的eleTree树式选择器使用方法
Sep 25 Javascript
利用H5api实现时钟的绘制(javascript)
Sep 13 Javascript
vue穿梭框实现上下移动
Jan 29 Vue.js
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语法(1)
2006/10/09 PHP
社区(php&amp;&amp;mysql)二
2006/10/09 PHP
PHP mb_convert_encoding文字编码的转换函数介绍
2011/11/10 PHP
YII框架实现自定义第三方扩展操作示例
2019/04/26 PHP
php设计模式之原型模式分析【星际争霸游戏案例】
2020/03/23 PHP
在一个form用一个SUBMIT(或button)分别提交到两个处理表单页面的代码
2007/02/15 Javascript
用JavaScript事件串连执行多个处理过程的方法
2007/03/09 Javascript
在JavaScript里嵌入大量字符串常量的实现方法
2013/07/07 Javascript
js window.print实现打印特定控件或内容
2013/09/16 Javascript
jquery Tab效果和动态加载的简单实例
2013/12/11 Javascript
javascript等号运算符使用详解
2015/04/16 Javascript
Jquery遍历Json数据的方法
2015/04/20 Javascript
Select2.js下拉框使用小结
2016/10/24 Javascript
微信小程序表单验证错误提示效果
2017/05/19 Javascript
js实现动态改变radio状态的方法
2018/02/28 Javascript
Koa2 之文件上传下载的示例代码
2018/03/29 Javascript
vue 音乐App QQ音乐搜索列表最新接口跨域设置方法
2018/09/25 Javascript
微信小程序返回上一页传参并刷新过程解析
2019/12/13 Javascript
React学习之JSX与react事件实例分析
2020/01/06 Javascript
python计算最大优先级队列实例
2013/12/18 Python
window下eclipse安装python插件教程
2017/04/24 Python
django 中QuerySet特性功能详解
2019/07/25 Python
基于python修改srt字幕的时间轴
2020/02/03 Python
python 写函数在一定条件下需要调用自身时的写法说明
2020/06/01 Python
Python爬取梨视频的示例
2021/01/29 Python
小女主人连衣裙:Little Mistress
2017/07/10 全球购物
亿企通软件测试面试题
2012/04/10 面试题
大学教师年终总结的自我评价
2013/10/29 职场文书
管理科学大学生求职信
2013/11/13 职场文书
技能比赛获奖感言
2014/02/14 职场文书
个人作风纪律整顿整改措施
2014/10/25 职场文书
宾馆客房管理制度
2015/08/06 职场文书
技术入股协议书
2016/03/22 职场文书
读《人生的智慧》有感:闲暇是人生的精华
2019/12/25 职场文书
Django程序的优化技巧
2021/04/29 Python
Javascript之datagrid查询详解
2021/09/15 Javascript