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客户端将指定区域导出到Word、Excel的代码
Oct 22 Javascript
JS延迟加载(setTimeout) JS最后加载
Jul 15 Javascript
jQuery学习笔记(2)--用jquery实现各种模态提示框代码及项目构架
Apr 08 Javascript
js 文本滚动效果的实例代码
Aug 17 Javascript
jquery插件之文字间歇自动向上滚动效果代码
Feb 25 Javascript
JS函数arguments数组获得实际传参数个数的实现方法
May 28 Javascript
JS解决iframe之间通信和自适应高度的问题
Aug 24 Javascript
谈谈JavaScript的New关键字
Aug 26 Javascript
jQuery实现获取form表单内容及绑定数据到form表单操作分析
Jul 03 jQuery
vue的滚动条插件实现代码
Sep 07 Javascript
微信小程序实现图片压缩
Dec 03 Javascript
JS中如何优雅的使用async await详解
Oct 05 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
如何开发一个虚拟域名系统
2006/10/09 PHP
解析php中两种缩放图片的函数,为图片添加水印
2013/06/14 PHP
php使用curl和正则表达式抓取网页数据示例
2014/04/13 PHP
PHP获取数组的键与值方法小结
2015/06/13 PHP
使用PHP和JavaScript判断请求是否来自微信内浏览器
2015/08/18 PHP
php自定义函数br2nl实现将html中br换行符转换为文本输入中换行符的方法【与函数nl2br功能相反】
2017/02/17 PHP
php实现的中秋博饼游戏之绘制骰子图案功能示例
2017/11/06 PHP
javascript for循环从入门到偏门(效率优化+奇特用法)
2012/08/01 Javascript
javascript中onclick(this)用法介绍
2013/04/19 Javascript
jQuery中:checkbox选择器用法实例
2015/01/03 Javascript
Bootstrap表单布局样式代码
2016/05/31 Javascript
url传递的参数值中包含&amp;时,url自动截断问题的解决方法
2016/08/02 Javascript
浅谈js控制li标签排序问题 js调用php函数的方法
2016/10/16 Javascript
React利用插件和不用插件实现双向绑定的方法详解
2017/07/03 Javascript
微信、QQ、微博、Safari中使用js唤起App
2018/01/24 Javascript
浅谈Node.js 子进程与应用场景
2018/01/24 Javascript
vue中vee validate表单校验的几种基本使用
2018/06/25 Javascript
浅析java线程中断的办法
2018/07/29 Javascript
javascript实现小型区块链功能
2019/04/03 Javascript
ES6箭头函数和扩展实例分析
2020/05/23 Javascript
vue项目打包后请求地址错误/打包后跨域操作
2020/11/04 Javascript
python利用smtplib实现QQ邮箱发送邮件
2020/05/20 Python
浅谈Python在pycharm中的调试(debug)
2018/11/29 Python
Python调用服务接口的实例
2019/01/03 Python
Python基础学习之时间转换函数用法详解
2019/06/18 Python
安装docker-compose的两种最简方法
2019/07/30 Python
python打印直角三角形与等腰三角形实例代码
2019/10/20 Python
Pycharm中Python环境配置常见问题解析
2020/01/16 Python
python使用docx模块读写docx文件的方法与docx模块常用方法详解
2020/02/17 Python
Python 高效编程技巧分享
2020/09/10 Python
使用分层画布来优化HTML5渲染的教程
2015/05/08 HTML / CSS
欧缇丽美国官网:Caudalie美国
2016/12/31 全球购物
介绍信如何写
2015/01/31 职场文书
欢送领导祝酒词
2015/08/12 职场文书
2016年度基层党建工作公开承诺书
2016/03/25 职场文书
mongoDB数据库索引快速入门指南
2022/03/23 MongoDB