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 相关文章推荐
关闭页面时window.location事件未执行的原因分析及解决方案
Sep 01 Javascript
基于jQuery实现淡入淡出效果轮播图
Jul 31 Javascript
JS实现淡入淡出图片效果的方法分析
Dec 20 Javascript
根据Bootstrap Paginator改写的js分页插件
Dec 25 Javascript
jQuery UI仿淘宝搜索下拉列表功能
Jan 10 Javascript
React中上传图片到七牛的示例代码
Oct 10 Javascript
JavaScript屏蔽Backspace键的实现代码
Nov 02 Javascript
js最简单的双向绑定实例讲解
Jan 02 Javascript
详解nuxt sass全局变量(公共scss解决方案)
Jun 27 Javascript
vue 循环加载数据并获取第一条记录的方法
Sep 26 Javascript
VUE渲染后端返回含有script标签的html字符串示例
Oct 28 Javascript
layui写后台表格思路和赋值用法详解
Nov 14 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提示Call-time pass-by-reference has been deprecated in的解决方法[已测]
2012/05/06 PHP
php启动时候提示PHP startup的解决方法
2013/05/07 PHP
php保存二进制原始数据为图片的程序代码
2014/10/14 PHP
php检测url是否存在的方法
2015/04/14 PHP
是 WordPress 让 PHP 更流行了 而不是框架
2016/02/03 PHP
详细解读php的命名空间(二)
2018/02/21 PHP
php中输出json对象的值(实现方法)
2018/03/07 PHP
为Yahoo! UI Extensions Grid增加内置的可编辑器
2007/03/10 Javascript
javascript两段代码,两个小技巧
2010/02/04 Javascript
js网页侧边随页面滚动广告效果实现
2011/04/14 Javascript
JavaScript实现简单图片滚动附源码下载
2014/06/17 Javascript
jQuery ajaxSubmit 实现ajax提交表单局部刷新
2016/07/04 Javascript
JS中位置与大小的获取方法
2016/11/22 Javascript
AngularJS使用ng-class动态增减class样式的方法示例
2017/05/18 Javascript
使用clipboard.js实现复制功能的示例代码
2017/10/16 Javascript
node的process以及child_process模块学习笔记
2018/03/06 Javascript
js实现左右两侧浮动广告
2018/07/09 Javascript
JS实现用特殊符号替换字符串的中间部分区域的实例代码
2018/07/24 Javascript
vue中使用极验验证码的方法(附demo)
2019/12/04 Javascript
vue使用nprogress实现进度条
2019/12/09 Javascript
Vue的状态管理vuex使用方法详解
2020/02/05 Javascript
详解JavaScript之ES5的继承
2020/07/08 Javascript
python回溯法实现数组全排列输出实例分析
2015/03/17 Python
python通过get,post方式发送http请求和接收http响应的方法
2015/05/26 Python
python求解数组中两个字符串的最小距离
2018/09/27 Python
Python多线程原理与用法实例剖析
2019/01/22 Python
PyCharm永久激活方式(推荐)
2020/09/22 Python
python 实现简易的记事本
2020/11/30 Python
使用HTML5的表单验证的简单示例
2015/09/09 HTML / CSS
HTML5 WebSocket实现点对点聊天的示例代码
2018/01/31 HTML / CSS
friso美素佳儿官方海外旗舰店:荷兰原产原罐
2017/07/03 全球购物
波兰在线儿童和婴儿用品零售商:pinkorblue
2019/06/29 全球购物
历史学专业推荐信
2013/11/06 职场文书
《雪儿》教学反思
2014/04/17 职场文书
内勤岗位职责
2015/02/10 职场文书
廉洁自律证明
2015/06/24 职场文书