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

時間 2019-12-10

原文原文鏈接

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