ES6定义类-class初体验

时间 2019-12-04

原文原文链接

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. 继承性

extends继承父类 StudentInstance.proto == People
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