JavaScript Function函数类型介绍


Posted in Javascript onApril 08, 2015

// 在JS中,Function(函数)类型实际上是对象;每个函数都是Function类型的实例;而且都与其他引用类型一样具有属性和方法;

// 由于函数是对象,因此函数名实际上也是一个指向函数对象的指针;

一 函数的声明方式

1.函数声明方式
  function box(num1,num2){
    return num1+num2;
  }

2.函数表达式定义函数
  var box = function(num1,num2){// 通过变量box即可引用函数;
    return num1+num2;
  };








// 注意函数末尾有一个分号,就像声明其他变量时一样;

var another = box;



 // 使用不带圆括号的函数名是访问函数指针;而非调用函数;


console.log(another(10,10));

3.使用Function构造函数
  var box = new Function('num1','num2','return num1+num2');
// 第三种方式不推荐,这种语法会导致解析两次代码(第一次解析常规JS代码,第二次解析传入构造函数中的字符串),从而影响性能;
// 可以通过这种语法来理解"函数是对象,函数名是指针"的概念;

二 作为值的函数

// JS中的函数名本身就是变量,所以函数也可以作为值来使用;
// 也就是说,不仅可以像传参数一样把一个函数传递给另一个函数,而且可以将一个函数作为另一个函数的结果返回;
  function box(sumFunction,num){
// 无论第一个参数传递进来的是什么函数,
    return sumFunction(num);

 // 它都会返回执行第一参数后的结果;
  }
  function sum(num){
    return num+10;
  }
  // 传递函数到另一个函数里;


// 要访问函数的指针不执行函数的话,须去掉函数名后的圆括号;
  var result = box(sum,10);      // =>20;

三 函数内部属性

// 函数内部有两个特殊的对象:arguments和this;

// 1.arguments:是一个类数组对象,包含着传入函数中的所有参数,主要用途是保存函数参数;
// arguments这个对象还有一个名叫callee的属性,该属性是一个指针,指向拥有这个arguments对象的函数;
  function box(num){
    if(num<=1){
      return 1;
    }else{
      return num*arguments.callee(num-1);  // 使用arguments.callee来执行box本身;
    }
  }

// 2.this:引用的是函数据以操作的对象,或者说函数调用语句所处的作用域;
// 当在全局作用域调用函数时,this对象引用的就是window;
  window.color = "red";
  alert(this.color);        // 打印全局的color;=>red;
  var box = {
    color:'blue',
    sayColor:function(){
      alert(this.color);    // 打印局部的color;=>blue;
    }
  };

四 函数属性和方法

// JS中的函数是对象,因此函数也有属性和方法;包含length和prototype;

// length属性:表示函数希望接收到命名参数的个数;
  function box(name,age){
    alert(name+age);
  }
  alert(box.length);        // 2s

// prototype属性:它是保存所有实例方法的真正所在,也就是原型;
// prototype包含两个方法:apply()和call(),每个函数都包含这两个非继承而来的方法;
// 这两个方法的用途都在特定的作用域中调用函数,实际上等于设置函数体内this对象的值;
  var color = 'red';
  var box = {
    color = 'blue';
  }
  function sayColor({
    alert(this.color);
  });
  sayColor();           // 作用域在window;
  sayColor.call(this);      // 作用域在window;
  sayColor.call(window);     // 作用域在window;
  sayColor.call(box);       // 作用域在box,对象冒充;=>red;
// 使用call(box)方法的时候,sayColor()方法的运行环境已经变成了box对象里了;
// 使用call()或apply()来扩充作用域的最大好处,就是对象不需要与方法发生任何耦合关系;
// 耦合:相互关联的意思,扩展和维护会发生连锁反应;
// 也就是说,box对象和sayColor()方法之间不会有多余的关联操作,比如:box.sayColor = sayColor;

  function Animal(){  
    this.name = "Animal";  
    this.showName = function(){  
      alert(this.name);  
    }  
  }  
  function Cat(){  
    this.name = "Cat";  
  }  
  var animal = new Animal();  
  var cat = new Cat();  
  //通过call或apply方法,将原本属于Animal对象的showName()方法交给对象cat来使用。  
  //输入结果为"Cat"  
  animal.showName.call(cat,",");  
  //animal.showName.apply(cat,[]);

