1. 程式人生 > >ES6建構函式class 和 ES5建構函式語法

ES6建構函式class 和 ES5建構函式語法

建構函式就是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函式可以提前呼叫,但是隻能呼叫屬性不能呼叫方