js（五）——ECMAScript基础之函数

函数的定义

• 函数声明

function 函数名(){
  // 函数体
}

• 函数表达式

var fn = function() {
  // 函数体
}

• 特点：

  函数声明的时候，函数体并不会执行，只要当函数被调用的时候才会执行。 函数一般都用来干一件事情，需用使用动词+名词，表示做一件事情 tellStory sayHello等

       函数体只有在调用的时候才会执行，调用需要()进行调用。

       可以调用多次(重复使用)

// 声明函数
function sayHi() {
  console.log("吃了没？");
}
// 调用函数
sayHi();

// 求1-100之间所有数的和
function getSum() {
  var sum = 0;
  for (var  i = 0; i < 100; i++) {
    sum += i;
  }
  console.log(sum);
}
// 调用
getSum();

函数的参数

// 函数内部是一个封闭的环境，可以通过参数的方式，把外部的值传递给函数内部
// 带参数的函数声明
function 函数名(形参1, 形参2, 形参...){
  // 函数体
}

// 带参数的函数调用
函数名(实参1, 实参2, 实参3);

函数的返回值

当函数执行完的时候，并不是所有时候都要把结果打印。我们期望函数给我一些反馈（比如计算的结果返回进行后续的运算），这个时候可以让函数返回一些东西。也就是返回值。函数通过return返回一个返回值

返回值语法：

//声明一个带返回值的函数
function 函数名(形参1, 形参2, 形参...){
  //函数体
  return 返回值;
}
​
//可以通过变量来接收这个返回值
var 变量 = 函数名(实参1, 实参2, 实参3);

函数的调用结果就是返回值，因此我们可以直接对函数调用结果进行操作。

返回值详解： 如果函数没有显示的使用 return语句 ，那么函数有默认的返回值：undefined 如果函数使用 return语句，那么跟再return后面的值，就成了函数的返回值 如果函数使用 return语句，但是return后面没有任何值，那么函数的返回值也是：undefined 函数使用return语句后，这个函数会在执行完 return 语句之后停止并立即退出，也就是说return后面的所有其他代码都不会再执行。

推荐的做法是要么让函数始终都返回一个值，要么永远都不要返回值。

匿名函数

匿名函数：没有名字的函数

匿名函数如何使用：

将匿名函数赋值给一个变量，这样就可以通过变量进行调用
匿名函数自调用

关于自执行函数（匿名函数自调用）的作用：防止全局变量污染。

自调用函数

匿名函数不能通过直接调用来执行，因此可以通过匿名函数的自调用的方式来执行

(function () {
  alert(123);
})();

函数是一种数据类型

function fn() {}
console.log(typeof fn);

• 函数作为参数

因为函数也是一种类型，可以把函数作为两一个函数的参数，在两一个函数中调用

• 函数做为返回值

因为函数是一种类型，所以可以把函数可以作为返回值从函数内部返回，这种用法在后面很常见。

function fn(b) {
  var a = 10;
  return function () {
    alert(a+b);
  }
}
fn(15)();

---

作用域

作用域：变量可以起作用的范围

全局变量和局部变量

作用域链

只有函数可以制造作用域结构， 那么只要是代码，就至少有一个作用域, 即全局作用域。
凡是代码中有函数，那么这个函数就构成另一个作用域。如果函数中还有函数，那么在这个作用域中就又可以诞生一个作用域。
​
将这样的所有的作用域列出来，可以有一个结构: 函数内指向函数外的链式结构。就称作作用域链。

// 案例
function f1() {
    var num = 123;
    function f2() {
        console.log( num );
    }
    f2();
}
var num = 456;
f1();   //123

---

预解析

JavaScript代码的执行是由浏览器中的JavaScript解析器来执行的。JavaScript解析器执行JavaScript代码的时候，分为两个过程：预解析过程和代码执行过程

预解析过程（原理）：

1. 把变量的声明提升到当前作用域的最前面，只会提升声明，不会提升赋值。

2. 把函数的声明提升到当前作用域的最前面，只会提升声明，不会提升调用。

3. 先提升var，再提升function

 

JavaScript的执行过程

var a = 25;
function abc (){
  alert(a);//undefined
  var a = 10;
}
abc();
 |
 |等同于(注意：预解析声明将声明提前至所在的域范围)
 |
\ /
var a = 25;
function abc (){
  var a;
  alert(a);//undefined
  a = 10;
}
abc();

//案例2
// 如果变量和函数同名的话，函数优先
console.log(a);//undefined
function a() {
  console.log('aaaaa');
}
var a = 1;
console.log(a);//undefined
 |
 |等同于
 |
\ /
var a;
function a() {
  console.log('aaaaa');
}
console.log(a);//undefined
a = 1;
console.log(a);//undefined