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

点击上方“ 前端进阶学习交流 ”，进行关注

回复“前端”便可获赠前端相关学习资料javascript

今php

日html

鸡前端

汤java

福如东海，寿比南山。

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

1、函数声明

示例：数组

声明一个函数不会当即执行。微信

它们被“保存以供稍后使用”，稍后将被执行，当它们被调用（call）。app

<!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语句。由于一个函数声明不是一个可执行语句，它不用分号结尾。
less

2、函数表达式

一个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）。

上面的函数用分号结束，由于它是一个可执行语句的一部分。

3、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;}

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

4、自调用函数

函数表达式能够进行 “自调用” 。

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

 <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>

5、总结

本文主要介绍了JavaScript 函数的定义。经过讲解了函数的定义，函数的表达式，如何去定义构造函数，以及如何去调用本身建立的函数，每一点都作了详细的讲解，经过用丰富的案例帮助你们更好理解。

但愿你们能够根据文章的内容，积极尝试，有时候看到别人实现起来很简单，可是到本身动手实现的时候，总会有各类各样的问题，切勿眼高手低，勤动手，才能够理解的更加深入。

使用JavaScript 语言，方便你们更好理解，但愿对你们的学习有帮助。

------------------- End -------------------

往期精彩文章推荐：

欢迎你们点赞，留言，转发，转载，感谢你们的相伴与支持

想加入前端学习群请在后台回复【入群】

万水千山老是情，点个【在看】行不行

本文分享自微信公众号 - 前端进阶学习交流（gh_cf4e462f0835）。
若有侵权，请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一块儿分享。