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 相关文章推荐
javascript attachEvent绑定多个事件执行顺序问题
Oct 20 Javascript
jquery通过load获取文件的内容并跳到锚点的方法
Jan 29 Javascript
javascript实现unicode与ASCII相互转换的方法
Dec 10 Javascript
Flask中获取小程序Request数据的两种方法
May 12 Javascript
jQuery序列化后的表单值转换成Json
Jun 16 jQuery
Javascript实现基本运算器
Jul 15 Javascript
React应用中使用Bootstrap的方法
Aug 15 Javascript
详解tween.js的使用教程
Sep 14 Javascript
vue webpack实用技巧总结
Apr 24 Javascript
3分钟读懂移动端rem使用方法(推荐)
May 06 Javascript
解决前后端分离 vue+springboot 跨域 session+cookie失效问题
May 13 Javascript
微信小程序学习总结(二)样式、属性、模板操作分析
Jun 04 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
php之static静态属性与静态方法实例分析
2015/07/30 PHP
php fseek函数读取大文件两种方法
2016/10/12 PHP
关于laravel 日志写入失败问题汇总
2019/10/17 PHP
PHP高并发和大流量解决方案整理
2019/12/24 PHP
基于prototype的validation.js发布2.3.4新版本,让你彻底脱离表单验证的烦恼
2006/12/06 Javascript
一个不错的应用,用于提交获取文章内容,不推荐用
2007/03/03 Javascript
JS实现浏览器状态栏文字从右向左弹出效果代码
2015/10/27 Javascript
JavaScript原生xmlHttp与jquery的ajax方法json数据格式实例
2015/12/04 Javascript
AngularJS 表达式详细讲解及实例代码
2016/07/26 Javascript
在javaScript中检测数据类型的几种方式小结
2017/03/04 Javascript
Javascript之图片的延迟加载的实例详解
2017/07/24 Javascript
原生JS实现网页手机音乐播放器 歌词同步播放的示例
2018/02/02 Javascript
JavaScript根据json生成html表格的示例代码
2018/10/24 Javascript
Vue 事件处理操作实例详解
2019/03/05 Javascript
javascript中的闭包概念与用法实践分析
2019/07/26 Javascript
vue中组件通信的八种方式(值得收藏!)
2019/08/09 Javascript
基于axios 的responseType类型的设置方法
2019/10/29 Javascript
详解node和ES6的模块导出与导入
2020/02/19 Javascript
js实现盒子移动动画效果
2020/08/09 Javascript
python操作MySQL数据库的方法分享
2012/05/29 Python
用Python从0开始实现一个中文拼音输入法的思路详解
2019/07/20 Python
python实现的登录与提交表单数据功能示例
2019/09/25 Python
appium+python adb常用命令分享
2020/03/06 Python
用html5的canvas和JavaScript创建一个绘图程序的简单实例
2016/07/06 HTML / CSS
塑料制成的可水洗的编织平底鞋和鞋子:Rothy’s
2018/09/16 全球购物
node中使用shell脚本的方法步骤
2021/03/23 Javascript
养生餐厅创业计划书范文
2014/03/26 职场文书
道路交通事故人身损害赔偿协议书
2014/11/19 职场文书
2016公司年会通知范文
2015/04/25 职场文书
党支部创先争优公开承诺书
2015/04/30 职场文书
紧急迫降观后感
2015/06/15 职场文书
2015年教师节感言
2015/08/03 职场文书
学习十八大的感悟
2015/08/11 职场文书
市场营销计划书
2019/04/24 职场文书
浅谈如何提高PHP代码质量之端到端集成测试
2021/05/28 PHP
Linux中Nginx的防盗链和优化的实现代码
2021/06/20 Servers