五 小结
1 // 函数实际上是Function类型的实例,因此函数也是对象;而这一点正式JavaScript最有特色的地方;
2 // 由于函数对象,所以函数也拥有方法,可以用来增强其行为;

Javascript 相关文章推荐
js中的window.open返回object的错误的解决方法
Aug 15 Javascript
网页禁用右键实现代码(JavaScript代码)
Oct 29 Javascript
Iframe 自适应高度并实时监控高度变化的js代码
Oct 30 Javascript
jQuery Tools tab使用介绍
Jul 14 Javascript
原生js和jquery实现图片轮播淡入淡出效果
Apr 23 Javascript
JavaScript让Textarea支持tab按键的方法
Jun 26 Javascript
详解Javascript模板引擎mustache.js
Jan 20 Javascript
原生js实现jquery函数animate()动画效果的简单实例
Aug 21 Javascript
Bootstrap作品展示站点实战项目2
Oct 14 Javascript
JS正则表达式学习之贪婪和非贪婪模式实例总结
Dec 26 Javascript
vue-cli项目代理proxyTable配置exclude的方法
Sep 20 Javascript
JS的时间格式化和时间戳转换函数示例详解
Jul 27 Javascript
JavaScript 模块化编程(笔记)
Apr 08 #Javascript
JavaScript DOM事件(笔记)
Apr 08 #Javascript
javascript笛卡尔积算法实现方法
Apr 08 #Javascript
JavaScript获取指定元素位置的方法
Apr 08 #Javascript
javascript跨域原因以及解决方案分享
Apr 08 #Javascript
JavaScript 里的类数组对象
Apr 08 #Javascript
cookie的secure属性详解
Apr 08 #Javascript
You might like
JS与PHP向函数传递可变参数的区别实例代码
2011/05/18 PHP
解决FastCGI 进程超过了配置的活动超时时限的问题
2013/07/03 PHP
php根据用户语言跳转相应网页
2015/11/04 PHP
Yii2中关联查询简单用法示例
2016/08/10 PHP
Smarty模板常见的简单应用分析
2016/11/15 PHP
PHP单元测试配置与使用方法详解
2019/12/27 PHP
用JS写的一个TableView控件代码
2010/01/23 Javascript
range 标准化之获取
2011/08/28 Javascript
javascript淡入淡出效果的实现思路
2012/03/31 Javascript
javaScript 动态访问JSon元素示例代码
2013/08/30 Javascript
javascript实现C语言经典程序题
2015/11/29 Javascript
js验证框架实现代码分享
2016/05/18 Javascript
Nodejs下用submit提交表单提示cannot post错误的解决方法
2016/11/21 NodeJs
Angular4学习笔记之实现绑定和分包
2017/08/01 Javascript
node.js基于fs模块对系统文件及目录进行读写操作的方法详解
2017/11/10 Javascript
详解如何使用PM2将Node.js的集群变得更加容易
2017/11/15 Javascript
Vue实现按钮旋转和移动位置的实例代码
2018/08/09 Javascript
vue路由权限校验功能的实现代码
2020/06/07 Javascript
[27:02]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS LGD第三场
2014/05/24 DOTA
[02:12]打造更好的电竞完美世界:完美盛典回顾篇
2018/12/19 DOTA
python append、extend与insert的区别
2016/10/13 Python
python检测文件夹变化,并拷贝有更新的文件到对应目录的方法
2018/10/17 Python
Python实现的对本地host127.0.0.1主机进行扫描端口功能示例
2019/02/15 Python
python+os根据文件名自动生成文本
2019/03/21 Python
Python hashlib模块加密过程解析
2019/11/05 Python
Python的形参和实参使用方式
2019/12/24 Python
Django基于客户端下载文件实现方法
2020/04/21 Python
使用Python将图片转正方形的两种方法实例代码详解
2020/04/29 Python
python 带时区的日期格式化操作
2020/10/23 Python
matplotlib 画动态图以及plt.ion()和plt.ioff()的使用详解
2021/01/05 Python
深入研究HTML5实现图片压缩上传功能
2016/03/25 HTML / CSS
意大利体育用品网上商城:Nencini Sport
2016/08/18 全球购物
《莫泊桑拜师》教学反思
2014/04/23 职场文书
十佳标兵事迹材料
2014/08/18 职场文书
教师节作文之小学四年级
2019/09/03 职场文书
python自然语言处理之字典树知识总结
2021/04/25 Python