JavaScript引用类型Function实例详解

 更新时间:2018年08月09日 10:40:43   作者:筱葭  
这篇文章主要介绍了JavaScript引用类型Function,结合实例形式详细分析了javascript引用类型Function概念、定义、原理、相关使用技巧与操作注意事项,需要的朋友可以参考下

本文实例讲述了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常用函数技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结

希望本文所述对大家JavaScript程序设计有所帮助。

相关文章

  • uniapp微信小程序强制更新解决示例详解

    uniapp微信小程序强制更新解决示例详解

    这篇文章主要为大家介绍了uniapp微信小程序强制更新解决的示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-10-10
  • 如何用threejs实现实时多边形折射

    如何用threejs实现实时多边形折射

    这篇文章主要介绍了如何用threejs实现实时多边形折射,对three.js库感兴趣的同学,可以参考下
    2021-05-05
  • axios的简单封装以及使用实例代码

    axios的简单封装以及使用实例代码

    一般我们在做一个大型项目的时候,需要用到很多接口时,我们为了方便使用,就把接口封装起来,这篇文章主要给大家介绍了关于axios简单封装以及使用的相关资料,需要的朋友可以参考下
    2021-06-06
  • 基于JS实现01支付后的10秒倒计时

    基于JS实现01支付后的10秒倒计时

    这是一个通过js实现的支付后的页面,点击支付会跳出一个弹窗,提示你是否要确定支付,确定后进入付后界面,该页面有着10秒倒计时,计时结束后便会返回原界面,也可以选择立刻返回,来返回主页面,这篇文章主要介绍了基于JS实现01支付后的10秒倒计时,需要的朋友可以参考下
    2023-03-03
  • JavaScript鼠标移动事件以及实战案例

    JavaScript鼠标移动事件以及实战案例

    在学习JS中我对鼠标移动事件进行了一些总结,需要的可以作参考,下面这篇文章主要给大家介绍了关于JavaScript鼠标移动事件以及实战案例的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-05-05
  • Jquery代码实现图片轮播效果(一)

    Jquery代码实现图片轮播效果(一)

    经理交给我一个网站新闻资讯网页开发的活儿,对于我这样的java程序员,没有接触过网页设计这么高端的东东,该怎么搞呢,去度娘那搜索到不少结果,而且很大部分都是用jquery做的,于是根据自己的一些的理解,提供了这篇jquery轮播效果的讲解,有需要的朋友可以来参考下
    2015-08-08
  • splitChunks精细控制代码分割降低包大小

    splitChunks精细控制代码分割降低包大小

    这篇文章主要为大家介绍了如何使用splitChunks精细控制代码分割来实现降低包大小的示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-07-07
  • JavaScript实现HTML5游戏断线自动重连的方法

    JavaScript实现HTML5游戏断线自动重连的方法

    这篇文章主要介绍了JavaScript实现HTML5游戏断线自动重连的方法,需要的朋友可以参考下
    2017-09-09
  • js获取 type=radio 值的方法

    js获取 type=radio 值的方法

    这篇文章主要介绍了js如何获取type=radio值,需要的朋友可以参考下
    2014-05-05
  • 原生js实现旋转木马效果

    原生js实现旋转木马效果

    这篇文章主要为大家详细介绍了原生js实现旋转木马效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-02-02

最新评论