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 相关文章推荐
网页里控制图片大小的相关代码
Jun 13 Javascript
jQuery.Validate 使用笔记(jQuery Validation范例 )
Jun 25 Javascript
火狐下table中创建form导致两个table之间出现空白
Sep 02 Javascript
Angularjs中UI Router全攻略
Jan 29 Javascript
javascript HTML5 Canvas实现圆盘抽奖功能
Apr 11 Javascript
RequireJS使用注意细节
May 15 Javascript
jQuery基本选择器(实例及表单域value的获取方法)
May 20 Javascript
js 实现省市区三级联动菜单效果
Feb 20 Javascript
vue使用watch 观察路由变化,重新获取内容
Mar 08 Javascript
详解angularjs 学习之 scope作用域
Jan 15 Javascript
Vue2.0+Vux搭建一个完整的移动webApp项目的示例
Mar 19 Javascript
JavaScript常用内置对象用法分析
Jul 09 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
上海无线电三厂简史修改版
2021/03/01 无线电
使用PHP socke 向指定页面提交数据
2008/07/23 PHP
php 处理上百万条的数据库如何提高处理查询速度
2010/02/08 PHP
php下删除一篇文章生成的多个静态页面
2010/08/08 PHP
php set_include_path函数设置 include_path 配置选项
2016/10/30 PHP
php中static 静态变量和普通变量的区别
2016/12/01 PHP
PHP实时统计中文字数和区别
2019/02/28 PHP
一个无限级XML绑定跨框架菜单(For IE)
2007/01/27 Javascript
用js将内容复制到剪贴板兼容浏览器
2014/03/18 Javascript
20个实用的JavaScript技巧分享
2014/11/28 Javascript
javascript使用switch case实现动态改变超级链接文字及地址
2014/12/16 Javascript
全面理解JavaScript中的继承(必看)
2016/06/16 Javascript
iframe中使用jquery进行查找的方法【案例分析】
2016/06/17 Javascript
Vuejs第七篇之Vuejs过渡动画案例全面解析
2016/09/05 Javascript
详解angularJs中自定义directive的数据交互
2017/01/13 Javascript
javascript 中关于array的常用方法详解
2017/05/05 Javascript
Vue如何实现响应式系统
2018/07/11 Javascript
详解react native页面间传递数据的几种方式
2018/11/07 Javascript
vue自定义指令限制输入框输入值的步骤与完整代码
2020/08/30 Javascript
[03:12]完美世界DOTA2联赛PWL DAY6集锦
2020/11/05 DOTA
Python将阿拉伯数字转换为罗马数字的方法
2015/07/10 Python
python读取图片并修改格式与大小的方法
2018/07/24 Python
python3实现多线程聊天室
2018/12/12 Python
Python中查看变量的类型内存地址所占字节的大小
2019/06/26 Python
Python+OpenCV+图片旋转并用原底色填充新四角的例子
2019/12/12 Python
Pycharm及python安装详细步骤及PyCharm配置整理(推荐)
2020/07/31 Python
Pandas读取csv时如何设置列名
2020/06/02 Python
win10下python3.8的PIL库安装过程
2020/06/08 Python
css3 iphone玻璃透明气泡完美实现
2013/03/20 HTML / CSS
万户网络JAVA程序员岗位招聘笔试试卷
2013/01/08 面试题
外贸销售员求职的自我评价
2013/11/23 职场文书
个人纪律作风整改措施思想汇报
2014/10/12 职场文书
《迟到》教学反思
2016/02/24 职场文书
坚持不是死撑,更重要的是心态
2019/08/19 职场文书
MySQL系列之五 视图、存储函数、存储过程、触发器
2021/07/02 MySQL
一文弄懂MySQL索引创建原则
2022/02/28 MySQL