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跨平台的开源框架NativeScript
Mar 24 Javascript
JS实现自动变换的菜单效果代码
Sep 09 Javascript
JavaScript仿flash遮罩动画效果
Jun 15 Javascript
jQuery Easyui DataGrid点击某个单元格即进入编辑状态焦点移开后保存数据
Aug 15 Javascript
移动端点击图片放大特效PhotoSwipe.js插件实现
Aug 25 Javascript
AngularJS表单验证中级篇(3)
Sep 28 Javascript
使用bootstrap-paginator.js 分页来进行ajax 异步分页请求示例
Mar 09 Javascript
javascript trie前缀树的示例
Jan 29 Javascript
微信小程序scroll-view仿拼多多横向滑动滚动条
Apr 21 Javascript
JavaScript ES6中的简写语法总结与使用技巧
Dec 30 Javascript
js针对图片加载失败的处理方法分析
Aug 24 Javascript
使用Vant完成Dialog弹框案例
Nov 11 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导出MySQL数据到Excel文件(fputcsv)
2011/07/03 PHP
PHP 杂谈《重构-改善既有代码的设计》之三 重新组织数据
2012/04/09 PHP
PHP中函数gzuncompress无法使用的解决方法
2017/03/02 PHP
PHP判断是否是微信打开,浏览器打开的方法
2018/03/14 PHP
ThinkPHP框架使用redirect实现页面重定向的方法实例分析
2018/04/12 PHP
php 调用百度sms来发送短信的实现示例
2018/11/02 PHP
javascript 一些用法小结
2009/09/11 Javascript
自己封装的javascript事件队列函数版
2014/06/12 Javascript
jQuery Validate表单验证入门学习
2015/12/18 Javascript
VUE实现日历组件功能
2017/03/13 Javascript
VueJS事件处理器v-on的使用方法
2017/09/27 Javascript
Vue SSR 组件加载问题
2018/05/02 Javascript
详解在Node.js中发起HTTP请求的5种方法
2019/01/10 Javascript
VeeValidate 的使用场景以及配置详解
2019/01/11 Javascript
JavaScript ES6常用基础知识总结
2019/02/09 Javascript
TypeScript中的方法重载详解
2019/04/12 Javascript
vue获取时间戳转换为日期格式代码实例
2019/04/17 Javascript
vue实现pdf文档在线预览功能
2019/11/26 Javascript
Paypal支付不完全指北
2020/06/04 Javascript
JavaScript实现图片合成下载的示例
2020/11/19 Javascript
[07:40]DOTA2每周TOP10 精彩击杀集锦vol.4
2014/06/25 DOTA
Python脚本判断 Linux 是否运行在虚拟机上
2015/04/25 Python
用Python写飞机大战游戏之pygame入门(4):获取鼠标的位置及运动
2015/11/05 Python
python 画3维轨迹图并进行比较的实例
2019/12/06 Python
Python3 虚拟开发环境搭建过程(图文详解)
2020/01/06 Python
详解使用canvas保存网页为pdf文件支持跨域
2018/11/23 HTML / CSS
美国户外生活方式品牌:Eddie Bauer
2016/12/28 全球购物
超级英雄、电影和电视、乐队和音乐T恤:Loud Clothing
2019/09/01 全球购物
路政管理专业个人自荐信范文
2013/11/30 职场文书
自考生自我评价分享
2014/01/18 职场文书
办公室副主任职责范本
2014/03/08 职场文书
文秘应届生求职信
2014/07/05 职场文书
2014乡镇机关党员个人对照检查材料思想汇报
2014/10/09 职场文书
2014年禁毒工作总结
2014/11/24 职场文书
2015年乡镇工会工作总结
2015/05/19 职场文书
创业计划书之面包店
2019/09/12 职场文书