JavaScript 函數、函數構造、函數調用、參數、函數返回值、變數的作用域、預解析

一、函數及函數的構造

函數是一個可重用的代碼塊，用來完成某個特定功能。每當需要反覆執行一段代碼時，可以利用函數來避免重覆書寫相同代碼。

函數包含著的代碼只能在函數被調用時才會執行，就可以避免頁面載入時執行該腳本

簡單來說就是一個封裝,封裝的是一個特定的功能,重覆使用

函數的三種定義方法：

Function構造函數定義函數

var 函數名 = new Function(“參數1”，”參數2”，”參數3”……”函數體”);

function語句定義函數

function 函數名 (參數1，參數2……[形參]){
  <語句塊>
  return 返回值
}

在表達式中直接定義函數

var 函數名 = function (參數1，參數2，…){函數體};

註意：

函數名的書寫規範，不能一數字特殊符號和關鍵字命名，一般命名方式小駝峰

二、調用函數

1.直接調用

  // //直接調用，window.視窗調用
        // window.show() //show()

2.事件處理中調用

//事件中調用
        //<div onclick="show()">hello</div>

3.將函數的返回值賦給變數

 //將函數的返回值賦給變數
        var t = show()

三、參數

形參：定義函數時，函數名後面()中的參數；JavaScript中的函數允許給行參賦初始值

實參：調用函數時，傳遞的參數

參數的匹配： 預設情況下，形參和實參是一一對應的 但是當傳遞的參數個數與函數定義好的參數個數可以不匹配當不匹配時

• 如果傳遞的參數個數小於函數定義的參數個數，JavaScript會自動將多餘的參數值設為undefined；

• 如果傳遞的參數個數大於函數定義的參數個數，那麼多餘傳遞的參數將會被忽略掉。

如果傳遞的參數是一個數組的話，一一對應太過麻煩，我們就用arguments，獲取所有實參

 function show (a,b){
            console.log(arguments.length);
        }
 show('guo','yuan')

function Test(a,b){
    alert(typeof(arguments)); // 獲得類型
    alert(arguments[1]);      // 獲取下標為1的參數值
    alert(arguments.length);  // 獲取參數的長度
    alert(arguments.callee);  // 獲取函數的所有內容
}
Test("zhang","li");

四、函數的返回值

五、變數作用域

全局變數： 在函數外聲明的的變數為全局，在整個JS文檔中生效

局部變數： 在函數內用var聲明的變數為局部變數，只能在函數內部使用。

什麼是作用域鏈

• 只要在js中創建變數，就會存在作用域【全局作用域】

• 寫在函數內部的被稱為局部作用域

• 如果函數中還有函數，那麼在這個作用域中就又可以誕生一個新的作用域

• 在函數中如果在當前作用域中沒有查到值，就會向上級作用域去查，直到查到全局作用域，這樣一個查找過程形成的鏈條就叫做作用域鏈。

六、預解析

預解析，又稱之為變數提升，在js代碼真正執行之前，進行提前載入，把所有帶有var和function的關鍵字進行預

//預解析:
            var function 
            console.log(fn) // 函數體
            var fn = 10;
            function fn(){
            }
            console.log(fn) // 變數

同時出現變數和函數的提升，在他們兩個之前輸出的話解析的是函數體，預解析的優先順序大於變數的

如果在他們兩個之後輸出的話解析的是變數，因為根據優先棧記憶體找到數據的執行代碼順序先找到的var變數

預解析相關案例練習：

// 案例1
var num = 10;
fun();
function fun(){
  console.log(num);
  var num = 20;
}
// 案例二
var num = 10;
function fun() {
    console.log(num);
    var num = 20;
    console.log(num);
}
fun();

// 案例三
var a = 18;
f1();
function f1() {
    var b = 9;
    console.log(a);
    console.log(b);
    var a = 13;
}

// 案例四
console.log(a,b,c);
var a = b = c = 5;

// 案例四
f1();
console.log(c);
console.log(b);
console.log(a);
function f1() {
    var a = b = c = 9;
    console.log(a);
    console.log(b);
    console.log(c);
}
// 案例五
fn();//報錯 只預解析“=”左邊的，右邊的是指針，不參與預解析
var fn=function(){
    console.log(11);
}
// 案例六
function fn(){
    console.log(a);
    a=100;
}
fn();
console.log(a);
//註意：js中，如果在不進行任何特殊處理的情況下，上面的代碼報錯，下麵的代碼不再執行

// 案例七
console.log(show);
function show(){
  console.log(123);
}
var show = 10;

// 案例八
function show(){
  console.log(123);
}
var show = 10;
console.log(show);