ES6定义类-class初体验
博客专区 > maginaCP 的博客 > 博客详情
ES6定义类-class初体验
maginaCP 发表于1年前
ES6定义类-class初体验
  • 发表于 1年前
  • 阅读 10
  • 收藏 0
  • 点赞 0
  • 评论 0

腾讯云 技术升级10大核心产品年终让利>>>   

摘要: 类 class 继承

    ES6中引入了class关键字,简化了js定义类的操作

    1.基本用法

     1. 构造函数,实例属性与静态属性

    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. 没有变量提升

        声明式与表达式都没有变量提升

    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导致堆栈溢出

    set score(score){
        this.score = score;
    }
     //Uncaught RangeError: Maximum call stack size exceeded

 

共有 人打赏支持
粉丝 0
博文 1
码字总数 316
×
maginaCP
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: