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 相关文章推荐
TinyMCE 新增本地图片上传功能
Nov 05 Javascript
Jquery实现弹出层分享微博插件具备动画效果
Apr 03 Javascript
jquery移除、绑定、触发元素事件使用示例详解
Apr 10 Javascript
javascript实现字符串反转的方法
Feb 05 Javascript
GitHub上一些实用的JavaScript的文件压缩解压缩库推荐
Mar 13 Javascript
JavaScript中splice与slice的区别
May 09 Javascript
详解react-router 4.0 下服务器如何配合BrowserRouter
Dec 29 Javascript
微信小程序修改swiper默认指示器样式的实例代码
Jul 18 Javascript
微信小程序中的canvas 文字断行和省略号显示功能的处理方法
Nov 14 Javascript
Vue结合后台导入导出Excel问题详解
Feb 19 Javascript
前端Vue项目详解--初始化及导航栏
Jun 24 Javascript
Echarts.js无法引入问题解决方案
Oct 30 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+AJAX实现无刷新注册(带用户名实时检测)
2006/12/02 PHP
PHP中date()日期函数有关参数整理
2011/07/19 PHP
PHP函数preg_match_all正则表达式的基本使用详细解析
2013/08/31 PHP
php统计时间和内存使用情况示例分享
2014/03/13 PHP
PHP实现生成唯一编号(36进制的不重复编号)
2014/07/01 PHP
写一段简单的PHP建立文件夹代码
2015/01/06 PHP
PHP实践教程之过滤、验证、转义与密码详解
2017/07/24 PHP
php将从数据库中获得的数据转换成json格式并输出的方法
2018/08/21 PHP
jQuery.autocomplete 支持中文输入(firefox)修正方法
2011/03/10 Javascript
jquery ajax中使用jsonp的限制解决方法
2013/11/22 Javascript
纯JavaScript实现获取onclick、onchange等事件的值
2014/12/29 Javascript
在web中js实现类似excel的表格控件
2016/09/01 Javascript
Kendo Grid editing 自定义验证报错提示的解决方法
2016/11/18 Javascript
JS 组件系列之Bootstrap Table的冻结列功能彻底解决高度问题
2017/06/30 Javascript
基于Vue 2.0 监听文本框内容变化及ref的使用说明介绍
2018/08/24 Javascript
总结javascript三元运算符知识点
2018/09/28 Javascript
关于angular浏览器兼容性问题的解决方案
2020/07/26 Javascript
解决ant Design中Select设置initialValue时的大坑
2020/10/29 Javascript
python with statement 进行文件操作指南
2014/08/22 Python
跟老齐学Python之关于循环的小伎俩
2014/10/02 Python
python分治法求二维数组局部峰值方法
2018/04/03 Python
Python logging设置和logger解析
2019/08/28 Python
Python使用微信接入图灵机器人过程解析
2019/11/04 Python
python绘制动态曲线教程
2020/02/24 Python
Python序列化pickle模块使用详解
2020/03/05 Python
python爬虫利用selenium实现自动翻页爬取某鱼数据的思路详解
2020/12/22 Python
CSS3 真的会替代 SCSS 吗
2021/03/09 HTML / CSS
惠普加拿大在线商店:HP加拿大
2017/09/15 全球购物
澳大利亚自然和有机的健康美容产品一站式商店:Ziani Beauty
2017/12/28 全球购物
HomeAway的巴西品牌:Alugue Temporada
2018/04/10 全球购物
C/C++程序员常见面试题一
2012/12/08 面试题
C++面试题目
2013/06/25 面试题
大学本科生的个人自我评价
2013/12/09 职场文书
2016年10月份红领巾广播稿
2015/12/21 职场文书
微信小程序调用python模型
2022/04/21 Python
vue里使用create, mounted调用方法
2022/04/26 Vue.js