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的parseInt 进制问题
May 07 Javascript
jquery显示隐藏input对象
Jul 21 Javascript
JavaScript字符串对象slice方法入门实例(用于字符串截取)
Oct 16 Javascript
node.js中的fs.read方法使用说明
Dec 17 Javascript
浅谈document.write()输出样式
May 07 Javascript
js的各种排序算法实现(总结)
Jul 23 Javascript
利用Angularjs和原生JS分别实现动态效果的输入框
Sep 01 Javascript
bootstrap suggest搜索建议插件使用详解
Mar 25 Javascript
JS闭包用法实例分析
Mar 27 Javascript
用js屏蔽被http劫持的浮动广告实现方法
Aug 10 Javascript
关于vue状态过渡transition不起作用的原因解决
Apr 09 Javascript
Vue 解决通过this.$refs来获取DOM或者组件报错问题
Jul 28 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获取当前网址url并替换参数或网址的方法
2010/06/06 PHP
PHP header函数分析详解
2011/08/06 PHP
PHP 返回13位时间戳的实现代码
2016/05/13 PHP
JavaScript 32位整型无符号操作示例
2013/12/08 Javascript
后台获取ZTREE选中节点的方法
2015/02/12 Javascript
JS返回只包含数字类型的数组实例分析
2016/12/16 Javascript
详解照片瀑布流效果(js,jquery分别实现与知识点总结)
2017/01/01 Javascript
canvas雪花效果核心代码分享
2017/02/19 Javascript
Bootstrap.css与layDate日期选择样式起冲突的解决办法
2017/04/07 Javascript
微信小程序通过保存图片分享到朋友圈功能
2018/05/24 Javascript
详解TypeScript+Vue 插件 vue-class-component的使用总结
2019/02/18 Javascript
读懂CommonJS的模块加载
2019/04/19 Javascript
Python开发WebService系列教程之REST,web.py,eurasia,Django
2014/06/30 Python
基于Python的身份证号码自动生成程序
2014/08/15 Python
Python文件去除注释的方法
2015/05/25 Python
使用Python的package机制如何简化utils包设计详解
2017/12/11 Python
浅谈Scrapy框架普通反爬虫机制的应对策略
2017/12/28 Python
Python操作mysql数据库实现增删查改功能的方法
2018/01/15 Python
Python使用matplotlib实现的图像读取、切割裁剪功能示例
2018/04/28 Python
Python使用pandas和xlsxwriter读写xlsx文件的方法示例
2019/04/09 Python
PyQt5 加载图片和文本文件的实例
2019/06/14 Python
python创建学生管理系统
2019/11/22 Python
纯CSS改变webkit内核浏览器的滚动条样式
2014/04/17 HTML / CSS
canvas之万花筒效果的简单实现(推荐)
2016/08/16 HTML / CSS
加拿大消费电子和手机购物网站:The Source
2017/01/28 全球购物
线程的基本概念、线程的基本状态以及状态之间的关系
2012/10/26 面试题
某公司C#程序员面试题笔试题
2014/05/26 面试题
专科毕业生学习生活的自我评价
2013/10/26 职场文书
签约仪式主持词
2014/03/19 职场文书
幼儿园大班毕业教师寄语
2014/04/03 职场文书
爱之链教学反思
2014/04/30 职场文书
2014年服务员个人工作总结
2014/12/23 职场文书
给老师的感谢信
2015/01/20 职场文书
八年级地理课件资料及考点知识分享
2019/08/30 职场文书
tp5使用layui实现多个图片上传(带附件选择)的方法实例
2021/11/17 PHP
PHP获取学生成绩的方法
2021/11/17 PHP