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 相关文章推荐
用jQuery打造TabPanel效果代码
May 22 Javascript
firebug的一个有趣现象介绍
Nov 30 Javascript
js 鼠标移动显示图片的简单实例
Dec 25 Javascript
基于jQuery实现左右图片轮播(原理通用)
Dec 24 Javascript
浅谈JavaScript 标准对象
Jun 02 Javascript
BootStrap Typeahead自动补全插件实例代码
Aug 10 Javascript
JS实现页面载入时随机显示图片效果
Sep 07 Javascript
vue 里面使用axios 和封装的示例代码
Sep 01 Javascript
Vue中使用Sortable的示例代码
Apr 07 Javascript
vue2.0+ 从插件开发到npm发布的示例代码
Apr 28 Javascript
初学node.js中实现删除用户路由
May 27 Javascript
通过原生vue添加滚动加载更多功能
Nov 21 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摘要生成函数(无乱码)
2012/02/04 PHP
php写的带缓存数据功能的mysqli类
2012/09/06 PHP
ThinkPHP模板判断输出Present标签用法详解
2014/06/30 PHP
PHP随机生成唯一HASH值自定义函数
2015/04/20 PHP
CodeIgniter配置之routes.php用法实例分析
2016/01/19 PHP
项目中应用Redis+Php的场景
2016/05/22 PHP
javascript高亮效果的二种实现方法
2008/09/14 Javascript
jQuery验证Checkbox是否选中的代码 推荐
2011/09/04 Javascript
jQuery的$.proxy()应用示例介绍
2014/04/03 Javascript
jquery带下拉菜单和焦点图代码分享
2015/08/24 Javascript
jQuery网页右侧广告跟随滚动代码分享
2020/04/20 Javascript
学习javascript面向对象 实例讲解面向对象选项卡
2016/01/04 Javascript
很棒的一组js图片轮播特效
2017/01/12 Javascript
Bootstrap模态窗口源码解析
2017/02/08 Javascript
jquery easyui dataGrid动态改变排序字段名的方法
2017/03/02 Javascript
Bootstrap 表单验证formValidation 实现远程验证功能
2017/05/17 Javascript
jQuery实现IE输入框完成placeholder标签功能的方法
2017/09/20 jQuery
详解基于node.js的脚手架工具开发经历
2019/01/28 Javascript
微信小程序用户拒绝授权的处理方法详解
2019/09/20 Javascript
细述Javascript的加法运算符的具体使用
2019/10/18 Javascript
微信小程序用canvas画图并分享
2020/03/09 Javascript
JavaScript arguments.callee作用及替换方案详解
2020/09/02 Javascript
vue的webcamjs集成方式
2020/11/16 Javascript
python使用os模块的os.walk遍历文件夹示例
2014/01/27 Python
连接Python程序与MySQL的教程
2015/04/29 Python
Python中map,reduce,filter和sorted函数的使用方法
2015/08/17 Python
Python+django实现文件下载
2016/01/17 Python
python获取array中指定元素的示例
2019/11/26 Python
Python一行代码解决矩阵旋转的问题
2019/11/30 Python
关于PyCharm安装后修改路径名称使其可重新打开的问题
2020/10/20 Python
Currentbody澳大利亚:美容仪专家
2019/11/11 全球购物
2019年Java 最常见的 面试题
2016/10/19 面试题
聚美优品广告词改编
2014/03/14 职场文书
总结表彰大会主持词
2014/03/26 职场文书
自我管理的活动方案
2014/08/25 职场文书
SpringBoot实现quartz定时任务可视化管理功能
2021/08/30 Java/Android