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 实现GridView异步排序、分页的代码
Feb 06 Javascript
让innerText在firefox火狐和IE浏览器都能用的写法
May 14 Javascript
js history对象简单实现返回和前进
Oct 30 Javascript
文本域光标操作的jQuery扩展分享
Mar 10 Javascript
javascript学习笔记(一)基础知识
Sep 30 Javascript
bootstrap中的 form表单属性role=&quot;form&quot;的作用详解
Jan 20 Javascript
微信小程序出现wx.navigateTo页面不跳转问题的解决方法
Dec 26 Javascript
jQuery 获取除某指定对象外的其他对象 ( :not() 与.not())
Oct 10 jQuery
基于html+css+js实现简易计算器代码实例
Feb 28 Javascript
小程序实现上传视频功能
Aug 18 Javascript
html实现随机点名器的示例代码
Apr 02 Javascript
JavaScript实现班级抽签小程序
May 19 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
将数组写入txt文件 var_export
2009/04/21 PHP
PHP操作MongoDB时的整数问题及对策说明
2011/05/02 PHP
PHP中使用hidef扩展代替define提高性能
2015/04/09 PHP
简单介绍PHP的责任链编程模式
2015/08/11 PHP
laravel Model 执行事务的实现
2019/10/10 PHP
Laravel框架处理用户的请求操作详解
2019/12/20 PHP
用javascript实现的支持lrc歌词的播放器
2007/05/17 Javascript
js onpropertychange输入框 事件获取属性
2009/03/26 Javascript
锋利的jQuery 第三章章节总结的例子
2010/03/23 Javascript
6个DIV 135或246间隔一秒轮番显示效果
2010/07/24 Javascript
JavaScript浏览器选项卡效果
2010/08/25 Javascript
Js实现手机发送验证码时按钮延迟操作
2014/06/20 Javascript
吐槽一下我所了解的Node.js
2014/10/08 Javascript
分享20款美化网站的 jQuery Lightbox 灯箱插件
2014/10/10 Javascript
jquery删除数组中重复元素
2016/12/05 Javascript
jquery.uploadView 实现图片预览上传功能
2017/08/10 jQuery
详解Vue基于 Nuxt.js 实现服务端渲染(SSR)
2018/04/05 Javascript
layui前端框架之table表数据的刷新方法
2018/08/17 Javascript
React 源码中的依赖注入方法
2018/11/07 Javascript
vue实现购物车的监听
2020/04/20 Javascript
python使用新浪微博api上传图片到微博示例
2014/01/10 Python
Python网络编程详解
2017/10/31 Python
Python中多个数组行合并及列合并的方法总结
2018/04/12 Python
用Python获取摄像头并实时控制人脸的实现示例
2019/07/11 Python
Python实现疫情通定时自动填写功能(附代码)
2020/05/27 Python
scrapy处理python爬虫调度详解
2020/11/23 Python
详解CSS3新增的背景属性
2019/12/25 HTML / CSS
英国川宁茶官方网站:Twinings茶
2019/05/21 全球购物
2013年大学生的自我鉴定
2013/10/24 职场文书
硕士研究生自我鉴定
2013/11/08 职场文书
岗位职责的构建方法
2014/02/01 职场文书
四风查摆问题自查报告
2014/10/10 职场文书
详解MySQL的Seconds_Behind_Master
2021/05/18 MySQL
python利用while求100内的整数和方式
2021/11/07 Python
css3新特性的应用示例分析
2022/03/16 HTML / CSS
动画《平凡职业成就世界最强》宣布制作OVA
2022/04/01 日漫