JavaScript ES6 Class的基本用法

0.Class 的基本用法

class Person {
	// 构造函数
    constructor(name, sex) {
        this.name = name;
        this.sex = sex;
    }
    say() {
        console.log(`我是${this.name}，性别：${this.sex}`);
    }
}
const zs = new Person('张三', '男');
console.log(zs.name);
zs.say();

输出结果：

张三
我是张三，性别：男

1.Class 的两种定义形式

1.1 声明形式

class Person{ }

1.2 表达式形式

const zs = new Person('张三', '男')

(new class{ })()

2.实例属性、静态方法和静态属性

class Person {
    // 实例属性
    _school = 'xx学院';
    age = 18;
    // 实例方法
    getAge = function () {
        return this.age;
    }
    constructor(name, sex) {
        this.name = name;
        this.sex = sex;
    }
    say() {
        console.log(`我是${this.name}，性别：${this.sex}`);
    }
    speak() {
        console.log(`${this.name}说：静态方法是类的方法。`);
    }
    static speak() {
        console.log(`${this.name}说：静态方法是类的方法。`);
    }
    static getVersion() {
        return '1.0';
    }
}
// 静态属性
Person.version = '1.0'
const zs = new Person('张三', '男');
// 实例对象的属性
console.log(zs.age);
// 实例方法
zs.say();
console.log(zs.getAge());
// 实例对象的方法调用
zs.speak();
// 静态方法调用，this指向类本身
Person.speak();
// 静态属性的调用
console.log(Person.version);
console.log(Person.getVersion());
// 访问私有属性
console.log(zs._school);

输出结果：

18
我是张三，性别：男
18
张三说：静态方法是类的方法。
Person说：静态方法是类的方法。
1.0
1.0
xx学院

2.1 实例属性

实例属性的写法：

1. 写在class内，constructor外：age = 18;
2. 写在constructor内： this.name = name;

class Person {
    // 实例属性
    age = 18;
    constructor(name, sex) {
    	// 实例属性
        this.name = name;
        this.sex = sex;
    }
}

2.2 静态方法

在方法前添加static关键字：

class Person {
    static getVersion() {
        return '1.0';
    }
}

2.3 静态属性

静态属性有两种写法推荐第2种：

1. 写在Class外：Person.version = ‘1.0’;
2. 写在内Class内，使用静态方法调用：static getVersion() {return ‘1.0’; }

class Person {
	// 2.使用静态方法调用
    static getVersion() {
        return '1.0';
    }
}
// 1.写在Class外
Person.version = '1.0';

3. 私有属性和方法

设置私有属性和方法的途径：

1. 使用 _ 开头表示私有。
2. 将私有属性和方法移出类。

方法一：使用 _ 开头表示私有

class Person {
	// _符号标识私有属性
	_school = 'xx学院';
}
// 访问私有属性
console.log(zs._school);

方法二：将私有属性和方法移出类

(function () {
    let schoolName = '';
    class Person {
        age = 18;
        constructor(name, sex, school) {
            this.name = name;
            this.sex = sex;
            schoolName = school;
        }
        getSchool() {
            return schoolName;
        }
    }
    window.Person = Person;
})();
(function () {
    const p = new Person('李四', '男', 'xx学院');
    console.log(p.schoolName);
    console.log(p.getSchool());
})()

输出结果：

undefined
xx学院

4.继承

4.1 继承的写法

使用extends关键字实现继承，案例如下：

class Person {
    constructor(name, sex, age) {
        this.name = name;
        this.sex = sex;
        this.age = age;
    }
    // 实例方法
    getAge = function () {
        return this.age;
    }
    say() {
        console.log(`我是${this.name}，性别：${this.sex}`);
    }
}
class Programmer extends Person {
    constructor(name, sex, age, grade) {
        super(name, sex, age);
        this.grade = grade;
    }
}

4.2 改写父类方法

改写父类方法，需要在子类中使用同名函数。

class Programmer extends Person {
    constructor(name, sex, age, grade) {
        super(name, sex, age);
        this.grade = grade;
    }
    // 改写父类方法
    say() {
        console.log(`我是程序员，姓名：${this.name}，性别：${this.sex},等级：${this.grade}`);
    }
}
const p = new Programmer('张三', '男', 19, '初级');
p.say();

输出结果：

我是程序员，姓名：张三，性别：男,等级：初级