脚本语言 订阅所有【脚本语言】的日志

ES6学习笔记：class类与继承

编辑:dnawo 日期:2022-07-31

字体大小: 小 中 大
ES6的class只是让对象原型的写法更加清晰、更像面向对象编程的语法而已，它的绝大部分功能，ES5都可以做到。实际上，ES6的class可以看作只是一个语法糖。

1、实例属性和实例方法

复制内容到剪贴板程序代码 程序代码
class People{
    //构造函数
    constructor(name,age){
        //实例属性
        this.name = name;
        this.age = age;
    }

    //实例方法
    toString(){
        return `${this.name},${this.age}`;
    }
}

var p = new People('zhang san', 29);
console.log(p.name);
console.log(p.age);
console.log(p.toString());

2、取值函数和存值函数(getter/setter)

复制内容到剪贴板程序代码 程序代码
class People{
    //私有属性
    #age = 0;

    get age(){
        return this.#age;
    }

    set age(value){
        if(value>0 && value<=100){
            this.#age = value;
        }else{
            throw 'error age.'
        }        
    }
}

var p = new People();
p.age = 29;
console.log(p.age);

注意：getter和setter内部不能使用this.age，否则会出现递归陷入死循环：

引用内容 引用内容
//Firefox
Uncaught InternalError: too much recursion
//Chrome & Edge
Uncaught RangeError: Maximum call stack size exceeded

3、静态属性和实例方法

复制内容到剪贴板程序代码 程序代码
class People{
    //静态属性
    static name = 'zhang san';
    static age = 29;

    //静态方法
    static toString(){
        return `${this.name},${this.age}`; //this指的是类，不是实例
    }
}

console.log(People.name);
console.log(People.age);
console.log(People.toString());

4、ES6类的继承

复制内容到剪贴板程序代码 程序代码
class Person extends People{
    constructor(){
        //调用父类构造函数
        super('zhang san', 29);
    }
}

var p = new Person();
console.log(p.name);
console.log(p.age);
console.log(p.toString());

注意：子类构造函数一定要调用一下父类构造函数，否则运行会出错：

引用内容 引用内容
//Firefox
Uncaught ReferenceError: must call super constructor before using 'this' in derived class constructorr
//Chrome & Edge
Uncaught ReferenceError: Must call super constructor in derived class before accessing 'this' or returning from derived constructor


上一篇: ES6学习笔记：Set和Map数据结构
下一篇: 百度网盘大文件极速下载券，用自己号，2元/文件
文章来自: 本站原创
引用通告: 查看所有引用 | 我要引用此文章
Tags:
最新日志:
评论: 0 | 引用: 0 | 查看次数: 2329
发表评论
请登录后再发表评论！