JavaScript 函数

通常来说，一个函数就是一个可以被外部代码调用（或者函数本身递归调用）的"子程序"，和程序本身一样，一个函数的函数体是由一系列的语句组成的，函数可以接收传入参数，也可以返回一个值

在 JavaScript 中，函数是第一等对象，不仅因为它既可以像普通对象一样拥有属性和方法，而且重要的是它可以被调用，简单来说它们是 Function 对象

函数声明

函数不同于过程，函数总是会返回一个值，但是一个过程有可能返回一个值，也有可能不返回，如果一个函数中没有使用 return 语句，则它默认返回 undefined，要想返回一个特定的值，则函数必须使用 return 语句来指定一个所要返回的值（使用 new 关键字调用一个构造函数除外），return 之后的语句不再执行

name 函数名；param 传递给函数的参数的名称，一个函数最多可以有 255 个参数；statements 组成函数体的声明语句

使用函数名 ()，即可完成函数的调用，下面通过几个例子来加深对函数的理解

代码语言：javascript复制

function name([param,[, param,[..., param]]]) {
  statements
}

代码语言：javascript复制

//函数的声明
function say(name) {
    alert(name   "你好呀");
}
//函数调用
say("Nian糕");
var str = say("抹茶松糕");

绝对值

代码语言：javascript复制

function abs(num) {
  if (num < 0) {
    return -num;
  }
  return num;
}
console.log(abs(-10));

1 - 100 的累加

代码语言：javascript复制

var result = 0;
function add(n) {
  for (var i = 0; i <= n; i  ) {
    result = result   i;
  }
  return result;
}
console.log(add(100));

函数表达式

函数表达式和函数声明非常相似，它们甚至有相同的语法，不过，要记住的是，函数调用必须放在表达式赋值之后

name 函数名，可以省略，当省略函数名的时候，该函数就成为了匿名函数；param 传递给函数的参数的名称，一个函数最多可以有 255 个参数； statements 组成函数体的声明语句

代码语言：javascript复制

function [name]([param] [, param] [..., param]) { statements }

代码语言：javascript复制

//函数表达式
var say = function() {
  alert("Nian糕");
}

函数提升

我们在上面提到，函数调用必须放在表达式赋值之后，那函数的调用是不是也要放在函数声明之后呢，我们来试试看

在上面的这个例子中，我们先调用了函数，然后再对函数进行声明，而函数确实能够调用，并执行了里面的函数，至于为什么会这样，是因为在 JS 当中，不管函数在哪个位置，都默认将函数整体提升到作用域顶部，该作用域包括全局作用域、函数作用域，同样提升的还有变量，但是函数整体在变量整体的后面，不过，只有声明式函数才会被提升，字面量函数不会被提升

我们在定义左图的变量及函数时，它实际上的解析顺序是像右图那样的，先对变量进行声明，然后再赋值，并非声明的同时就赋值

我们再来看一个例子

练习

接下来我们来设计一个函数，使其能够判断某一年份是否为闰年，符合下面两个条件之一的年份就是闰年：1. 能被 4 整除，但不能被 100 整除；2. 能被 4 整除，又能被 400 整除，因为能够被 400 整除一定能被 4 整除，所以，第二个条件可以简化为能够被 400 整除

代码语言：javascript复制

function isLeapYear(num) {
  if ((num % 4==0 && num % 100!=0)||(num % 400==0)) {
    console.log(num   "是闰年");
  }else {
    console.log(num   "不是闰年");
  }
}

接下来这个例子，我们通过使用函数，来完成一个块的隐藏跟显示的效果，这一效果在网页中的运用也是比较常见的

代码语言：javascript复制

<style type="text/css">
  #box {
    height: 100px;
    width: 100px;
    background-color: lightblue;
  }
</style>

代码语言：javascript复制

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

使用布尔值完成判断，照样能够实现 “显示/隐藏” 效果

代码语言：javascript复制

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";
  }
}

javascript

0 人点赞