木子屋
 

标题: ES6学习笔记：class类与继承

作者: dnawo

日期: 2022-07-31 02:21 PM

分类: 脚本语言

内容: 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

+ 查看当前日志评论 (0)

 

登录

────────────

木子屋

PJBlog3 v3.2.9.518 Inside.

Processed In 0.018 ms

标题: ES6学习笔记：class类与继承

你没有权限发表评论

────────────

木子屋

PJBlog3 v3.2.9.518 Inside.

Processed In 0.018 ms

暂无评论

返回

────────────

木子屋

PJBlog3 v3.2.9.518 Inside.

Processed In 0.033 ms