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实现拆分姓名的方法(纯JS版)
May 08 Javascript
jquery 实现input输入什么div图层显示什么
Jun 15 Javascript
AngularJS基础知识
Dec 21 Javascript
基于jQuery插件实现环形图标菜单旋转切换特效
May 15 Javascript
点击页面任何位置隐藏div的实现方法
Sep 05 Javascript
jQuery实现点击后高亮背景固定显示的菜单效果【附demo源码下载】
Sep 21 Javascript
vue+ElementUI实现订单页动态添加产品数据效果实例代码
Jul 13 Javascript
AngularJS实现图片上传和预览功能的方法分析
Nov 08 Javascript
vue2.0 elementUI制作面包屑导航栏
Feb 22 Javascript
vue自定义底部导航栏Tabbar的实现代码
Sep 03 Javascript
layui自定义ajax左侧三级菜单
Jul 26 Javascript
js实现上传按钮并显示缩略图小轮子
May 04 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中实现用数组妩媚地生成要执行的sql语句
2015/07/10 PHP
PHP7多线程搭建教程
2017/04/21 PHP
php readfile下载大文件失败的解决方法
2017/05/22 PHP
用JS实现一个页面多个css样式实现
2008/05/29 Javascript
三种检测iPhone/iPad设备方向的方法
2014/04/23 Javascript
javascript面向对象之共享成员属性与方法及prototype关键字用法
2015/01/13 Javascript
JavaScript实现函数返回多个值的方法
2015/06/09 Javascript
基于JavaScript实现弹出框效果
2016/02/19 Javascript
Jquery ajax请求导出Excel表格的实现代码
2016/06/08 Javascript
JavaScript获取当前url根目录(路径)
2016/06/17 Javascript
JS仿hao123导航页面图片轮播效果
2016/09/01 Javascript
javascript跨域请求包装函数与用法示例
2016/11/03 Javascript
详解Vue监听数据变化原理
2017/03/08 Javascript
JavaScript上传文件时不用刷新页面方法总结(推荐)
2017/08/15 Javascript
jQuery实现的中英文切换功能示例
2019/01/11 jQuery
基于node简单实现RSA加解密的方法步骤
2019/03/21 Javascript
详解Vue.js 作用域、slot用法(单个slot、具名slot)
2019/10/15 Javascript
微信小程序canvas分享海报功能
2019/10/31 Javascript
微信小程序实现购物车功能
2020/11/18 Javascript
从局部变量和全局变量开始全面解析Python中变量的作用域
2016/06/16 Python
python中urllib.unquote乱码的原因与解决方法
2017/04/24 Python
Python装饰器基础概念与用法详解
2018/12/22 Python
pytorch中tensor.expand()和tensor.expand_as()函数详解
2019/12/27 Python
python实现企业微信定时发送文本消息的示例代码
2020/11/24 Python
CSS3 3D位移translate效果实例介绍
2016/05/03 HTML / CSS
Michael Kors香港官网:美国奢侈品品牌
2019/12/26 全球购物
俄罗斯厨房产品购物网站:COOK HOUSE
2021/03/15 全球购物
美德好少年事迹材料
2014/01/19 职场文书
研究生考核个人自我鉴定
2014/03/27 职场文书
护士节活动总结
2014/08/29 职场文书
求职自荐信范文(优秀篇)
2015/03/27 职场文书
python 批量压缩图片的脚本
2021/06/02 Python
Java基础之线程锁相关知识总结
2021/06/30 Java/Android
日本十大血腥动漫,那些被禁播的动漫盘点
2022/03/21 日漫
Python基本的内置数据类型及使用方法
2022/04/13 Python
Python中npy和mat文件的保存与读取
2022/04/24 Python