JavaScript基礎視頻教程總結（051-060章）

所有基礎課程鏈接： 1.JavaScript基礎視頻教程總結（001-010章） 2.JavaScript基礎視頻教程總結（011-020章） 3. JavaScript基礎視頻教程總結（021-030章） 4. JavaScript基礎視頻教程總結（031-040章） 5. JavaScript基 ...
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>051-060章總結</title>
</head>
<body>
    
<pre>
051. 函數的簡介
- 函數也是一個對象
- 函數中可以封裝一些功能（代碼），在需要時可以執行這些功能（代碼）
- 函數中可以保存一些代碼在需要的時候調用
- 使用typeof檢查一個函數對象時，會返回function
</pre>
<script type="text/javascript">
    console.log("第051");
    
    //我們在實際開發中很少使用構造函數來創建一個函數對象
    //可以將要封裝的代碼以字元串的形式傳遞給構造函數
    var fun11 = new Function("console.log('this is a first code')")
    //函數中的代碼會在函數調用的時候執行,調用函數 語法：函數對象()
    //當調用函數時，函數中封裝的代碼會按照順序執行
    fun11();
    /*
     * 使用 函數聲明 來創建一個函數
     *  語法：
     *      function 函數名([形參1,形參2...形參N]){
     *          語句...
     *      }
     */
    function fun12(){
        console.log("這是我的第二個函數~~~");
        document.write("~~~~(>_<)~~~~");
    }
    fun12();
    /*
     * 使用 函數表達式 來創建一個函數
     * var 函數名  = function([形參1,形參2...形參N]){
     *   語句....
     *  }
     */
    var fun13 = function(){
        console.log("我是匿名函數中封裝的代碼");
    };
    fun13();
</script>

<pre>
052. 函數的參數
可以在函數的()中來指定一個或多個形參（形式參數）
多個形參之間使用,隔開，聲明形參就相當於在函數內部聲明瞭對應的變數
但是並不賦值
</pre>
<script type="text/javascript">
    console.log("第052");
    
    // 定義一個用來求兩個數和的函數
    function sum21(a,b){
        console.log("a = "+a);
        console.log("b = "+b);
        console.log(a+b);
    }
    //在調用函數時，可以在()中指定實參（實際參數）
    //實參將會賦值給函數中對應的形參
    sum21(123,456);
    /*
     * 調用函數時解析器不會檢查實參的類型,
     * 所以要註意，是否有可能會接收到非法的參數，如果有可能則需要對參數進行類型的檢查
     * 函數的實參可以是任意的數據類型
     */
    sum21(123,"hello");
    sum21(true , false);
    /*
     * 調用函數時，解析器也不會檢查實參的數量
     *  多餘實參不會被賦值
     * 如果實參的數量少於形參的數量，則沒有對應實參的形參將是undefined
     * 
     */
    //sum(123,456,"hello",true,null);
    sum21(123);
</script>

<pre>
053. 函數的返回值
可以使用 return 來設置函數的返回值
語法：return 值
return後的值將會作為函數的執行結果返回，
可以定義一個變數，來接收該結果
在函數中return後的語句都不會執行
如果return語句後不跟任何值就相當於返回一個undefined，
如果函數中不寫return，則也會返回undefined
return後可以跟任意類型的值
</pre>
<script type="text/javascript">
    console.log("第053");
    
    // 定義一個用來求兩個數和的函數
    function sum3(arg1,arg2){
        var sum = arg1 + arg2
        return sum
    }
    var result = sum3(5,3)
    console.log(result)
</script>

<pre>
054. 實參可以是任何值
</pre>
<script type="text/javascript">
    console.log("第054");
    
    // 定義一個函數，判斷一個數字是否是偶數，如果是返回true，否則返回false
    function isOu(num){
        return num%2 ==0
    }
    var result = isOu(15)
    console.log(result)
    // 實參可以是任意的數據類型，也可以是一個對象
    // 當我們的參數過多時，可以將參數封裝到一個對象中，然後通過對象傳遞
    function sayhello(obj){
        var say = "我叫"+obj.name+"我今年"+obj.age
        return say
    }
    var person = {
        name:'小二',
        age: 18
    }
    var result = sayhello(person)
    console.log(result)
    // 實參可以是一個對象，也可以是一個函數
    function fun4(a){
        console.log("a ="+ a);
    }
    fun4(sayhello(person))
    /*
     * sayhello()
     *  - 調用函數
     *  - 相當於使用的函數的返回值
     * 
     * sayhello
     *  - 函數對象
     *  - 相當於直接使用函數對象
     */
</script>

<pre>
055. 返回值的類型
返回值可以是任意的數據類型
也可以是一個對象，也可以是一個函數
</pre>
<script type="text/javascript">
    console.log("第055");
    
    function fun51(){
        alert("函數要執行了~~~~");
        for(var i=0 ; i<5 ; i++){
            if(i == 2){
                //使用break可以退出當前的迴圈
                //break;
                //continue用於跳過當次迴圈
                continue;
                //使用return可以結束整個函數
                //return;
            }
            console.log(i);
        }
        alert("函數執行完了~~~~");
    }
    fun51();
    function fun52(){
        //返回一個對象
        return {name:"沙和尚"};
    }
    var a = fun52();
    console.log("a = "+a);
    function fun53(){
        //在函數內部再聲明一個函數
        function fun54(){
            console.log("我是fun54");
        }
        //將fun4函數對象作為返回值返回
        return fun54;
    }
    a = fun53();
    console.log(a);
    a();
    fun53()();
