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 相关文章推荐
用js实现下载远程文件并保存在本地的脚本
May 06 Javascript
jQuery中parent()方法用法实例
Jan 07 Javascript
jQuery中noConflict()用法实例分析
Feb 08 Javascript
JS使用ajax方法获取指定url的head信息中指定字段值的方法
Mar 24 Javascript
将页面table内容与样式另存成excel文件的方法
Aug 05 Javascript
JavaScript制作颜色反转小游戏
Sep 25 Javascript
使用vue实现点击按钮滑出面板的实现代码
Jan 10 Javascript
jQuery实现的表格前端排序功能示例
Sep 18 jQuery
vue input 输入校验字母数字组合且长度小于30的实现代码
May 16 Javascript
在vue 中使用 less的教程详解
Sep 26 Javascript
详解vue中的computed的this指向问题
Dec 05 Javascript
mock.js实现模拟生成假数据功能示例
Jan 15 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学习笔记 面向对象的构造与析构方法
2011/06/13 PHP
php实现扫描二维码根据浏览器类型访问不同下载地址
2014/10/15 PHP
Linux系统下PHP-FPM的安装和配置教程
2015/08/17 PHP
在WordPress中使用PHP脚本来判断访客来自什么国家
2015/12/10 PHP
PHP的mysqli_stmt_init()函数讲解
2019/01/24 PHP
javascript处理table表格的代码
2010/12/06 Javascript
js网页中的(运行代码)功能实现思路
2013/02/04 Javascript
jquery $(this).attr $(this).val方法使用介绍
2013/10/08 Javascript
javascript运动详解
2015/07/06 Javascript
JS组件Bootstrap实现弹出框和提示框效果代码
2015/12/08 Javascript
JavaScript、jQuery与Ajax的关系
2016/01/24 Javascript
简述JavaScript提交表单的方式 (Using JavaScript Submit Form)
2016/03/18 Javascript
微信小程序 rpx 尺寸单位详细介绍
2016/10/13 Javascript
微信小程序开发教程-手势解锁实例
2017/01/06 Javascript
js编写简单的聊天室功能
2017/08/17 Javascript
简单实现js上传文件功能
2017/08/21 Javascript
ES6中Class类的静态方法实例小结
2017/10/28 Javascript
jQuery实现动态添加节点与遍历节点功能示例
2017/11/09 jQuery
webpack打包js文件及部署的实现方法
2017/12/18 Javascript
vue bus全局事件中心简单Demo详解
2018/02/26 Javascript
nodejs实现套接字服务功能详解
2018/06/21 NodeJs
Vue-router的使用和出现空白页,路由对象属性详解
2018/09/03 Javascript
js中的数组对象排序分析
2018/12/11 Javascript
浅谈JavaScript闭包
2019/04/09 Javascript
浅谈vue单页面中有多个echarts图表时的公用代码写法
2020/07/19 Javascript
浅谈vue项目,访问路径#号的问题
2020/08/14 Javascript
JavaScript代码简化技巧实例解析
2020/09/09 Javascript
对python3 一组数值的归一化处理方法详解
2018/07/11 Python
Python 新建文件夹与复制文件夹内所有内容的方法
2018/10/27 Python
Python使用os.listdir()和os.walk()获取文件路径与文件下所有目录的方法
2019/04/01 Python
在Python3 numpy中mean和average的区别详解
2019/08/24 Python
Tensorflow 1.0之后模型文件、权重数值的读取方式
2020/02/12 Python
DKNY品牌官网:纽约大都会时尚风格
2016/10/20 全球购物
JPA的特点
2014/10/25 面试题
个人作风建设剖析材料
2014/10/11 职场文书
导游词之安徽九华山
2019/09/18 职场文书