ES6定義類-class初體驗

    ES6中引入了class關鍵字,簡化了js定義類的操做javascript

    1.基本用法

     1. 構造函數,實例屬性與靜態屬性java

class People {
        //構造函數
        constructor(name){
            this.name = name;
        }
        //實例屬性
        sayName(){
            console.log(this.name);
        }
        //靜態屬性
        static sayClassName(){
            console.log(this.name);
        }
    }
    var p = new People('magina');
    p.sayName(); //magina
    People.sayClassName(); //People

        2. 私有方法閉包

因爲ES6並無提供對私有屬性的語法支持,可使用閉包實現私有屬性函數

var People = (function () {
        //私有屬性
        var sayHi = function () {
            console.log('Hi,' + this.friend);
        };
        class People {
            constructor(friend){
                this.friend = friend;
                //調用
                this.sayHi = sayHi;
            }
        }
        return People;
    })();
    var p = new People('axe');
    p.sayHi();

     3. 沒有變量提高this

        聲明式與表達式都沒有變量提高spa

var p = new People() //People is not defined
    var People = class {};
    var stu = new Student() //Student is not defined
    class Student {};

    2. 繼承性

  1. extends繼承父類 StudentInstance.proto == People
  2. super引用父類
//繼承 extends
     class Student extends People{
         constructor(grade,name){
             //引用父類
             super(name);
             this.grade = grade;
         }
         sayGrade(){
             console.log(this.grade);
         }
     }

    3. settet/getter 讀寫屬性

class Student{
        constructor(score){
            this.score = score;
        }
        set score(score){
            this._score = score;
        }
        get score(){
            return this._score.toFixed(2);
        }
    }

    var stu = new Student(88);
    console.log(stu.score);     //88.00 String
    console.log(stu._score);    //88 Number

        注意:setter內賦值操做的變量名,不可與setter的變量名相同,不然會遞歸調用setter致使堆棧溢出code

set score(score){
        this.score = score;
    }
     //Uncaught RangeError: Maximum call stack size exceeded
相關文章
相關標籤/搜索