- 浏览: 737459 次
- 性别:
- 来自: 苏州
文章分类
最新评论
-
hsl313:
源码还有得下载吗?
利用AMF数据封装与Flash 进行Socket通讯 -
zhang5476499:
已看,谢谢讲解。
Mock单元测试 -
Buydeful:
...
关于JSP或HTML的命名规范 -
lliiqiang:
单一登陆最好采用踢掉方法,如果忘记退出,可以从别的地方控制方式 ...
Jquery选择器大全 -
lliiqiang:
web代码由后台动态生成,这种动态方式多种多样,多提供几种标准 ...
Jquery选择器大全
函数是进行模块化程序设计的基础,编写复杂的Ajax应用程序,必须对函数有更深入的了解。
javascript中的函数不同于其他的语言,每个函数都是作为一个对象被维护和运行的。通过函数对象的性质,可以很方便的将一个函数赋值给一个变量或者将函数作为参数传递。在继续讲述之前,先看一下函数的使用语法:
以下是引用片段:
代码:
function func1(…){…} var func2=function(…){…}; var func3=function func4(…){…}; var func5=new Function();
认识函数对象(Function Object)
可以用function关键字定义一个函数,并为每个函数指定一个函数名,通过函数名来进行调用。在JavaScript解释执行时,函数都是被维护为一个对象,这就是要介绍的函数对象(Function Object)。
函数对象与其他用户所定义的对象有着本质的区别,这一类对象被称之为内部对象,例如日期对象(Date)、数组对象(Array)、字符串对象(String)都属于内部对象。这些内置对象的构造器是由JavaScript本身所定义的:通过执行newArray()这样的语句返回一个对象,JavaScript内部有一套机制来初始化返回的对象,而不是由用户来指定对象的构造方式。
在JavaScript中,函数对象对应的类型是Function,正如数组对象对应的类型是Array,日期对象对应的类型是Date一样,可以通过newFunction()来创建一个函数对象,也可以通过function关键字来创建一个对象。为了便于理解,我们比较函数对象的创建和数组对象的创建。先看数组对象:下面两行代码都是创建一个数组对象myArray:
以下是引用片段:
代码:
var myArray=[]; //等价于 var myArray=new Array(); 同样,下面的两段代码也都是创建一个函数myFunction: function myFunction(a,b){ return a+b; } //等价于 var myFunction=new Function("a","b","return a+b");
用new Function()的形式来创建一个函数不常见,因为一个函数体通常会有多条语句,如果将它们以一个字符串的形式作为参数传递,代码的可读性差。下面介绍一下其使用语法:
以下是引用片段:
代码:
var funcName=new Function(p1,p2,...,pn,body);
以下是引用片段:
代码:
new Function("a", "b", "c", "return a+b+c") new Function("a, b, c", "return a+b+c") new Function("a,b", "c", "return a+b+c")
函数的本质是一个内部对象,由JavaScript解释器决定其运行方式。通过上述代码创建的函数,在程序中可以使用函数名进行调用。本节开头列出的函数定义问题也得到了解释。注意可直接在函数声明后面加上括号就表示创建完成后立即进行函数调用,例如:以下是引用片段:
代码:
var i=function (a,b){ return a+b; }(1,2); alert(i);
需要注意的是,尽管下面两种创建函数的方法是等价的:
以下是引用片段:
代码:
function funcName(){ //函数体 } //等价于 var funcName=function(){ //函数体 }
代码:
<script language="JavaScript" type="text/javascript"> <!-- func(); var func=function(){ alert(1) } //--> </script>
代码:
<script language="JavaScript" type="text/javascript"> <!-- func(); function func(){ alert(1) } //--> </script>
代码:
<script language="JavaScript" type="text/javascript"> <!-- func(); var someFunc=function func(){ alert(1) } //--> </script>
函数对象和其他内部对象的关系 除了函数对象,还有很多内部对象,比如:Object、Array、Date、RegExp、Math、Error。这些名称实际上表示一个类型,可以通过new操作符返回一个对象。然而函数对象和其他对象不同,当用typeof得到一个函数对象的类型时,它仍然会返回字符串“function”,而typeof一个数组对象或其他的对象时,它会返回字符串“object”。下面的代码示例了typeof不同类型的情况:
以下是引用片段:
代码:
alert(typeof(Function))); alert(typeof(new Function())); alert(typeof(Array)); alert(typeof(Object)); alert(typeof(new Array())); alert(typeof(new Date())); alert(typeof(new Object()));
既然函数本身也是一个对象,它们的类型是function,联想到C++、Java等面向对象语言的类定义,可以猜测到Function类型的作用所在,那就是可以给函数对象本身定义一些方法和属性,借助于函数的prototype对象,可以很方便地修改和扩充Function类型的定义,例如下面扩展了函数类型Function,为其增加了method1方法,作用是弹出对话框显示"function":
以下是引用片段:
代码:
Function.prototype.method1=function(){ alert("function"); } function func1(a,b,c){ return a+b+c; } func1.method1(); func1.method1.method1();
Function是所有函数对象的基础,而Object则是所有对象(包括函数对象)的基础。在JavaScript中,任何一个对象都是Object的实例,因此,可以修改Object这个类型来让所有的对象具有一些通用的属性和方法,修改Object类型是通过prototype来完成的:
以下是引用片段:
上面的代码为所有的对象添加了getType方
代码:
Object.prototype.getType=function(){ return typeof(this); } var array1=new Array(); function func1(a,b){ return a+b; } alert(array1.getType()); alert(func1.getType()); 法,作用是返回该对象的类型。两条alert语句分别会显示“object”和“function”。
在前面已经介绍了函数对象本质,每个函数都被表示为一个特殊的对象,可以方便的将其赋值给一个变量,再通过这个变量名进行函数调用。作为一个变量,它可以以参数的形式传递给另一个函数,这在前面介绍JavaScript事件处理机制中已经看到过这样的用法,例如下面的程序将func1作为参数传递给func2:
以下是引用片段:
代码:
function func1(theFunc){ theFunc(); } function func2(){ alert("ok"); } func1(func2);
传递给函数的隐含参数:arguments
当进行函数调用时,除了指定的参数外,还创建一个隐含的对象——arguments。arguments是一个类似数组但不是数组的对象,说它类似是因为它具有数组一样的访问性质,可以用arguments[index]这样的语法取值,拥有数组长度属性length。arguments对象存储的是实际传递给函数的参数,而不局限于函数声明所定义的参数列表,例如:
以下是引用片段:
代码:
function func(a,b){ alert(a); alert(b); for(var i=0;i<arguments.length;i++){ alert(arguments); } } func(1,2,3);
代码:
var sum=function(n){ if(1==n)return 1; else return n+sum(n-1); } alert(sum(100));
以下是引用片段:
代码:
var sum=function(n){ if(1==n)return 1; else return n+arguments.callee(n-1); } alert(sum(100));
以下是引用片段:
代码:
Array.prototype.p1=1; alert(new Array().p1); function func(){ alert(arguments.p1); } func();
函数的apply、call方法和length属性 JavaScript为函数对象定义了两个方法:apply和call,它们的作用都是将函数绑定到另外一个对象上去运行,两者仅在定义参数的方式有所区别:
代码:
以下是引用片段: Function.prototype.apply(thisArg,argArray); Function.prototype.call(thisArg[,arg1[,arg2…]]);
以下是引用片段:
代码:
//定义一个函数func1,具有属性p和方法A function func1(){ this.p="func1-"; this.A=function(arg){ alert(this.p+arg); } } //定义一个函数func2,具有属性p和方法B function func2(){ this.p="func2-"; this.B=function(arg){ alert(this.p+arg); } } var obj1=new func1(); var obj2=new func2(); obj1.A("byA"); //显示func1-byA obj2.B("byB"); //显示func2-byB obj1.A.apply(obj2,["byA"]); //显示func2-byA,其中[“byA”]是仅有一个元素的数组,下同 obj2.B.apply(obj1,["byB"]); //显示func1-byB obj1.A.call(obj2,"byA"); //显示func2-byA obj2.B.call(obj1,"byB"); //显示func1-byB
以下是引用片段:
代码:
function sum(a,b){ return a+b; } alert(sum.length);
深入认识JavaScript中的this指针
this指针是面向对象程序设计中的一项重要概念,它表示当前运行的对象。在实现对象的方法时,可以使用this指针来获得该对象自身的引用。
和其他面向对象的语言不同,JavaScript中的this指针是一个动态的变量,一个方法内的this指针并不是始终指向定义该方法的对象的,在上一节讲函数的apply和call方法时已经有过这样的例子。为了方便理解,再来看下面的例子:
以下是引用片段:
代码:
<script language="JavaScript" type="text/javascript"> <!-- //创建两个空对象 var obj1=new Object(); var obj2=new Object(); //给两个对象都添加属性p,并分别等于1和2 obj1.p=1; obj2.p=2; //给obj1添加方法,用于显示p的值 obj1.getP=function(){ alert(this.p); //表面上this指针指向的是obj1 } //调用obj1的getP方法 obj1.getP(); //使obj2的getP方法等于obj1的getP方法 obj2.getP=obj1.getP; //调用obj2的getP方法 obj2.getP(); //--> </script>
每个对象集合的元素(即属性或方法)也是一个独立的部分,全局函数和作为一个对象方法定义的函数之间没有任何区别,因为可以把全局函数和变量看作为window对象的方法和属性。也可以使用new操作符来操作一个对象的方法来返回一个对象,这样一个对象的方法也就可以定义为类的形式,其中的this指针则会指向新创建的对象。在后面可以看到,这时对象名可以起到一个命名空间的作用,这是使用JavaScript进行面向对象程序设计的一个技巧。例如:
以下是引用片段:
代码:
var namespace1=new Object(); namespace1.class1=function(){ //初始化对象的代码 } var obj1=new namespace1.class1();
由于对象属性(方法)的动态变化特性,一个对象的两个属性(方法)之间的互相引用,必须要通过this指针,而其他语言中,this关键字是可以省略的。如上面的例子中:
以下是引用片段:
代码:
obj1.getP=function(){ alert(this.p); //表面上this指针指向的是obj1 }
发表评论
-
转:我为什么向后端工程师推荐NodeJS
2011-09-08 23:10 1347出自http://cnodejs.org,转载请注明出处 ... -
转:Node.js 究竟是什么?
2011-09-05 09:19 948简介 如果您听说过 ... -
浅谈javascript面向对象编程
2010-06-23 07:27 941http://www.ioldfish.cn/?p=238 ... -
Jquery的回车事件
2010-02-07 16:36 1399$('#simpleSearchProjectFilt ... -
Jquery选择器大全
2009-09-27 14:57 7196http://hi.baidu.com/lpk1/blog/i ... -
jquery的extend和fn.extend
2009-07-21 17:33 6758http://hzjavaeyer.group.iteye.c ... -
Jquery each中跳出循环
2009-07-20 17:22 6924continue可以使用return true break可 ... -
Javascript悟透(3)
2009-07-16 14:38 1174当然,这个代码仅仅展示了“语法甘露”的概念。我们还 ... -
Javascript悟透(2)
2009-07-16 14:34 1065但要注意的是,用构造函数操作this对象创建出来的每一 ... -
Javascript悟透
2009-07-16 14:32 942http://www.cnblogs.com/leadzen/ ... -
Javascript的闭包
2009-07-16 08:52 1035http://www.felixwoo.com/archive ... -
Jquery技巧
2009-06-22 16:38 995http://jquery.group.iteye.com/g ... -
jquery之dialog的键盘事件
2009-03-10 11:55 1854$('#input_text').keyup(functi ... -
jquery之 each,extend
2009-02-20 11:51 1797$.each(obj, fn):通用的迭代函数。可用于近似地迭 ... -
jquery之 radio,checkbox,select
2009-02-19 15:52 1563获取一组radio被选中项的值 var item = $( ... -
JQuery的dialog只显示一次
2009-02-17 14:47 3106需要先初始化,在打开。 但是感觉没有YUI的dialog灵活。 ... -
Ant学习
2009-02-03 09:01 17641、available 判断一个资源是否可用,结果保存在pro ... -
EXT动态载入JS
2007-12-27 13:56 2889<html> <head> < ... -
JS内存泄漏
2007-12-21 01:40 1477访问一般的站点,你会发现大多数站点都会出现这类问题。的确,如果 ... -
JSON并没有人们想象中的那样安全
2007-12-21 01:32 1542作者:Joe Walker 我最近 ...
相关推荐
理解Javascript函数形式参数与arguments 在JavaScript中,函数的形式参数和arguments之间存在着微妙的关系。为了深入理解这方面的知识,我们需要首先了解形式参数和实际参数的概念。形式参数指的是定义方法时所明确...
理解javascript函数式编程中的闭包(closure)_.docx
深入理解JavaScript系列(2):揭秘命名函数表达式 深入理解JavaScript系列(3):全面解析Module模式 深入理解JavaScript系列(4):立即调用的函数表达式 深入理解JavaScript系列(5):强大的原型和原型链 ...
下面小编就为大家带来一篇深入理解JavaScript 函数。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
主要介绍了深入理解JavaScript函数参数(推荐)的相关资料,需要的朋友可以参考下
主要帮助大家理解javascript函数式编程中的闭包(closure)概念,通俗地讲, JavaScript 中每个的函数都是一个闭包,感兴趣的小伙伴们可以参考一下
最近在学习javascript的函数,函数是javascript的一等对象,想要学好javascript,就必须深刻理解函数。本人把学习的过程整理成文章,一是为了加深自己函数的理解,二是给读者提供学习的途径,避免走弯路。内容有些多...
javascript 函数式编程 范例 经典例子 让你对函数式编程有一个整体的理解
深入理解JavaScript系列(2):揭秘命名函数表达式 深入理解JavaScript系列(3):全面解析Module模式 深入理解JavaScript系列(4):立即调用的函数表达式 深入理解JavaScript系列(5):强大的原型和原型链 ...
深入理解JavaScript系列(2):揭秘命名函数表达式 深入理解JavaScript系列(3):全面解析Module模式 深入理解JavaScript系列(4):立即调用的函数表达式 ... 深入理解JavaScript系列(结局篇) 说明:此系列文档...
一次又一次的,我发现,那些有bug的Javascript代码是由于没有真正理解Javascript函数是如何工作而导致的(顺便说一下,许多那样的代码是我写的).JavaScript拥有函数式编程的特性, 当我们选择面对它的时候,这将成为我们...
如果你真正理解Javascript函数是如何调用工作的,那么就可以避免一些bug的发生; 首先让我们创建一个简单的函数,这个函数将在下文中使用,这个函数仅仅返回当前的this的值和两个提供的参数. 代码如下: function make...
深入理解JavaScript中的箭头函数.docx
重点介绍关于Javascript中变量和函数的应用。非常详细,还有关于变量和函数的案例,便于理解。
为了帮助大家快速和较好地理解JavaScript函数中的闭包,本文对JavaScript的闭包进行了分析并进行简易的代码演示,希望本文能够给有需要的人带来一点小小的帮助。