js之Function原型

摘要:
使用Function构造函数的方法是1varbox=newFunction(“num1”,num){//将函数传递到另一个Function 2retrnsum(num);i++){4alert(arguments[i]);call attribute(arguments的属性)//使用arguments。call将自己替换为2functionsum(num){3if(num<

在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<arguments.length;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。

js之Function原型第1张js之Function原型第2张
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在全局范围内

this对象的经典的例子:

js之Function原型第3张js之Function原型第4张
 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();//蓝色的
this经典例子

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()方法:

js之Function原型第5张js之Function原型第6张
 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));
apply()方法

call()方法:

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

js之Function原型第7张js之Function原型第8张
1 function box(num1,num2){
2        return sum.call(this,num1,num2);//从第二参数开始想函数内传递参数,而不是传递一个参数数组
3        //其实可以直接 调用函数,上面做法只是演示一下 apply 和call的用法
4     }
5 
6 alert(box(1,2));
call()方法

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()方法的最大好处:扩充作用域,并且 对象和方法之间不用发生任何的 耦合 关系

免责声明:文章转载自《js之Function原型》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇Linux下的IPC机制NuGet的本地服务器安装与Package的发布下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

tomcat启动卡在了 At least one JAR was scanned for TLDs yet contained no TLDs 的根本原因与解决办法

1.前言 有时候服务器开启时启动不了,卡在了 org.apache.jasper.servlet.TldScanner.scanJars At least one JAR was scanned for TLDs yet contained no TLDs 又没有报错,一直在等待。。。刚开始我是看的一脸懵逼 。 百度找了很多博客,基本都是说要修改tomca...

golang学习之生成代码文档

go doc 工具会从 Go 程序和包文件中提取顶级声明的首行注释以及每个对象的相关注释,并生成相关文档。 一般用法: go doc package 获取包的文档注释,例如:go doc fmt 会显示使用 godoc 生成的 fmt 包的文档注释。 go doc package/subpackage 获取子包的文档注释,例如:go doc cont...

算法学习笔记——感知机原理及其代码实现

感知机原理及代码实现 上篇讲完梯度下降,这篇博客我们就来好好整理一下一个非常重要的二分类算法——感知机,这是一种二分类模型,当输入一系列的数据后,输出的是一个二分类变量,如0或1 1. 算法原理 1.1 知识引入 说起分类算法,博主想到的另一个算法是逻辑回归,而感知机从原理上来说和回归类算法最大的区别就是引入了几何的思想,将向量放到了高维空间上去想象。首先...

C++指针(二)

  指针提供间接操作其所指对象的功能。与对迭代器进行解引用操作一样,对指针进行解引用可访问它所指的对象,*操作符将获取指针所指的对象:     string s("hello world");     string *sp = &s;         cout<<*sp;             //结果为:hello world   ...

C/C++头文件一览

C/C++头文件一览 //////////////////////////////////////////////////////////////////////////C头文件(C89,C95)(C++98,C++03也包含) include <assert.h>    //诊断库include <ctype.h>     //...

html5中调用摄像头拍照

方法: getCamera: 获取摄像头管理对象 对象: Camera: 摄像头对象 CameraOption: JSON对象。调用摄像头的參数 PopPosition: JSON对象,弹出拍照或摄像界面指示位置 回调方法: CameraSuccessCallback: 调用摄像头操作成功回调 CameraErrorCallback: 摄像头操作...