一篇文章带你了解JavaScript函数定义

开发 前端
本文主要介绍了JavaScript 函数的定义。通过讲解了函数的定义,函数的表达式,如何去定义构造函数,以及如何去调用自己创建的函数,每一点都做了详细的讲解,通过用丰富的案例帮助大家更好理解。

JavaScript 函数使用 function 关键字来定义,可以使用一个函数声明或者一个函数表达式。

一、函数声明

示例:

声明一个函数不会立即执行。

它们被“保存以供稍后使用”,稍后将被执行,当它们被调用(call)。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>项目</title>
    </head>
    <body style="background-color: aqua;"> 


        <h1>JavaScript 函数</h1>


        <p>此示例调用一个函数,该函数执行计算并返回结果</p>


        <p id="demo"></p>


        <script>
            function myfan(a, b) {
                return a / b;
            }
            document.getElementById("demo").innerHTML = myfan(6, 7);
</script>


    </body>
</html>

图片

分号是用来分隔执行JavaScript语句。因为一个函数声明不是一个可执行语句,它不用分号结尾。

二、函数表达式

一个JavaScript函数也可以使用 表达式 定义。

函数表达式可以存储在变量中。

var x = function (a, b) {return a * b};

完整代码:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>项目</title>
    </head>
    <body style="background-color: aqua;">


        <p>一个函数可以存储到一个变量里面:</p>
        <p id="demo"></p>


        <script>
            var x = function(a, b) {
                return a * b
            };
            document.getElementById("demo").innerHTML = x;
</script>


    </body>
</html>

图片

函数表达式存储在变量中后,变量可以作为函数使用。

var x = function (a, b) {
  return a * b
};
var z = x(4, 3);

上面的函数实际上是一个匿名函数(一个没有名字的函数),存储在变量中的函数不需要函数名。它们总是使用变量名调用(call)。

上面的函数用分号结束,因为它是一个可执行语句的一部分。

三、Function() 构造函数

1. 定义

JavaScript函数使用function关键字定义。函数还可以用一个内置的叫做Function()的构造函数来定义。

var myFunction = new Function("a", "b", "return a * b");


var x = myFunction(4, 3);

不同的写法

实际上不必使用函数构造函数。上面的例子也可以写成这样。

var myFunction = function (a, b) {
  return a * b
};


var x = myFunction(5, 5);

图片

大多数时候,可以避免使用 new 关键词在JavaScript 。

2. Function 提升(Hoisting)

Hoisting是JavaScript的默认行为是移动声明当前范围的顶部。Hoisting 适用于变量声明和函数声明。

正因为如此,JavaScript函数可以调用之前就被声明:

myFunction(5);


function myFunction(y) {
    return y * y;
}

使用表达式定义函数不会被提升。

四、自调用函数

函数表达式可以进行 “自调用” 。

自动调用一个自调用表达式(自动启动),而不必调用.函数表达式将自动执行,如果表达式随后 (),不能自调用一个函数声明.您必须在函数的周围添加圆括号,以指示它是函数表达式:

<script>
    (fun
        document.getElementById("demo").ction () {innerHTML = "Hello! I called myself";
    })();
  </script>

上面的函数实际上是一个匿名的自调用 函数(没有名字的函数)。

图片

函数可以用作值

JavaScript 函数可以用作值。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>项目</title>
</head>
<body>


  <p>函数可以作为值对待:</p>
  <p>x = myFunction(4,3) or x = 12</p>
  <p>在这两种情况下, x 都会是12.</p>
  <p id="demo"></p>


  <script>
      function myFunction(a, b) {
          return a * b;
      }
      var x = myFunction(4, 3);
      document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>

图片

JavaScript函数可以用在表达式:

<script>
    function myFunction(a, b) {
        return a * b;
    }
    var x = myFunction(4, 3) * 2; /*函数可以在表达式中使用.*/
    document.getElementById("demo").innerHTML = x;
</script>

图片

五、总结

本文主要介绍了JavaScript 函数的定义。通过讲解了函数的定义,函数的表达式,如何去定义构造函数,以及如何去调用自己创建的函数,每一点都做了详细的讲解,通过用丰富的案例帮助大家更好理解。

希望大家可以根据文章的内容,积极尝试,有时候看到别人实现起来很简单,但是到自己动手实现的时候,总会有各种各样的问题,切勿眼高手低,勤动手,才可以理解的更加深刻。

责任编辑:武晓燕 来源: 前端进阶学习交流
相关推荐

2021-01-29 18:41:16

JavaScript函数语法

2021-05-21 09:01:29

JavaScript 前端函数闭包

2021-05-18 08:30:42

JavaScript 前端JavaScript时

2021-03-09 14:04:01

JavaScriptCookie数据

2021-01-26 23:46:32

JavaScript数据结构前端

2021-03-05 18:04:15

JavaScript循环代码

2024-04-19 14:23:52

SwitchJavaScript开发

2023-09-06 14:57:46

JavaScript编程语言

2023-07-30 15:18:54

JavaScript属性

2024-01-30 13:47:45

2021-06-24 09:05:08

JavaScript日期前端

2021-02-02 18:39:05

JavaScript

2020-11-10 10:48:10

JavaScript属性对象

2021-06-04 09:56:01

JavaScript 前端switch

2023-05-30 15:06:21

JavaScript属性开发

2021-04-20 10:00:47

JavaScript类型基础

2021-06-22 10:12:37

JavaScript 前端While 循环

2021-04-06 20:57:31

JavaScript弹出框窗口

2021-05-25 10:15:20

JavaScript 前端作用域

2020-10-27 11:08:01

JavaScript
点赞
收藏

51CTO技术栈公众号