盘点JavaScript中Function三大用途
创始人
2024-07-15 15:40:54
0

JavaScript中的Function对象是函数,本文向大家简单介绍一下Script中的Function(函数)对象的三大用途,相信本文介绍一定会让你有所收获。

JavaScript中的Function(函数)对象

JavaScript中的Function对象是函数,函数的用途分为3类:

作为普通逻辑代码容器;

作为对象方法;

作为构造函数。

1.作为普通逻辑代码容器

  1. functionmultiply(x,y){  
  2. returnx*y;  

函数multiply封装了两位数的乘法运算公式:

  1. varproduct=multiply(128,128);//product=16384 
  2.  

创建函数实例的方式有3种。第一种是声明式,即像声明变量一样,将通过function(){}标识符创建的匿名函数直接赋值给变量,以该变量作为调用时的函数名称:

  1. varmultiply=function(x,y){  
  2. returnx*y;  

第二种是定义式,即以function关键字后跟函数名称及(){}来直接定义命名函数,前面第一个multiply函数就是通过定义式创建的。

第三种是构造函数式,即通过new运算符调用构造函数Function来创建函数。这种方式极不常用,因此就不作介绍了。

在创建函数的3种方式中,声明式和定义式还存在细微的差别。比如下列代码中的函数采用声明式:

  1. varexample=function(){  
  2. return1;  
  3. }  
  4. example();  
  5. varexample=function(){  
  6. return2;  
  7. }  
  8. example();  
  9.  

 执行结果如下:

  1. 1  

而如果采用定义式,即:

  1. functionexample(){  
  2. return1;  
  3. }  
  4. example();  
  5. functionexample(){  
  6. return2;  
  7. }  
  8. example(); 

那么会得到另一种结果:

  1. 2  

即,在采用定义式创建同名函数时,后创建的函数会覆盖先创建的函数。这种差别是由于JavaScript解释引擎的工作机制所导致的。JavaScript解释引擎在执行任何函数调用之前,首先会在全局作用域中注册以定义式创建的函数,然后再依次执行函数调用。由于注册函数时,后定义的函数重写了先定义的函数,因此无论调用语句位于何处,执行的都是后定义的函数。相反,对于声明式创建的函数,JavaScript解释引擎会像对待任何声明的变量一样,等到执行调用该变量的代码时才会对变量求值。由于JavaScript代码是从上到下顺序执行的,因此当执行第一个example()调用时,example函数的代码就是首先定义代码;而当执行第二个example()调用时,example函数的代码又变成了后来定义的代码。#p#

2.作为对象方法

JavaScript在解析代码时,会为声明或定义的函数指定调用对象。所谓调用对象,就是函数的执行环境。如果函数体内有以关键字this声明的变量,则this引用的就是调用对象。

事实上,在普通的函数中,也存在调用对象,只不过这个调用对象是默认的全局window对象而已。例如:

varproduct=window.multiply(128,128);//product=16384

这说明,默认情况下,在全局作用域中定义或声明的函数的调用对象就是window。

在面向对象编程中,通常将作为对象成员的函数称为方法。例如:

  1. vardog={};  
  2. dog.name=“heibao”;  
  3. dog.age=“3months”;  
  4. dog.shout=function(){  
  5. return“Hello,Mynameis“+this.name+”andIam”+this.age+”old!”;  
  6. }  
  7. dog.shout();//“Hello,MynameisheibaoandIam3monthsold!”  
  8.  

 有意思的是,对象也可以借用其他对象的方法:

  1. varcat={};  
  2. cat.name=“xiaohua”;  
  3. cat.age=“2years”;  
  4. cat.greet=dog.shout;  
  5. cat.greet();//“Hello,MynameisxiaohuaandIam2yearsold!” 

另外,使用函数对象的call和apply方法,还可以动态指定函数或方法的调用对象:

  1. dog.shout.call(cat);  
  2. //“Hello,MynameisxiaohuaandIam2yearsold!”  
  3.  
  4. 或者  
  5.  
  6. dog.shout.apply(cat);  
  7. //“Hello,MynameisxiaohuaandIam2yearsold!”  

#p#3.作为构造函数

JavaScript是通过构造函数来模拟面向对象语言中的类的。例如:

  1. functionAnimal(sort,character){  
  2. this.sort=sort;  
  3. this.character=character;  

以Animal作为构造函数,就可以像下面这样创建一个新对象:

  1. vardog=newAnimal(”mammal”,”fourlegs”);  
  2.  

创建dog的对象的过程如下:首先,new运算符创建一个空对象({}),然后以这个空对象为调用对象调用函数Animal,为这个空对象添加两个属性sort和character,接着,再将这个空对象的默认constructor属性修改为构造函数的名称(即Animal;空对象创建时默认的constructor属性值是Object),并且将空对象的__proto__属性设置为指向Animal.prototype——这就是所谓的对象初始化。最后,返回初始化完毕的对象。这里将返回的新对象赋值给了变量dog。

  1. dog.sort;//mammal  
  2. dog.character;//fourlegs  
  3. dog.constructor;//Animal 

聪明的读者结合前面介绍的内容,可能会认为使用new运算符调用构造函数创建对象的过程也可以像下面这样来实现:

  1. vardog={};  
  2. Animal.call(dog,“mammal”,”fourlegs”); 

表面上看,这两行代码与vardog=newAnimal(”mammal”,”fourlegs”);是等价的,其实却不是。虽然通过指定函数的执行环境能够部分达到初始化对象的目的,例如空对象dog确实获得了sort和character这两个属性:

  1. dog.sort;//mammal  
  2. dog.character;//fourlegs  
  3. dog.constructor;//Object——注意,没有修改dog对象默认的constructor属性 

但是,最关键的是新创建的dog对象失去了通过Animal.prototype属性继承其他对象的能力。只要与前面采用new运算符调用构造函数创建对象的过程对比一下,就会发现,new运算符在初始化新对象期间,除了为新对象添加显式声明的属性外,还会对新对象进行了一番“暗箱操作”——即将新对象的constructor属性重写为Animal,将新对象的__proto__属性设置为指向Animal.prototype。虽然手工“初始化对象”也可以将dog.constructor重写为Animal,但根据ECMA262规范,对象的__proto__属性对开发人员是只读的,对它的设置只能在通过new运算符创建对象时由JavaScript解释引擎替我们完成。
JavaScript是基于原型继承的,如果不能正确设置对象的__proto__属性,那么就意味着默认的继承机制会失效:

  1. Animal.prototype.greet=“Hi,goodlucky!”;  
  2. dog.greet;//undefined 

事实上,在Firefox中,__proto__属性也是可写的:

  1. Animal.prototype.greet=“Hi,goodlucky!”;  
  2. dog.__proto__=Animal.prototype;  
  3. dog.greet;//Hi,goodlucky! 

但这样做只能在Firefox中行得通。考虑到在兼容多浏览器,必须依赖于new运算符,才能实现基于原型的继承。

【编辑推荐】

  1. 深入学习JavaScript中Function对象语法
  2. 解析JS中定义Function的两种实用方法
  3. prototype.js的Ajax对IE8兼容问题解决方案
  4. Javascript数组创建及其常见操作
  5. JavaScript调试工具解决IE6等多版本共存问题 

 

相关内容

热门资讯

如何允许远程连接到MySQL数... [[277004]]【51CTO.com快译】默认情况下,MySQL服务器仅侦听来自localhos...
如何利用交换机和端口设置来管理... 在网络管理中,总是有些人让管理员头疼。下面我们就将介绍一下一个网管员利用交换机以及端口设置等来进行D...
施耐德电气数据中心整体解决方案... 近日,全球能效管理专家施耐德电气正式启动大型体验活动“能效中国行——2012卡车巡展”,作为该活动的...
Windows恶意软件20年“... 在Windows的早期年代,病毒游走于系统之间,偶尔删除文件(但被删除的文件几乎都是可恢复的),并弹...
20个非常棒的扁平设计免费资源 Apple设备的平面图标PSD免费平板UI 平板UI套件24平图标Freen平板UI套件PSD径向平...
德国电信门户网站可实时显示全球... 德国电信周三推出一个门户网站,直观地实时提供其安装在全球各地的传感器网络检测到的网络攻击状况。该网站...
着眼MAC地址,解救无法享受D... 在安装了DHCP服务器的局域网环境中,每一台工作站在上网之前,都要先从DHCP服务器那里享受到地址动...
为啥国人偏爱 Mybatis,... 关于 SQL 和 ORM 的争论,永远都不会终止,我也一直在思考这个问题。昨天又跟群里的小伙伴进行...