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中“+”的陷阱深刻理解
Dec 04 Javascript
js获取class的所有元素
Mar 28 Javascript
轻松实现javascript数据双向绑定
Nov 11 Javascript
原生JS实现旋转木马式图片轮播插件
Apr 25 Javascript
JS作为值的函数用法示例
Jun 20 Javascript
jQuery读取XML文件的方法示例
Feb 03 Javascript
jQuery EasyUI 组件加上“清除”功能实例详解
Apr 11 jQuery
Angular网络请求的封装方法
May 22 Javascript
Bootstrap Table 双击、单击行获取该行及全表内容
Aug 31 Javascript
详解webpack4.x之搭建前端开发环境
Mar 28 Javascript
vuex state中的数组变化监听实例
Nov 06 Javascript
ant-design-vue按需加载的坑的解决
May 14 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 彩色文字实现代码
2009/06/29 PHP
php set_time_limit()函数的使用详解
2013/06/05 PHP
浅谈PHP中foreach/in_array的使用
2015/11/02 PHP
微信开发之php表单微信中自动提交两次问题解决办法
2017/01/08 PHP
Laravel中的Auth模块详解
2017/08/17 PHP
PHP创建文件及写入数据(覆盖写入,追加写入)的方法详解
2019/02/15 PHP
Thinkphp5.0框架视图view的模板布局用法分析
2019/10/12 PHP
JS字符串累加Array不一定比字符串累加快(根据电脑配置)
2012/05/14 Javascript
Extjs4 Treegrid 使用心得分享(经验篇)
2013/07/01 Javascript
JQuery设置文本框和密码框得到焦点时的样式
2013/08/30 Javascript
JS设置网页图片vspace和hspace属性的方法
2015/04/01 Javascript
javascript无刷新评论实现方法
2015/05/13 Javascript
JS实现黑色大气的二级导航菜单效果
2015/09/18 Javascript
JavaScript性能优化之小知识总结
2015/11/20 Javascript
Atitit.js的键盘按键事件捆绑and事件调度
2016/04/01 Javascript
微信小程序 action-sheet底部菜单详解
2016/10/27 Javascript
JS日程管理插件FullCalendar简单实例
2017/02/07 Javascript
React Native实现地址挑选器功能
2017/10/24 Javascript
vue-cli 组件的导入与使用教程详解
2018/04/11 Javascript
Vue中使用sass实现换肤功能
2018/09/07 Javascript
Vue监听数据渲染DOM完以后执行某个函数详解
2018/09/11 Javascript
详解SPA中前端路由基本原理与实现方式
2018/09/12 Javascript
JavaScript显式数据类型转换详解
2019/03/18 Javascript
解决一个微信号同时支持多个环境网页授权问题
2019/08/07 Javascript
解决layer.open弹出框不能获取input框的值为空的问题
2019/09/10 Javascript
Python跳出循环语句continue与break的区别
2014/08/25 Python
利用Python绘制数据的瀑布图的教程
2015/04/07 Python
浅谈python字典多键值及重复键值的使用
2016/11/04 Python
Pycharm学习教程(1) 定制外观
2017/05/02 Python
Python实现一个简单的验证码程序
2017/11/03 Python
python IDLE添加行号显示教程
2020/04/25 Python
普通简短的个人自我评价
2014/02/15 职场文书
机关道德讲堂实施方案
2014/03/15 职场文书
分公司经理任命书
2014/06/05 职场文书
机关保密工作承诺书
2015/05/04 职场文书
小区物业管理2015年度工作总结
2015/10/22 职场文书