JavaScript引用类型Function实例详解


Posted in Javascript onAugust 09, 2018

本文实例讲述了JavaScript引用类型Function。分享给大家供大家参考,具体如下:

Function类型

函数是对象,函数名是指针:每个函数都是Function类型的实例。由于函数是对象,因此函数名是一个指向函数对象的指针,不会与某个函数绑定,一个函数可能会有多个名字。

function getSum(a, b) {
  return a + b;
}
alert(getSum(2, 3));//5
var copy = getSum;
alert(copy(2, 3));//5
getSum = null;
alert(copy(2, 3));//5

定义函数的方式有三种:函数声明函数表达式Function构造函数

Function构造函数接收任意数量的参数,前面的参数枚举了函数的参数,最后一个参数是函数体。一般不推荐使用Function构造函数定义函数。

var getSum = new Function("a", "b", "return a + b";

JavaScript没有函数重载的概念,若声明了两个同名函数,则后面的函数会覆盖前面的函数。

由于函数名本身是变量,因此函数也可以作为值来使用,不仅可以传递一个函数作为参数,还可以将函数作为返回值。

function callFunction(func, arguments) {
  return func(arguments);
}
function sayHello(name) {
  return "Hello, " + name;
}
var result = callFunction(sayHello, "Alice");
alert(result);//Hello, Alice

①、函数声明

function 函数名称(参数|可选) { 函数体 }

例:

function func1(){// 声明,程序的一部分
  function func() {// 声明,函数体的一部分
    ...//函数体
  }
}

②、函数表达式

function 函数名称|可选(参数|可选) { 函数体 }

例1:

var fun = function func() {};//表达式,赋值表达式的一部分

例2:

new function func(){};//表达式,new表达式

例3:

(function func(){});
//表达式,包含在分组操作符——括号()内,括号()内只能包含表达式

例4:

[function func() {}];//表达式,数组初始化器内只能是表达式

例5:

1, function func() {};//表达式,逗号只能操作表达式

③、函数构造器

函数构造器创建的函数的[[Scope]]属性仅包含全局对象。

<script>
  var a = 1;
  func1();
  function func1() {
    var a = 2;
    var b = 3;
    var func2 = new Function("alert(a); alert(b);");
    func2();//1,b is not defined
  }
</script>

函数构造器创建的函数func2可以从全局对象中取得变量a,但全局对象中没有b,因此报错:b未定义。

函数声明和函数表达式的区别

1)函数声明在进入上下文阶段创建,在代码执行阶段就已经可用了,函数表达式则是在代码执行阶段才创建,所以函数声明可以提升,但函数表达式则不能。

函数声明提升:

func();//Function declaration
function func(){
  alert("Function declaration");
}

函数表达式不能提升:

func();//报错:func is not a function
var func = function (){
  alert("Function expression");
}

2)函数声明影响变量对象VO,也就是存储在上下文的VO中的变量对象,函数表达式不影响变量对象VO,不存在于变量对象中,这意味着既不可能通过名称在函数声明之前调用它,也不可能在声明之后调用它。但是,函数表达式在递归调用中可以通过名称调用自身。

例1:

alert(func); //报错:func is not a function。定义之前不可用,因为它在代码执行阶段创建
(function func() {});
alert(func); //报错:func is not a function。定义之后也不可用,因为它不在变量对象VO中

例2:

(function func(param) {
  if (param) {
    return;
  }
  func(true);//func可用,递归调用可以通过名称调用自身
})();
func(); // func is not a function,外部不可用

3)函数声明只能出现在程序或函数体内,不能出现在表达式或块({ … })中,如if、while或for语句中。因为JavaScript无块级作用域,只有函数和全局作用域。 函数表达式出现在表达式的位置。

函数声明:有的浏览器会返回if,而有的浏览器会返回else。

if (true) {
  function func() {
    alert('if');
  }
}
else {
  function func() {
    alert('else');
  }
}
func();

函数表达式:所有浏览器都返回if。

