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 表单中textarea字数限制实现代码
Dec 07 Javascript
node.js中的fs.chmod方法使用说明
Dec 18 Javascript
jQuery仿gmail实现fixed布局的方法
May 27 Javascript
Express实现前端后端通信上传图片之存储数据库(mysql)傻瓜式教程(一)
Dec 10 Javascript
Node.js编写组件的三种实现方式
Feb 25 Javascript
JQuery Ajax WebService传递参数的简单实例
Nov 02 Javascript
jQuery实现复制到粘贴板功能
Feb 11 Javascript
自带气泡提示的vue校验插件(vue-verify-pop)
Apr 07 Javascript
你点的 ES6一些小技巧,请查收
Apr 25 Javascript
解决Layui数据表格的宽高问题
Sep 28 Javascript
小程序选项卡以及swiper套用(跨页面)
Jun 19 Javascript
vue+elementUI 实现内容区域高度自适应的示例
Sep 26 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-fpm的配置详解
2013/06/03 PHP
PHP可变函数的使用详解
2013/06/14 PHP
如何利用http协议发布博客园博文评论
2015/08/03 PHP
PHP堆栈调试操作简单示例
2018/06/15 PHP
关于Laravel-admin的基础用法总结和自定义model详解
2019/10/08 PHP
js字母大小写转换实现方法总结
2013/11/13 Javascript
使用javascript控制cookie显示和隐藏背景图
2014/02/12 Javascript
javascript操纵OGNL标签示例代码
2014/06/16 Javascript
js Object2String方便查看js对象内容
2014/11/24 Javascript
jQuery网页右侧广告跟随滚动代码分享
2020/04/20 Javascript
js实现接收表单的值并将值拼在表单action后面的方法
2015/11/23 Javascript
基于javascript bootstrap实现生日日期联动选择
2016/04/07 Javascript
jqGrid用法汇总(全经典)
2016/06/28 Javascript
js replace(a,b)之替换字符串中所有指定字符的方法
2016/08/17 Javascript
JS与jQuery实现ListBox上移,下移,左移,右移操作功能示例
2018/05/31 jQuery
js blob类型url的视频下载问题的解决
2019/11/29 Javascript
如何使用 vue-cli 创建模板项目
2020/11/19 Vue.js
基于JavaScript实现轮播图效果
2021/01/02 Javascript
Python+pyplot绘制带文本标注的柱状图方法
2019/07/08 Python
python并发编程 Process对象的其他属性方法join方法详解
2019/08/20 Python
python实现视频读取和转化图片
2019/12/10 Python
python 实用工具状态机transitions
2020/11/21 Python
Flask-SocketIO服务端安装及使用代码示例
2020/11/26 Python
基于css3实现漂亮便签样式
2013/03/18 HTML / CSS
html5教程调用绘图api画简单的圆形代码分享
2013/12/04 HTML / CSS
ProBikeKit澳大利亚:自行车套件,跑步和铁人三项装备
2016/11/30 全球购物
Fox Racing英国官网:越野摩托车和山地自行车服装
2020/02/26 全球购物
探亲邀请信范文
2014/01/30 职场文书
四查四看剖析材料
2014/02/14 职场文书
音乐教师求职信
2014/06/28 职场文书
运动会广播稿诗歌版
2014/09/12 职场文书
公司2014年度工作总结
2014/12/10 职场文书
汽车车尾标语大全
2015/08/11 职场文书
30岁前绝不能错过的10本书
2019/08/08 职场文书
奖学金发言稿(范文)
2019/08/21 职场文书
Go语言测试库testify使用学习
2022/07/23 Golang