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 动态选中下拉框
Nov 26 Javascript
求数组最大最小值方法适用于任何数组
Aug 16 Javascript
JavaScript 获取任一float型小数点后两位的小数
Jun 30 Javascript
使用js Math.random()函数生成n到m间的随机数字
Oct 09 Javascript
javascript实现随机读取数组的方法
Aug 03 Javascript
JavaScript知识点总结之如何提高性能
Jan 15 Javascript
快速解决Canvas.toDataURL 图片跨域的问题
May 10 Javascript
JavaScript的Vue.js库入门学习教程
May 23 Javascript
对Js OOP编程 创建对象的一些全面理解
Jul 26 Javascript
javascript表单控件实例讲解
Sep 13 Javascript
vue.js input框之间赋值方法
Aug 24 Javascript
vue根据值给予不同class的实例
Sep 29 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在XP下IIS和Apache2服务器上的安装
2006/09/05 PHP
PHP基于单例模式实现的数据库操作基类
2016/01/15 PHP
Mootools 1.2教程 Fx.Tween的使用
2009/09/15 Javascript
ExtJS Window 最小化的一种方法
2009/11/18 Javascript
jquery 锁定弹出层实现代码
2010/02/23 Javascript
Microsoft Ajax Minifier 压缩javascript的方法
2010/03/05 Javascript
Javascript Function对象扩展之延时执行函数
2010/07/06 Javascript
jquery中eq和get的区别与使用方法
2011/04/14 Javascript
关于js遍历表格的实例
2013/07/10 Javascript
js(jQuery)获取时间的方法及常用时间类搜集
2013/10/23 Javascript
JS图片切换的具体方法(带缩略图版)
2013/11/12 Javascript
浅谈javascript的Touch事件
2015/09/27 Javascript
实例详解jQuery结合GridView控件的使用方法
2016/01/04 Javascript
JS检测移动端横竖屏的代码
2016/05/30 Javascript
MUI 上拉刷新/下拉加载功能实例代码
2017/04/13 Javascript
Vuex之理解state的用法实例
2017/04/19 Javascript
详解Node使用Puppeteer完成一次复杂的爬虫
2018/04/18 Javascript
微信小程序动态生成二维码的实现代码
2018/07/25 Javascript
js简单遍历获取对象中的属性值的方法示例
2019/06/19 Javascript
Vue实现鼠标经过文字显示悬浮框效果的示例代码
2020/10/14 Javascript
Unicode和Python的中文处理
2017/03/19 Python
Python调用C# Com dll组件实战教程
2017/10/12 Python
python中numpy的矩阵、多维数组的用法
2018/02/05 Python
python障碍式期权定价公式
2019/07/19 Python
Python图像处理库PIL的ImageFilter模块使用介绍
2020/02/26 Python
python中通过pip安装库文件时出现“EnvironmentError: [WinError 5] 拒绝访问”的问题及解决方案
2020/08/11 Python
关于python tushare Tkinter构建的简单股票可视化查询系统(Beta v0.13)
2020/10/19 Python
职业培训师职业生涯规划
2014/02/18 职场文书
2014年两会学习心得体会
2014/03/10 职场文书
个人欠款担保书
2014/05/20 职场文书
硕士生找工作求职信
2014/07/05 职场文书
武当山导游词
2015/02/03 职场文书
2015年学生管理工作总结
2015/05/26 职场文书
与死神共舞观后感
2015/06/15 职场文书
redis实现排行榜功能
2021/05/24 Redis
python生成可执行exe控制Microsip自动填写号码并拨打功能
2021/06/21 Python