Unsplash
通常来说，一个函数就是一个可以被外部代码调用（或者函数本身递归调用）的"子程序"，和程序本身一样，一个函数的函数体是由一系列的语句组成的，函数可以接收传入参数，也可以返回一个值
在 JavaScript 中，函数是第一等对象，不仅因为它既可以像普通对象一样拥有属性和方法，而且重要的是它可以被调用，简单来说它们是 Function 对象
1. 函数声明
函数不同于过程，函数总是会返回一个值，但是一个过程有可能返回一个值，也有可能不返回，如果一个函数中没有使用 return 语句，则它默认返回 undefined，要想返回一个特定的值，则函数必须使用 return 语句来指定一个所要返回的值（使用 new 关键字调用一个构造函数除外），return 之后的语句不再执行
name 函数名；param 传递给函数的参数的名称，一个函数最多可以有 255 个参数；statements 组成函数体的声明语句
使用函数名 + ()，即可完成函数的调用，下面通过几个例子来加深对函数的理解
function name([param,[, param,[..., param]]]) {
statements
}
//函数的声明
function say(name) {
alert(name + "你好呀");
}
//函数调用
say("Nian糕");
var str = say("抹茶松糕");
运行结果 1
运行结果 2
绝对值
function abs(num) {
if (num < 0) {
return -num;
}
return num;
}
console.log(abs(-10));
运行结果
1 - 100 的累加
var result = 0;
function add(n) {
for (var i = 0; i <= n; i++) {
result = result + i;
}
return result;
}
console.log(add(100));
运行结果
2. 函数表达式
函数表达式和函数声明非常相似，它们甚至有相同的语法，不过，要记住的是，函数调用必须放在表达式赋值之后
name 函数名，可以省略，当省略函数名的时候，该函数就成为了匿名函数；param 传递给函数的参数的名称，一个函数最多可以有 255 个参数； statements 组成函数体的声明语句
function [name]([param] [, param] [..., param]) { statements }
//函数表达式
var say = function() {
alert("Nian糕");
}
3. 函数提升
我们在上面提到，函数调用必须放在表达式赋值之后，那函数的调用是不是也要放在函数声明之后呢，我们来试试看
运行结果
在上面的这个例子中，我们先调用了函数，然后再对函数进行声明，而函数确实能够调用，并执行了里面的函数，至于为什么会这样，是因为在 JS 当中，不管函数在哪个位置，都默认将函数整体提升到作用域顶部，该作用域包括全局作用域、函数作用域，同样提升的还有变量，但是函数整体在变量整体的后面，不过，只有声明式函数才会被提升，字面量函数不会被提升
变量 / 函数提升
我们在定义左图的变量及函数时，它实际上的解析顺序是像右图那样的，先对变量进行声明，然后再赋值，并非声明的同时就赋值
左图 运行结果
右图 运行结果
我们再来看一个例子
变量 / 函数提升
左图 运行结果
右图 运行结果
4. 练习
接下来我们来设计一个函数，使其能够判断某一年份是否为闰年，符合下面两个条件之一的年份就是闰年：1. 能被 4 整除，但不能被 100 整除；2. 能被 4 整除，又能被 400 整除，因为能够被 400 整除一定能被 4 整除，所以，第二个条件可以简化为能够被 400 整除
function isLeapYear(num) {
if ((num % 4==0 && num % 100!=0)||(num % 400==0)) {
console.log(num + "是闰年");
}else {
console.log(num + "不是闰年");
}
}
运行结果
接下来这个例子，我们通过使用函数，来完成一个块的隐藏跟显示的效果，这一效果在网页中的运用也是比较常见的
<style type="text/css">
#box {
height: 100px;
width: 100px;
background-color: lightblue;
}
</style>
<button id="btn">显示/隐藏</button>
<div id="box"></div>
<script type="text/javascript">
//获取元素节点
var btn = document.getElementById("btn");
var box = document.getElementById("box");
btn.onclick = function () {
if (box.style.display === "block") {
box.style.display = "none";
}else {
box.style.display = "block";
}
}
</script>
运行结果
使用布尔值完成判断，照样能够实现 “显示/隐藏” 效果
var btn = document.getElementById("btn");
var box = document.getElementById("box");
var isShow = true; //控制 block 显示/隐藏的布尔值
btn.onclick = function () {
isShow = !isShow;
if (isShow) {
box.style.display = "block";
}else {
box.style.display = "none";
}
}
End of File
行文过程中出现错误或不妥之处在所难免，希望大家能够给予指正，以免误导更多人，最后，如果你觉得我的文章写的还不错，希望能够点一下喜欢和关注，为了我能早日成为简书优秀作者献上一发助攻吧，谢谢！^ ^
网友评论