</script>

<pre>
056. 立即執行函數
函數定義完，立即被調用，這種函數叫做立即執行函數
立即執行函數往往只會執行一次
</pre>
<script type="text/javascript">
    console.log("第056");
    
    /*(function(){
        alert("我是一個匿名函數~~~");
    })();*/
    (function(a,b){
        console.log("a = "+a);
        console.log("b = "+b);
    })(123,456);
</script>

<pre>
057. 方法和枚舉屬性
</pre>
<script type="text/javascript">
    console.log("第057");
    
    var obj7 = {
        name:"孫悟空",
        age:18,
        gender:"男",
        address:"花果山"
     };
    //枚舉對象中的屬性
    //使用for ... in 語句
    /*
     * 語法：
     *  for(var 變數 in 對象){
     *  
     *  }
     * 
     * for...in語句 對象中有幾個屬性，迴圈體就會執行幾次
     *  每次執行時，會將對象中的一個屬性的名字賦值給變數
     */
    for (var n in obj7){
        console.log("屬性名:"+n)
        console.log("屬性值:"+obj7[n])
    }
</script>

<pre>
058. 全局作用域
- 作用域指一個變數的作用的範圍
- 在JS中一共有兩種作用域：
1.全局作用域
- 直接編寫在script標簽中的JS代碼，都在全局作用域
- 全局作用域在頁面打開時創建，在頁面關閉時銷毀
- 在全局作用域中有一個全局對象window，
它代表的是一個瀏覽器的視窗，它由瀏覽器創建我們可以直接使用
- 在全局作用域中：
創建的變數都會作為window對象的屬性保存
創建的函數都會作為window對象的方法保存
- 全局作用域中的變數都是全局變數，
在頁面的任意的部分都可以訪問的到

變數聲明提前
- 使用var關鍵字聲明的變數，會在所有的代碼執行之前被聲明（但是不會賦值），
但是如果聲明變數時不適用var關鍵字，則變數不會被聲明提前
函數的聲明提前
- 使用函數聲明形式創建的函數 function 函數(){}
它會在所有的代碼執行之前就被創建，所以我們可以在函數聲明前來調用函數
使用函數表達式創建的函數，不會被聲明提前，所以不能在聲明前調用。
</pre>
<script type="text/javascript">
    console.log("第058");
    
    var a = 10;
    var c = "hello";
    console.log(window.c);
    function fun(){
        console.log("我是fun函數");
    }
    window.fun();
    //window.alert("hello");
    // 變數聲明提前
    console.log("a2 = "+a2);
    var a2 = 123;
    fun81();
    //函數聲明，會被提前創建
    function fun81(){
        console.log("我是一個fun函數");
    }
    //fun82();
    //函數表達式，不會被提前創建
    var fun82 = function(){
        console.log("我是fun2函數");
    };
    fun82();
</script>

<pre>
059. 函數作用域
- 調用函數時創建函數作用域，函數執行完畢以後，函數作用域銷毀
- 每調用一次函數就會創建一個新的函數作用域，他們之間是互相獨立的
- 在函數作用域中可以訪問到全局作用域的變數
在全局作用域中無法訪問到函數作用域的變數
- 當在函數作用域操作一個變數時，它會先在自身作用域中尋找，如果有就直接使用
如果沒有則向上一級作用域中尋找，直到找到全局作用域，
如果全局作用域中依然沒有找到，則會報錯 ReferenceError
- 在函數中要訪問全局變數可以使用window對象
</pre>
<script type="text/javascript">
    console.log("第059");
    
    var a01 = "全局a"
    function fun91(){
        var a01 = "我是fun91的a"
        var b01 = "我是fun91的b"
        console.log(a01)
        function fun92(){
            console.log(window.a01)
        }
        fun92()
    }
    fun91();
    //console.log(b01)
    /*
     * 在函數作用域也有聲明提前的特性，
     *  使用var關鍵字聲明的變數，會在函數中所有的代碼執行之前被聲明
     *  函數聲明也會在函數中所有的代碼執行之前執行
     */
    function fun93(){
        fun94()
        function fun94(){
            console.log(a02)
        }
        var a02 = "我是a"
    }
    fun93()
    //在函數中，不適用var聲明的變數都會成為全局變數
    function fun95(){
        d01 = "d01"
    }
    fun95()
    console.log(d01)
    //定義形參就相當於在函數作用域中聲明瞭變數
    var e = 23
    function fun96(e){
        console.log(e)
    }
    fun96() //undefined
</script>

<pre>
060. debug（調試）
</pre>
<script type="text/javascript">
    console.log("第060");
    
    var a60 = 123
    function fun60(a60){
        console.log(a60)
        a60=456
    }
    fun60() //undefined
    console.log(a60) // 123
    //
    var a61 = 123
    function fun61(a61){
        console.log(a61)
        a61=456
    }
    fun61(789) //789
    console.log(a61) //123
    
    alert(d60)
    var a62 = 10
    var b60 = 20
    c60 = true
    function fun62(){
        console.log("hello")
    }
    var d60 = 30
</script>

</body>
</html>