Web全棧工程師之路(三)——JavaScript篇(十九)——建構函式

阿新 • • 發佈：2020-12-15

以下是html程式碼，個人建議放在IDE裡執行，邊看效果，邊學習~

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>建構函式</title>
    <script>
        /*  
            建立一個建構函式，專門用來建立Person物件
                建構函式就是一個普通的函式，建立方式和普通函式沒有區別，
                不同的是建構函式習慣上首字母大寫

            建構函式和普通函式上的區別就是呼叫方式的不同
                普通函式是直接呼叫，而建構函式需要使用new關鍵字來呼叫
            
            建構函式的執行流程：
                1.立刻建立一個新的物件
                2.將新建的物件設定為函式中的this，在建構函式中可以使用this來引用新建的物件
                3.逐行執行函式中的程式碼
                4.將新建的物件作為返回值返回

            使用同一個建構函式建立的物件稱之為一類物件，也將一個建構函式稱為一個類
                我們將通過一個建構函式建立的物件，稱為是該類的例項
         
*/

        //建立建構函式
        function Person(name,age,gender){
            //沒有return但還是返回了，這是建構函式的一大特點
            alert(this); //這個this就是我們新建的這個物件
            this.name = name; //在呼叫這個Person建構函式來新建的物件中新增一個叫做name內容為"老子"的屬性
            this.age = age;
            this.gender = gender;
        }

        var per  
= new Person("老子",18,"男"); //利用建構函式創造物件

        console.log(per); //看一看這個物件裡有沒有name屬性(有的)

        function Dog(name,age){
            this.name = name;
            this.age = age;
        }

        var dog = new Dog();
        console.log(dog); //看一看前沿是否還是Object，這就是不同點，可以與per物件比較一下看看
        
        /* 
  
            使用instanceof可以檢查一個物件是否是一個類的例項
                語法：
                    物件 instanceof 建構函式
                如果是，返回true，否則返回false
        */
        console.log(per instanceof Person); //判斷per物件是否屬於Person類(屬於)
        
        console.log(per instanceof Object); //判斷per物件是否屬於Object類(屬於)
        /*  
            所有的物件都是Object的後代，所以任何物件和Object作instanceof檢查時都會返回true
        */


        /*  
            建立一個Human建構函式
            - 在Human建構函式中，為每一個物件都添加了一個syaName方法
                目前我們的方法是在建構函式內部建立的，也就是建構函式每執行一次都會建立一個新的sayName方法
                也就是所有例項的sayName都是唯一的，各不相同的，存在一定的浪費
                這完全沒有必要，完全可以使所有的物件共享同一個方法
        */
        function Human(name,age,gender){
            this.name = name;
            this.age = age;
            this.gender = gender;
            //向物件中新增一個方法
            this.sayName = function(){
                alert("大家好，我是"+this.name);
            };
        }

        //建立兩個Human的例項
        var man = new Human("李耳",18,"男");
        var woman = new Human("貂蟬",18,"女");

        //判斷各個屬性的sayName方法是否是同一個
        console.log(man.sayName == woman.sayName);  //輸出false

        //下面解決這個重複建立方法的問題
        
        function Human2(name,age,gender){
            this.name = name;
            this.age = age; 
            this.gender = gender;
            //向物件中新增剛剛已經建立的函式，直接呼叫即可，無需再次建立新的
            this.sayName = sayHello;
        }

        //在外部單獨建立一個函式
        /*  
            將函式定義在全域性作用域，汙染了全域性作用域的名稱空間
            而且定義在全域性作用域中也很不安全
        */

        function sayHello(){
                alert("大家好，我是"+this.name);
        };

        
        var man2 = new Human2("李耳",18,"男");
        var woman2 = new Human2("貂蟬",18,"女");

        //判斷各個屬性的sayName方法是否是同一個
        console.log(man2.sayName == woman2.sayName);  //輸出true

        man.sayName();
        woman.sayName();
        //問題解決

    </script>
</head>
<body>
    
</body>
</html>