展会信息港展会大全

js之Function原型 函数类型实际上是对象 具有属性和方法
来源:互联网   发布日期:2016-01-26 10:25:41   浏览:2952次  

导读:在ECMAScript中,Function(函数)类型实际上是对象。每个函数都是Function类型的实例,而且都与其他引用类型一样具有属性和方法。由于函数是对象,因此函数名实际上也是一个指向函数对象的指针。 1、三种函数声 ...

在ECMAScript中,Function(函数)类型实际上是对象。每个函数都是Function类型的实例,而且都与其他引用类型一样具有属性和方法。由于函数是对象,因此函数名实际上也是一个指向函数对象的指针。

1、三种函数声明的方式

1》第一种:普通方式声明函数

1 function box (num1,num2){

2 return num1+num2;

3 }

2》第二种:使用变量初始化的方式:

1 var box =function(num1,num2){

2 return num1+num2;

3 };

3》第三种:使用Function构造函数的方式

1 var box =new Function("num1",'num2','return num1+num2');

总结:第三种方式不推荐使用:因为要解析两次代码:第一次:解析常规的ECMAScript代码,第二次是解析传入构造函数中的字符串;所以影响性能。但是我们能从这种语法理解 函数是对象,函数名是指针 这个概念

2、作为值的函数

ECMAScript中的函数本身就是变量,所以函数也可以作为值来使用。也就是说,不仅可以传递参数一样把一个函数传递进另一个函数,而且也可以将一个函数作为另一个函数的结果返回。类似于 c# 中的 委托,令方法 像参数一样传递到另一个方法中。

复制代码

1 function box(sum,num){//将函数 以参数的 形式 传递进 另一个函数

2 return sum(num); //将函数作为返回值 进行返回

3 }

4

5 function sum(num){

6 return num+10;

7 }

8 alert(box(sum,10));//20

复制代码

3、函数内部的属性

在函数内部,有两个特殊的对象:arguments和this。arguments 是一个 类数组对象,包含着传入函数中的所有参数,主要用途是保存函数参数,但这个对象还有一个名叫callee的属性,该属性是一个指针,指向拥有这个 arguments对象的函数。

arguments属性的使用:

复制代码

1 function box(){

2 alert(arguments.length);

3 for(var i=0;i

4 alert(arguments[i]); //取到每一个传进来的参数

5 }

6 }

7

8 box(1,2,3,4);

复制代码

callee属性(是arguments的属性)

复制代码

1 //使用arguments.callee代替 自己

2 function sum(num){

3 if(num<=1){

4 return 1;

5 }

6 else{

7 return num * arguments.callee(num-1);

8 }

9 }

10 alert(sum(4));//24

复制代码

this对象:

和c#中的this大致相似。this对象引用的是函数以执行操作的对象,或者说函数调用语句所处的那个作用域。

PS:当在全局作用域中调用函数时,this对象引用的就是window。

复制代码

1 var color='红色';

2 alert(window.color);//红色 只要是全局作用域内的对象 就是 window下

3 alert(this.color)//红色 this位于全局作用域下,this引用的就是window对象

4 alert(color);//红色 可以省略 window直接输出

5

6 window.color='蓝色'; //等价于:var color='蓝色';

7 alert(this.color);//蓝色

8 alert(color);//蓝色

复制代码

this对象的经典的例子:

复制代码

1 var box={

2 color:'红色',

3 SayColor:function(){

4 alert(this.color); //this对象 指向的此作用域 范围内的 对象的引用(就是box的引用)

5 }

6 };

7 box.SayColor();

8

9 window.color='红色';

10 function SayColor(){

11 alert(this.color);//因为此方法位于 window下面,所以 方法内的this引用指向 window

12 }

13

14 SayColor();//红色

15

16 var box={

17 color:'蓝色的'

18 };

19 box.SayColor=window.SayColor; //赋值之后,SayColor中的this对象 指向 当前的 作用域 也就是 box对象

20 box.SayColor();//蓝色的

复制代码

4、匿名属性和方法

ECMAScript中的函数式对象,因此函数也有属性和方法。每个函数都含有两个属性:length和prototype。其中,length表示函数希望接收的命名参数的个数

PS:prototype属性:它是保存所有实例方法的真正所在,也就是原型。这个属性。我们将在面向对象一章详细介绍。而prototype 下有两个方法:apply()和call(),每个函数都包含这两个 非继承 而来的方法。这两个方法的用途都在特定的作用域中调用函数,实际上等于设置函数体内this对象的值

length属性:

1 function sum(num1,num2){

2 return num1+num2;

3 }

4 alert(sum.length);

apply()方法:

复制代码

1 function sum(num1,num2){

2 return num1+num2;

3 }

4

5 function num(num1,num2){

6 //第一个参数:此方法要执行的作用域(就是这个方法执行的作用域),第二个参数是 要传递到sum函数中的参数

7 return sum.apply(this,[num1,num2]); //参数数组[num1,num2]可以使用 arguments替换

8 }

9

10 alert(num(10,10));

复制代码

call()方法:

call()方法执行的效果和apply是一样的,不同之处是:他们之间传递参数的方式的不同

1 function box(num1,num2){

2 return sum.call(this,num1,num2);//从第二参数开始想函数内传递参数,而不是传递一个参数数组

3 //其实可以直接 调用函数,上面做法只是演示一下 apply 和call的用法

4 }

5

6 alert(box(1,2));

call()和apply()方法的真正的用武之地不是上面(因为上面实现没意义),而是:改变方法的作用域,冒充方法的调用者进行调用方法,解决的是 对象之间的耦合 ,降低了 耦合度

复制代码

1 var color='红色';

2

3 function SayColor(){

4 alert(this.color);

5 }

6 SayColor();//红色

7

8 var box={

9 color:'蓝色'

10 };

11

12 SayColor.call(box);//蓝色 (改变了 方法的 作用域,但是没有 使用 box.SayColor=SayColor;(耦合度太高了),降低了耦合度) 在运行call(box)方法的时候,SayColor()的运行环境已经变成了box对象里了。

13 SayColor.call(this);//红色

14 SayColor.call(window);//红色

15

16 box.Say();

复制代码

call()和apply()方法的最大好处:扩充作用域,并且 对象和方法之间不用发生任何的 耦合 关系

赞助本站

人工智能实验室

相关热词: Function 函数 js

AiLab云推荐
推荐内容
展开

热门栏目HotCates

Copyright © 2010-2024 AiLab Team. 人工智能实验室 版权所有    关于我们 | 联系我们 | 广告服务 | 公司动态 | 免责声明 | 隐私条款 | 工作机会 | 展会港