盘点JavaScript中Function三大用途

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

坚守“ 做人真诚 · 做事靠谱 · 口碑至上 · 高效敬业 ”的价值观，专业网站建设服务10余年为成都茶艺设计小微创业公司专业提供成都定制网站营销网站建设商城网站建设手机网站建设小程序网站建设网站改版，从内容策划、视觉设计、底层架构、网页布局、功能开发迭代于一体的高端网站建设服务。

JavaScript中的Function（函数）对象

JavaScript中的Function对象是函数，函数的用途分为3类：

作为普通逻辑代码容器；

作为对象方法；

作为构造函数。

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

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

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

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

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

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

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

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

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

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

 执行结果如下：

 
 
 
    
  
  
  
  1. 1 
    2. 
  
  
  
  2. 2
    3.

而如果采用定义式，即：

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

那么会得到另一种结果：

 
 
 
    
  
  
  
  1. 2 
    2. 
  
  
  
  2. 2
    3.

即，在采用定义式创建同名函数时，后创建的函数会覆盖先创建的函数。这种差别是由于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. 
  
  
  
  2. dog.name=“heibao”; 
    3. 
  
  
  
  3. dog.age=“3months”; 
    4. 
  
  
  
  4. dog.shout=function(){ 
    5. 
  
  
  
  5. return“Hello,Mynameis“+this.name+”andIam”+this.age+”old!”; 
    6. 
  
  
  
  6. } 
    7. 
  
  
  
  7. dog.shout();//“Hello,MynameisheibaoandIam3monthsold!” 
    8. 
  
  
  
  8.

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

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

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

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

#p#3.作为构造函数

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

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

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

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

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

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

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

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

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

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

但是，最关键的是新创建的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. 
  
  
  
  2. dog.greet;//undefined
    3.

事实上，在Firefox中，__proto__属性也是可写的：

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

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

本文名称：盘点JavaScript中Function三大用途
文章分享：http://www.csdahua.cn/qtweb/news35/252135.html

网站建设、网络推广公司-快上网，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 快上网

成都快上网为您推荐相关内容

标签优化知识

分类信息网

网站建设方案　　 　卖链接　　 　成都租用服务器　　 　成都多线服务器托管　　 　网络营销推广　　 　美美搬家　　 　成都微商城　　 　成都封阳台　　 　南部网站建设　　 　四川平武网站建设　　 　成都响应式网站建设公司　　 　成都ssl证书认证　　 　szjierui.cn　　 　资阳服务器托管　　 　高端网站定制　　 　电信机房托管服务器　　 　乐尚佳花箱　　 　鼎尚理发店　　 　宇仓仓储　　 　眉山服务器租用