大家好，這裡是「 Daotin的夢囈 」從零開始學 Web 系列教程。此文首發於「 Daotin的夢囈 」公眾號，歡迎大家訂閱關注。在這裡我會從 Web 前端零基礎開始，一步步學習 Web 相關的知識點，期間也會分享一些好玩的專案。現在就讓我們一起進入 Web 前端學習的冒險之旅吧！

一、函式

1、函式的定義

// 第一種
function fn1(){
    console.log("我是第一種定義方法！");
}

// 第二種
var fn2 = function (){
    console.log("我是第二種定義方法！");
};  // 注意分號

function (){
 　　console.log("我是第二種定義方法！");
}();  // 第二種方式的呼叫方式之一：函式的自呼叫

//第三種
var fn3 = new Function("console.log('我是第三種定義方法！')");
 

第一種：（函式的宣告）第一種定義方法最強大，定義完畢後，在哪裡使用都可以，無位置限制。
第二種：(函式表示式：匿名函式) 後兩種定義方法是有侷限性的。（使用函式必須在定義函式之後）

2、函式的呼叫

函式名();

3、函式名

• 要遵循駝峰命名法。
• 不能同名（函式過載），否則後面的函式會覆蓋前面的函式。

//列印函式名，就等於列印整個函式。
console.log(fn);
//列印執行函式，就等於列印函式的返回值。
console.log(fn()); 

4、形參和實參

• 形參不需要寫 var.
• 形參的個數和實參的個數可以不一致 。

5、返回值

1. 如果函式沒有顯示的使用 return 語句 ，那麼函式有預設的返回值：undefined
2. 如果函式使用 return 語句，但是 return 後面沒有任何值，那麼函式的返回值也是：undefined.

6、變數和作用域

全域性變數：在 script 使用 var 定義的變數（所有的 script 共享其全域性性，js 裡面沒有塊級作用域概念，只有全域性作用域和區域性作用域）。

隱式全域性變數：在 script 沒有 var 的變數。

function fn（）{
　　var a = b = c = 1;　　     // b和c就是隱式全域性變數（等號）
　　var a = 1; b = 2; c = 3;   // b和c就是隱式全域性變數（分號）
　　var a = 1 , b = 2 , c = 3;  // b和c就不是隱式全域性變數（逗號）
}
 

（全域性變數是不能被刪除的，隱式全域性變數是可以被刪除的）

var num1 = 10;
num = 20;
delete num1;
delete num2;
console.log(typeof num1); // number
console.log(typeof num2); // undefined

區域性變數：函式內部用 var 定義的變數和形參。

6.1、變數宣告提升（預解析）

作用：檢視語法錯誤。js的解析器在頁面載入的時候，首先檢查頁面上的語法錯誤。把變數宣告提升起來。（變數宣告提升和函式整體提升）

6.2、變數的提升

只提升變數名，不提升變數值。

consolas.log(aaa);// 列印的結果是 undefined ，因為只提升變數名，不提升變數值。
var aaa = 111; 

在函式範圍內，照樣適用。

6.3、函式的提升

function 直接定義的方法：整體提升（上面說的第一種函式定義的方法）.

fn();

var aaa = 111;
function fn(){
    //變數宣告提升在函式內部照樣實用。
    //函式的就近原則（區域性變數作用域），列印的aaa不是111，而是 undefined。
    console.log(aaa); // undefined
    var aaa = 222;
}

預解析會分塊：

多對的 script 標籤中函式重名的話，預解析不會衝突。也就是預解析的作用域是每一個的 script 標籤。

var先提升，function再提升：

示例：

console.log(a); // 輸出a函式體
function a() {
    console.log("aaaaa");
}
var a = 1;
console.log(a); // 輸出1

列印第一個結果的時候，var會提升，之後 function 再提升，但是函式a和變數a重名，function的a在後面覆蓋掉變數a，所以第一個輸出 a 函式體.

第二個前面var a = 1;提升之後，這個位置就相當於只有 a = 1; 賦值，所以第二個列印1.

6.4、匿名函式

作用大致如下：

//1.直接呼叫
(function (){
    console.log(1);
})();

//2.繫結事件
document.onclick = function () {
    alert(1);
}

//3.定時器
setInterval(function () {
    console.log(444);
},1000);