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 相关文章推荐
javascritp实现input输入框相关限制用法
Jun 29 Javascript
JS 字符串连接[性能比较]
May 10 Javascript
分享十五款 jQuery 社交网络分享插件
May 16 Javascript
详解MVC如何使用开源分页插件(shenniu.pager.js)
Dec 16 Javascript
JS实现双击内容变为可编辑状态
Mar 03 Javascript
jquery实现的table排序功能示例
Mar 10 Javascript
Vue组件化通讯的实例代码
Jun 23 Javascript
详解vue2.0监听属性的使用心得及搭配计算属性的使用
Jul 18 Javascript
vue2.0 使用element-ui里的upload组件实现图片预览效果方法
Sep 04 Javascript
JS canvas绘制五子棋的棋盘
May 28 Javascript
对angularJs中自定义指令replace的属性详解
Oct 09 Javascript
vue中的过滤器及其时间格式化问题
Apr 09 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 杂谈《重构-改善既有代码的设计》之三 重新组织数据
2012/04/09 PHP
php中字符集转换iconv函数使用总结
2014/10/11 PHP
thinkphp框架实现数据添加和显示功能
2016/06/29 PHP
php判断是否连接上网络的方法实例详解
2016/12/14 PHP
PHP获取路径和目录的方法总结【必看篇】
2017/03/04 PHP
jquery判断单个复选框是否被选中的代码
2009/09/03 Javascript
js设置组合快捷键/tabindex功能的方法
2013/11/21 Javascript
利用js实现禁止复制文本信息
2015/06/03 Javascript
JS功能代码集锦
2016/05/04 Javascript
归纳下js面向对象的几种常见写法总结
2016/08/24 Javascript
JavaScript实现的微信二维码图片生成器的示例
2016/10/26 Javascript
JS实现根据密码长度显示安全条功能
2017/03/08 Javascript
js实现随机数字字母验证码
2017/06/19 Javascript
Js自定义多选框效果的实例代码
2017/07/05 Javascript
weui框架实现上传、预览和删除图片功能代码
2017/08/24 Javascript
Windows下Node.js安装及环境配置方法
2017/09/18 Javascript
解决Layui 表单提交数据为空的问题
2018/08/15 Javascript
vue中当图片地址无效的时候,显示默认图片的方法
2018/09/18 Javascript
vue踩坑记录之数组定义和赋值问题
2019/03/20 Javascript
一篇文章让你搞懂JavaScript 原型和原型链
2020/11/23 Javascript
python实现多线程的方式及多条命令并发执行
2016/06/07 Python
Python中不同进制的语法及转换方法分析
2016/07/27 Python
python 删除大文件中的某一行(最有效率的方法)
2017/08/19 Python
Tensorflow环境搭建的方法步骤
2018/02/07 Python
Python在图片中插入大量文字并且自动换行
2019/01/02 Python
Python中使用logging和traceback模块记录日志和跟踪异常
2019/04/09 Python
python实现对变位词的判断方法
2020/04/05 Python
关于HTML5你必须知道的28个新特性,新技巧以及新技术
2012/05/28 HTML / CSS
JPA的特点
2014/10/25 面试题
宣传保护环境的公益广告词
2014/03/13 职场文书
关于青春的演讲稿
2014/05/05 职场文书
党的群众路线教育实践活动调研报告
2014/11/03 职场文书
行政助理岗位职责范本
2015/04/11 职场文书
2015年信息宣传工作总结
2015/05/26 职场文书
导游词之藏龙百瀑景区
2019/12/30 职场文书
mysql性能优化以及配置连接参数设置
2022/05/06 MySQL