ES6 Class vs ES5 constructor function All In One

本文转载自查看原文 2020-09-30 22:16 152 ES6 Class/ ES5 constructor function/ js/ 构造函数/ Class/ js in depth

ES6 Class vs ES5 constructor function All In One

ES6 类 vs ES5 构造函数

class ES6 {
    constructor() {
        // init
        this.name = '';
    }
    getName() {
        return this.name;
    }
    setName(name = '') {
        if(name) {
            this.name = name ?? '';
        }
    }
}

const es6 = new ES6();

class & getter & setter

class ES6 {
    constructor() {
        // init
        this.firstName = 'Eric';
        this.lastName = 'Xgqfrms';
    }
    getName() {
        return this.firstName;
    }
    setName(name = '') {
        if(name) {
            this.firstName = name ?? '';
        }
    }
    get fullName() {
        return `${this.firstName}-${this.lastName}`;
    }
    set fullName(name1, name2) {
        this.firstName = name1 ?? '';
        this.lastName = name2 ?? '';
    }
}
// ❌ 
Uncaught SyntaxError: Setter must have exactly one formal parameter.

class ES6 {
    constructor() {
        // init
        this.firstName = 'Eric';
        this.lastName = 'Xgqfrms';
    }
    getName() {
        return this.firstName;
    }
    setName(name = '') {
        if(name) {
            this.firstName = name ?? '';
        }
    }
    get fullName() {
        return `${this.firstName}-${this.lastName}`;
    }
    set fullName(obj = {}) {
        const {name1, name2} = obj;
        this.firstName = name1 ?? '';
        this.lastName = name2 ?? '';
    }
    set fullName2(arr = []) {
        const [name1, name2] = arr;
        this.firstName = name1 ?? '';
        this.lastName = name2 ?? '';
    }
}
// 使用对象，解决 setter 不能传递多个参数问题
// ✅ Setter must have exactly one formal parameter.