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 相关文章推荐
Jquery选择器 $实现原理
Dec 02 Javascript
jQuery实现的数值范围range2dslider选取插件特效多款代码分享
Aug 27 Javascript
JS实现对中文字符串进行utf-8的Base64编码的方法(使其与Java编码相同)
Jun 21 Javascript
AngularJS基础 ng-href 指令用法
Aug 01 Javascript
Vue应用部署到服务器的正确方式
Jul 15 Javascript
Vue.js学习笔记之修饰符详解
Jul 25 Javascript
JavaScript编程设计模式之观察者模式(Observer Pattern)实例详解
Oct 25 Javascript
Vue项目webpack打包部署到Tomcat刷新报404错误问题的解决方案
May 15 Javascript
webpack 样式加载的实现原理
Jun 12 Javascript
jquery.pager.js实现分页效果
Jul 29 jQuery
JavaScript实现沿五角星形线摆动的小圆实例详解
Jul 28 Javascript
JavaScript实现复选框全选和取消全选
Nov 20 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查询搜索引擎排名位置的代码
2010/01/05 PHP
laravel 5 实现模板主题功能(续)
2015/03/02 PHP
php语言中使用json的技巧及json的实现代码详解
2015/10/27 PHP
php实现网站文件批量压缩下载功能
2015/10/28 PHP
php 无限分类 树形数据格式化代码
2016/10/11 PHP
JQuery入门—编写一个简单的JQuery应用案例
2013/01/03 Javascript
Jquery 模板数据绑定插件的使用方法详解
2013/07/08 Javascript
seaJs的模块定义和模块加载浅析
2014/06/06 Javascript
灵活使用数组制作图片切换js实现
2016/07/28 Javascript
使用Javascript监控前端相关数据的代码
2016/10/27 Javascript
javascript 判断一个对象为数组的方法
2017/05/03 Javascript
AngularJS中ng-class用法实例分析
2017/07/06 Javascript
nodejs中sleep功能实现暂停几秒的方法
2017/07/12 NodeJs
Vue学习笔记进阶篇之vue-router安装及使用方法
2017/07/19 Javascript
Vue-cli项目获取本地json文件数据的实例
2018/03/07 Javascript
JS实现仿微信支付弹窗功能
2018/06/25 Javascript
JS实现方形抽奖效果
2018/08/27 Javascript
微信小程序实现炫酷的弹出式菜单特效
2019/01/28 Javascript
Element中的Cascader(级联列表)动态加载省\市\区数据的方法
2019/03/27 Javascript
一文快速详解前端框架 Vue 最强大的功能
2019/05/21 Javascript
ES6数组与对象的解构赋值详解
2019/06/14 Javascript
手把手带你搭建一个node cli的方法示例
2020/08/07 Javascript
[01:56]无止竞 再出发——中国军团出征2017年DOTA2国际邀请赛
2017/07/05 DOTA
利用Python的Twisted框架实现webshell密码扫描器的教程
2015/04/16 Python
python使用openCV遍历文件夹里所有视频文件并保存成图片
2020/01/14 Python
记录一下scrapy中settings的一些配置小结
2020/09/28 Python
英国最大的宠物商店:Pets at Home
2019/04/17 全球购物
英国景点门票网站:attractiontix
2019/08/27 全球购物
幼教个人求职信范文
2013/12/02 职场文书
超市重阳节活动方案
2014/02/10 职场文书
贸易跟单员英文求职信
2014/04/19 职场文书
团日活动总结报告
2014/06/25 职场文书
2014领导班子四风问题查摆思想汇报
2014/09/13 职场文书
房屋授权委托书范本
2014/10/07 职场文书
初三毕业感言
2015/07/31 职场文书
七年级作文之英语老师
2019/10/28 职场文书