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 问答知识整理
Feb 11 Javascript
JS小功能(操作Table--动态添加删除表格及数据)实现代码
Nov 28 Javascript
页面内容排序插件jSort使用方法
Oct 10 Javascript
学习javascript面向对象 掌握创建对象的9种方式
Jan 04 Javascript
VUEJS实战之修复错误并且美化时间(2)
Jun 13 Javascript
AngularJS  自定义指令详解及实例代码
Sep 14 Javascript
Angular4编程之表单响应功能示例
Dec 13 Javascript
详解React Native 屏幕适配(炒鸡简单的方法)
Jun 11 Javascript
layui 解决富文本框form表单提交为空的问题
Oct 26 Javascript
vue中更改数组中属性,在页面中不生效的解决方法
Oct 30 Javascript
Vue实现图片轮播组件思路及实例解析
May 11 Javascript
在vue中import()语法不能传入变量的问题及解决
Apr 01 Vue.js
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
PHP7新特性foreach 修改示例介绍
2016/08/26 PHP
php 查找数组元素提高效率的方法详解
2017/05/05 PHP
PHP异常处理定义与使用方法分析
2017/07/25 PHP
PHP堆栈调试操作简单示例
2018/06/15 PHP
Yii框架自定义数据库操作组件示例
2019/11/11 PHP
如何实现动态删除javascript函数
2007/05/27 Javascript
javascript字符串替换函数如何一次性全部替换掉
2015/10/30 Javascript
JavaScript知识点总结之如何提高性能
2016/01/15 Javascript
JS前端笔试题分析
2016/12/19 Javascript
微信小程序 用户数据解密详细介绍
2017/01/09 Javascript
Angularjs过滤器实现动态搜索与排序功能示例
2017/12/13 Javascript
详解node child_process模块学习笔记
2018/01/24 Javascript
layer.alert回调函数执行关闭弹窗的实例
2019/09/11 Javascript
jsonp格式前端发送和后台接受写法的代码详解
2019/11/07 Javascript
vue中全局路由守卫中替代this操作(this.$store/this.$vux)
2020/07/24 Javascript
Python操作列表之List.insert()方法的使用
2015/05/20 Python
Python 网页解析HTMLParse的实例详解
2017/08/10 Python
django中的HTML控件及参数传递方法
2018/03/20 Python
使用Python的Dataframe取两列时间值相差一年的所有行方法
2018/07/10 Python
python for循环输入一个矩阵的实例
2018/11/14 Python
Python 循环终止语句的三种方法小结
2019/06/24 Python
利用Python复制文件的9种方法总结
2019/09/02 Python
Python调用scp向服务器上传文件示例
2019/12/22 Python
Python实现剪刀石头布小游戏(与电脑对战)
2019/12/31 Python
python wav模块获取采样率 采样点声道量化位数(实例代码)
2020/01/22 Python
django执行原始查询sql,并返回Dict字典例子
2020/04/01 Python
Python sqlalchemy时间戳及密码管理实现代码详解
2020/08/01 Python
Europcar比利时:租车
2019/08/26 全球购物
班主任个人工作反思
2014/04/28 职场文书
技能比武方案
2014/05/21 职场文书
搞笑车尾标语
2014/06/23 职场文书
授权委托书样本
2014/09/25 职场文书
敬业奉献模范事迹材料
2014/12/24 职场文书
教师求职自荐信
2015/03/26 职场文书
Mysql中的触发器定义及语法介绍
2022/06/25 MySQL
spring 项目实现限流方法示例
2022/07/15 Java/Android