var func;
if (true) {
  func = function() {
    alert('if');
  };
}
else {
  func = function() {
    alert('else');
  };
}
func();

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
javascript实现通过表格绘制颜色填充矩形的方法
Apr 21 Javascript
浅析四种常见的Javascript声明循环变量的书写方式
Oct 14 Javascript
jQuery validate+artdialog+jquery form实现弹出表单思路详解
Apr 18 Javascript
基于JS模仿windows文件按名称排序效果
Jun 29 Javascript
bootstrap模态框消失问题的解决方法
Dec 02 Javascript
Angular 4.0学习教程之架构详解
Sep 12 Javascript
javascript连接mysql与php通过odbc连接任意数据库的实例
Dec 27 Javascript
vue实现自定义多选与单选的答题功能
Jul 05 Javascript
vue-socket.io跨域问题有效解决方法
Feb 11 Javascript
JS监听组合按键思路及实现过程
Apr 17 Javascript
从Node.js事件触发器到Vue自定义事件的深入讲解
Jun 26 Javascript
js+canvas实现转盘效果(两个版本)
Sep 13 Javascript
jquery ajax加载数据前台渲染方式 不用for遍历的方法
Aug 09 #jQuery
JavaScript引用类型之基本包装类型实例分析【Boolean、Number和String】
Aug 09 #Javascript
vue修改对象的属性值后页面不重新渲染的实例
Aug 09 #Javascript
vue异步axios获取的数据渲染到页面的方法
Aug 09 #Javascript
vue2.0的虚拟DOM渲染思路分析
Aug 09 #Javascript
Angular动画实现的2种方式以及添加购物车动画实例代码
Aug 09 #Javascript
Vue.js 通过jQuery ajax获取数据实现更新后重新渲染页面的方法
Aug 09 #jQuery
You might like
php xml-rpc远程调用
2008/12/19 PHP
CI框架装载器Loader.php源码分析
2014/11/04 PHP
php计算指定目录下文件占用空间的方法
2015/03/13 PHP
详解WordPress开发中过滤属性以及Sql语句的函数使用
2015/12/25 PHP
完美解决php 导出excle的.csv格式的数据时乱码问题
2017/02/18 PHP
浅谈thinkphp的nginx配置,以及重写隐藏index.php入口文件方法
2019/10/12 PHP
Extjs ajax同步请求时post方式参数发送方式
2009/08/05 Javascript
XMLHTTPRequest的属性和方法简介
2010/11/23 Javascript
详解JavaScript函数
2015/12/01 Javascript
jQuery技巧之让任何组件都支持类似DOM的事件管理
2016/04/05 Javascript
浅谈json取值(对象和数组)
2016/06/24 Javascript
ECMAScript6轮播图实践知识总结
2016/08/17 Javascript
AngularJS使用ng-repeat指令实现下拉框
2016/08/23 Javascript
js带闹铃功能的倒计时代码
2016/09/29 Javascript
ionic环境配置及问题详解
2017/06/27 Javascript
浅谈Angular2 模块懒加载的方法
2017/10/04 Javascript
vue2.0 + ele的循环表单及验证字段方法
2018/09/18 Javascript
js实现动态时钟
2020/03/12 Javascript
antdesign-vue结合sortablejs实现两个table相互拖拽排序功能
2021/01/08 Vue.js
[42:20]2014 DOTA2华西杯精英邀请赛5 24 DK VS NewBee
2014/05/25 DOTA
解决python中遇到字典里key值为None的情况,取不出来的问题
2018/10/17 Python
django+echart绘制曲线图的方法示例
2018/11/26 Python
解决Python设置函数调用超时,进程卡住的问题
2019/08/08 Python
Python使用百度翻译开发平台实现英文翻译为中文功能示例
2019/08/08 Python
业务代表的岗位职责
2013/11/16 职场文书
体育老师的教学自我评价分享
2013/11/19 职场文书
公交公司毕业生求职信
2014/02/15 职场文书
中班开学寄语
2014/04/04 职场文书
人大代表选举标语
2014/10/07 职场文书
2014党的群众路线教育实践活动学习心得体会
2014/10/31 职场文书
乡镇安全生产月活动总结
2015/05/08 职场文书
机械生产实习心得体会
2016/01/22 职场文书
DIV CSS实现网页背景半透明效果
2021/12/06 HTML / CSS
Python读写yaml文件
2022/03/20 Python
python装饰器代码解析
2022/03/23 Python
Python实现自动玩连连看的脚本分享
2022/04/04 Python