4.函式

4.1 定義函式

定義方式一

絕對值函式

function abs(x){
    if(x>=0){
        return x;
    }else{
        return -x;
    }
}

一旦執行到return代表函式結束，返回結果

如果沒有執行return，函式執行完也會返回結果，結果就是undefined。

定義方式二

   let abs = function (x) {
            if(x>=0){
                return x;
            }else{
                return -x;
            }
        }
 

呼叫函式

abs(10)   //10
abs(-10)   //10

引數問題：js可以傳任意個引數，也可以不傳遞引數

引數進來是否存在？ 不存在如何規避

 let abs = function (x) {
            //手動丟擲異常
            if (typeof x!=='number'){
                throw 'not a number';
            }
            if(x>=0){
                return x;
            }else{
                return -x;
            }
        }
 

arguments

arguments是一個JS免費贈送的關鍵字

傳遞進來的所有引數可以獲取

            for (let i = 0;i<arguments.length;i++){
                console.log(arguments[i]);
            }

rest ES6新特性 獲取除了已經定義的引數意外的所有引數

問題：arguments包含所有的引數，如果想要使用多餘的引數來進行附加操作。需要排除已有的引數

rest引數只能寫在最後面，必須用...標識

        function fun(a,b,...rest){
            console.log('a='+a);
            console.log('b='+b);
            console.log(rest);
        }
 

4.2 變數的作用域

在js中，var定義的變數實際有作用域的

在函式體中宣告，則在函式體外不可以使用

function fun(){
            var x = 1;
            x =x + 1;
        }
        x = x + 2;  //Uncaught ReferenceError: x is not defined

內部函式可以訪問外部函式成員 反之則不行

內部函式變數和外部函式變數重名，函式查詢變數從自身函式開始，由內向外查詢

假設外部存在的這個同名函式變數，則內部函式變數會遮蔽外部函式變數

        function fun1(){
            var x = 1;
            function fun2() {
                var x = 'a';
                console.log('inner'+x);
            }
            console.log('outer'+x);
            fun2();
        }
        fun1();

提升變數的作用域

        function fun(){
            var x = 'x'+y;
            console.log(x);
            var y = 'y';
        }

結果：xundefined

說明：js執行引擎，自動提升了y的宣告，但不會提升變數y的賦值；

全域性變數

        var x = 1;
        function f1() {
            console.log(x);
        }
        f1();
        console.log(x);

全域性物件windows

        var x = 'xxx';
        alert(x);
        alert(window.x); //預設所有的全域性變數都會自動繫結在windows物件下

alert()本身也是一個windows變數

規範

由於我們所有的全域性變數都會繫結到我們的windows上。如果不同的js檔案，使用了相同的全域性變數，會產生衝突

        //唯一全域性變數
        var qiudajiang = {};
        //定義全域性變數
        qiudajiang.name = 'q';
        qiudajiang.age = 12;
        qiudajiang.add = function (a,b) {
            return a+b;
        }

let關鍵字 定義區域性變數

        function f() {
            for (let i = 0; i <100 ; i++) {
                console.log(i);
            }
            console.log(i+1);//Uncaught ReferenceError: i is not defined
        }

常量 const

        const PI = 3.14;
        console.log(PI);
        PI = 2;  //Uncaught TypeError: Assignment to constant variable.

4.3方法

定義方法

方法就是把函式放在物件的裡面，物件只有兩個東西：屬性和方法

                var qiudajiang = {
                    name:'qiudajiang',
                    birth:1999,
                    age:function () {
                        let fullYear = new Date().getFullYear();
                        return fullYear-this.birth;
                    }
                };
				//屬性
				qiudajiang.name;
				//方法
				qiudajiang.age();

5.內部物件

標準物件

5.1 Date

基本使用

    <script>
        var now = new Date();
        let fullYear = now.getFullYear();//年
        now.getMonth(); //月    0-11 代表月
        now.getDate();  //日
        now.getDay();  //星期幾
        now.getHours(); //時
        now.getMinutes();  //分
        now.getSeconds();  //秒
        now.getTime();  //時間戳
        console.log(new Date(1599038081042));  //時間戳轉為時間
    </script>

轉換

now = new Date(1599038081042);
Wed Sep 02 2020 17:14:41 GMT+0800 (中國標準時間)
now.toLocaleString()
"2020/9/2 下午5:14:41"

5.2 JSON

在js中，一切皆為物件，任何js支援的型別都可以用JSON來表示

格式

• 物件都用大括號{}
• 陣列都用中括號[]
• 所有的鍵值對都使用 key:value

JSON字串和JS物件的轉化

    <script>
        //物件
        var user = {
            name:'qiu',
            age : 3,
            sex : '男'
        }
        //物件轉化為json字串
        let jsonUser = JSON.stringify(user);  //引數為物件
        console.log(jsonUser);   //{"name":"qiu","age":3,"sex":"男"}

        //json字串轉為物件  引數為json字串
        let parse = JSON.parse('{"name":"qiu","age":3,"sex":"男"}');
        console.log(parse);
    </script>

6.面向物件程式設計

class繼承

class關鍵字在ES6引入

1. 定義一個類、屬性、方法

       //ES6之後
        class Student{
            constructor(name) {
                this.name = name;
            }
            hello(){
                alert('hello');
            }
        }
        var xiaoming = new Student('xiaoming');

2. 繼承

  //ES6之後
        class Student{
            constructor(name) {
                this.name = name;
            }
            hello(){
                alert('hello');
            }
        }
        var xiaoming = new Student('xiaoming');
        class XiaoStudent extends Student{
            constructor(name,age) {
                super(name); //父類的
                this.age = age;  //自己的
            }
            myAge(){
                alert('123');
            }
        }
        var xiaohong = new XiaoStudent('xiaohong',123);