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 学习笔记(七)字符串的连接
Dec 31 Javascript
面向对象的Javascript之三(封装和信息隐藏)
Jan 27 Javascript
js二维数组排序的简单示例代码
Jan 24 Javascript
js定时调用方法成功后并停止调用示例
Apr 08 Javascript
js 求时间差的实现代码
Apr 26 Javascript
jQuery中借助deferred来请求及判断AJAX加载的实例讲解
May 24 Javascript
vue实现app页面切换动画效果实例
May 23 Javascript
react-router v4如何使用history控制路由跳转详解
Jan 09 Javascript
Vue中render函数的使用方法
Jan 31 Javascript
vue+VeeValidate 校验范围实例详解(部分校验,全部校验)
Oct 19 Javascript
JS使用canvas中的measureText方法测量字体宽度示例
Feb 02 Javascript
vue 解决setTimeOut和setInterval函数无效报错的问题
Jul 30 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/03 咖啡文化
discuz Passport 通行证 整合笔记
2008/06/30 PHP
php cache类代码(php数据缓存类)
2010/04/15 PHP
PHP可逆加密/解密函数分享
2012/09/25 PHP
PHP批量去除BOM头代码分享
2015/06/26 PHP
PHP可变变量学习小结
2015/11/29 PHP
php自定义函数br2nl实现将html中br换行符转换为文本输入中换行符的方法【与函数nl2br功能相反】
2017/02/17 PHP
PHP随机数函数rand()与mt_rand()的讲解
2019/03/25 PHP
PHP实现时间日期友好显示实现代码
2019/09/08 PHP
分享别人写的一个小型js框架
2007/08/13 Javascript
javascript 四则运算精度修正函数代码
2010/05/31 Javascript
jQuery学习笔记之Helloworld
2010/12/22 Javascript
javascript截取字符串(通过substring实现并支持中英文混合)
2013/06/24 Javascript
提高NodeJS中SSL服务的性能
2014/07/15 NodeJs
JavaScript控制两个列表框listbox左右交换数据的方法
2015/03/18 Javascript
Ajax使用原生态JS验证用户名是否存在
2020/05/26 Javascript
javascript 显示全局变量与隐式全局变量的区别
2017/02/09 Javascript
jQuery列表检索功能实现代码
2017/07/17 jQuery
vue toggle做一个点击切换class(实例讲解)
2018/03/13 Javascript
vue webpack开发访问后台接口全局配置的方法
2018/09/18 Javascript
微信小程序页面间传值与页面取值操作实例分析
2019/04/30 Javascript
解决vue 子组件修改父组件传来的props值报错问题
2019/11/09 Javascript
js判断浏览器的环境(pc端,移动端,还是微信浏览器)
2020/12/24 Javascript
js实现无缝轮播图效果
2020/03/09 Javascript
Python中文件遍历的两种方法
2014/06/16 Python
tensorflow如何继续训练之前保存的模型实例
2020/01/21 Python
基于nexus3配置Python仓库过程详解
2020/06/15 Python
python opencv角点检测连线功能的实现代码
2020/11/24 Python
大宝sod蜜广告词
2014/03/21 职场文书
《棉鞋里的阳光》教学反思
2014/04/24 职场文书
高中学生评语大全
2014/04/25 职场文书
学期评语大全
2014/04/30 职场文书
工作总结与自我评价
2014/09/18 职场文书
2014年信息中心工作总结
2014/12/17 职场文书
创业计划书之冷饮店
2019/09/27 职场文书
Oracle 11g数据库使用expdp每周进行数据备份并上传到备份服务器
2022/06/28 Oracle