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 上万关键字瞬间匹配实现代码
Jul 07 Javascript
一个JavaScript防止表单重复提交的实例
Oct 21 Javascript
Javascript中的getUTCHours()方法使用详解
Jun 10 Javascript
js基础知识(公有方法、私有方法、特权方法)
Nov 06 Javascript
关于JS中setTimeout()无法调用带参函数问题的解决方法
Jun 21 Javascript
jQuery过滤选择器经典应用
Aug 18 Javascript
微信小程序 教程之数据绑定
Oct 18 Javascript
Babel 入门教程学习笔记
Jun 13 Javascript
详解vue更改头像功能实现
Apr 28 Javascript
elementui之el-tebs浏览器卡死的问题和使用报错未注册问题
Jul 06 Javascript
Vue 通过公共字段,拼接两个对象数组的实例
Nov 07 Javascript
js实现页面导航层级指示效果
Aug 25 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
mysql 查询指定日期时间内sql语句实现原理与代码
2012/12/16 PHP
PHP实现简单实用的验证码类
2015/07/29 PHP
分享几个超级震憾的图片特效
2012/01/08 Javascript
js 页面元素的几个用法总结
2013/11/18 Javascript
jquery列表拖动排列(由项目提取相当好用)
2014/06/17 Javascript
nodejs下打包模块archiver详解
2014/12/03 NodeJs
jQuery弹出框代码封装DialogHelper
2015/01/30 Javascript
详细解读JavaScript的跨浏览器事件处理
2015/08/12 Javascript
轻松实现javascript图片轮播特效
2016/01/13 Javascript
jQuery添加删除DOM元素方法详解
2016/01/18 Javascript
微信小程序 获取微信OpenId详解及实例代码
2016/10/31 Javascript
基于jQuery实现Accordion手风琴自定义插件
2020/10/13 Javascript
Three.js实现浏览器变动时进行自适应的方法
2017/09/26 Javascript
详谈DOM简介及节点、属性、查找节点的方法
2017/11/16 Javascript
用vue快速开发app的脚手架工具
2018/06/11 Javascript
js+html5实现手机九宫格密码解锁功能
2018/07/30 Javascript
vue3修改link标签默认icon无效问题详解
2019/10/09 Javascript
[52:20]DOTA2-DPC中国联赛正赛 SAG vs XGBO3 第一场 3月5日
2021/03/11 DOTA
Request的中断和ErrorHandler实例解析
2018/02/12 Python
python切片(获取一个子列表(数组))详解
2019/08/09 Python
python正则表达式匹配IP代码实例
2019/12/28 Python
Pytorch 实现focal_loss 多类别和二分类示例
2020/01/14 Python
python软件测试Jmeter性能测试JDBC Request(结合数据库)的使用详解
2021/01/26 Python
Trina Turk官网:美国时装和泳装品牌
2018/06/10 全球购物
碧欧泉法国官网:Biotherm法国
2019/10/23 全球购物
小学教师节活动方案
2014/01/31 职场文书
2014年单位植树节活动方案
2014/03/23 职场文书
学生安全承诺书
2014/05/22 职场文书
求职信格式要求
2014/05/23 职场文书
村党支部对照检查材料思想汇报
2014/09/28 职场文书
四风问题对照检查材料思想汇报
2014/10/07 职场文书
飞越疯人院观后感
2015/06/09 职场文书
如何写通讯稿
2015/07/22 职场文书
导游词之江南园林狮子林
2019/09/16 职场文书
Kubernetes关键组件与结构组成介绍
2022/03/31 Servers
vue选项卡切换的实现案例
2022/04/11 Vue.js