ES6構造函數class 和 ES5構造函數語法

• 2020 年 4 月 18 日
• 筆記

構造函數就是JavaScript程式定義好的函數,我們直接使用就可以,實際也是一種函數,構造函數專門用於生成定義對象,通過構造函數生成的對象,稱為實例化對象

構造函數分為兩種,一種是JavaScript程式定義好的構造函數,稱為內置構造函數,一種是程式設計師自己定義的構造函數,稱為自定義構造函數

構造函數和普通函數的區別
　　1,構造函數一定要和關鍵詞new一起使用,new關鍵詞會自動的給構造函數定義一個對象,並且返回這個對象,我們只要對這個對象設定屬性,設定方法就可以了
　　2,構造函數為了和其他函數區別,語法規範規定構造函數的函數名稱,第一個字母必須大寫,使用大駝峰命名法
　　3,構造函數給對象定義屬性和方法的語法,與一般函數不同

ES5構造函數語法：

　　//自定義構造函數
        function CrtObj(name,sex,age,addr){
            // 定義屬性
            this.name = name;
            this.sex = sex;
            this.age = age;
            this.addr = addr;
            // 定義方法
            this.fun = function(){
                console.log(this.name,this.sex,this.age,this.addr);
            }
        }
        // 生成實例化對象
        const obj = new CrtObj('劉五','女',26,'北京');
        console.log(obj); //輸出實例化對象

ES6構造函數語法：ES6與ES5構造函數語法對比，其功能作用完全相同，只是語法不同。ES6構造函數新增class語法：

        class Fun{// ES6class方法定義構造函數
            //constructor是構造器,定義實例化對象的屬性和屬性值, ()中的是參數
            constructor (name,age,sex){
                this.name = name;
                this.age = age;
                this.sex = sex;
            }
            //定義方法，雖然沒聲明,但是也是定義在構造函數中的prototype中
            fAll(){
                console.log(this.name,this.age,this.sex);
            }
        }
        // 生成實例化對象
        const obj = new Fun('劉萌', 20, '女');
        console.log(obj);//輸出實例化對象
        obj.fAll();  //輸出方法

需要注意一點是ES6的class語法無法執行預解析,是不能被提前調用; ES5的function函數可以提前調用,但是只能調用屬性不能調用方法。