刘流的博客

ES6. 3.类

ES6
Word count: 818Reading time: 4 min
2020/08/30 Share

1.声明

1.1 ES5 创建类的方法

在声明一个类的同时声明一个方法。通过这个类实例出来的对象都可以调用这个方法。

1
2
3
4
5
6
7
8
9
10
11
12
let Animal = function (type) {
    this.type = type
    this.eat=function () {
        console.log('i am eating');
    }
}

let dog = new Animal('dog')
dog.eat() // i am eating

let monkey = new Animal('monkey')
monkey.eat() // i am eating

上述代码中在声明一个类的同时声明一个方法会增加每个实例对象的冗余性。所以我们把方法添加到构造函数的原型对象上面。

通过原型对象的方式我们实现了：

    • 共享数据
    • 节省内存空间
1
2
3
4
5
6
7
8
9
10
11
12
13
let Animal = function (type) {
    this.type = type
}

Animal.prototype.eat = function () {
    console.log('i am eat food');
}

let dog = new Animal('dog')
dog.eat() // i am eat food

let monkey = new Animal('monkey')
monkey.eat() // i am eat food

1.2 ES6 创建类的方法

1
2
3
4
5
6
7
8
9
10
11
class Animal{
    constructor(type){
        this.type = type
    }
    eat(){
    console.log('i am eat food');
    }
}

let dog = new Animal('dog')
console.log(dog);   // Animal { type: 'dog' }

2.属性

setter 和 getter 方法。ES6 中可以采用和简单的方法将类的属性设置为只读或者可修改。

在属性的前面加上 set 或者 get 即可。

设置了 get 之后，该属性只可以被读，不可以被更改。设置了 set 即可自定义条件去修改属性值。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
let _age = 4
class Animal{
    constructor(type){
        this.type = type
    }
    get age(){
        return 4
    }
    // set age (val){
    //     this.realAge = val
    // }
    set age (val){
        if (val < 7 && val > 4) {
            _age = val
        }
    }
    eat(){
    console.log('i am eat food');
    }
}

let dog = new Animal('dog')
console.log(dog.age);   //4

dog.age = 5
// console.log(dog.realAge);
console.log(dog.age);   // 4

3.方法

3.1 静态方法

静态方法是属于类的，调用静态方法只能通过类来调用静态方法。

3.2 ES5 中添加静态方法。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
let Animal = function (type) {
    this.type
}

Animal.prototype.eat = function () {
    Animal.walk()   
    console.log('i am eat food');
}

Animal.walk = function () {
    console.log('i am walking');
}
let dog = new Animal('dog')
dog.eat()   // i am walking //i am eat food
// 执行静态方法。
Animal.walk() // i am walking

3.3 ES 6 中的静态方法。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
class Animal{
    constructor(type){
        this.type = type
    }
    eat(){
        Animal.walk()
        console.log('i am eat food');
    }

    static walk(){
        console.log('walk');
    }
}

let dog = new Animal('dog')
dog.eat() // walk  // i am eat food

4.继承

4.1 在ES5 中实现继承

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
let Animal = function (type) {
    this.type = type
}

Animal.prototype.eat = function () {
    console.log('Animal, i am eat food');
}

// 通过 call 方法继承属性
let Dog = function (name) {
    Animal.call(this,name)
    this.name = name
}

// 通过 new 继承父类原型对象上面的方法
Dog.prototype = new Animal()

let erHa = new Dog('dog','erHa')
console.log(erHa);  // Animal { type: 'dog', name: 'dog' }
erHa.eat(); // Animal, i am eat food

4.2ES6 实现继承

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
class Animal{
    constructor(type){
        this.type = type
    }
    eat(){
    console.log('i am eat food');
    }
}

class Monkey extends Animal{
    // 当继承的属性不需要增加其他属性的情况下。constructor 可以省略
    // constructor(type){
    //     super(type)
    // }
    constructor(type,gender){
        // super() 必须写在最前面
        super(type)
        this.gender = gender
    }
}

let monkey  = new Monkey('monkeyKing','male')
console.log(monkey); //Monkey { type: 'monkeyKing', gender: 'male' }
monkey.eat() // i am eat food

Author：John Doe

原文链接：http://example.com/2020/08/30/2020-8-30-ES6-03-class/

发表日期：August 30th 2020, 12:00:00 am

更新日期：August 30th 2020, 8:45:44 pm

版权声明：本文采用知识共享署名-非商业性使用 4.0 国际许可协议进行许可

CATALOG
  1. 1. 1.声明
    1. 1.1. 1.1 ES5 创建类的方法
    2. 1.2. 1.2 ES6 创建类的方法
  2. 2. 2.属性
  3. 3. 3.方法
    1. 3.1. 3.1 静态方法
    2. 3.2. 3.2 ES5 中添加静态方法。
    3. 3.3. 3.3 ES 6 中的静态方法。
  4. 4. 4.继承
    1. 4.1. 4.1 在ES5 中实现继承
    2. 4.2. 4.2ES6 实现继承
Total : 16
2020
小程序 NodeJS ES6 杂记 HTML CSS JavaScript
CSS 小程序 Node JavaScript 杂记 HTML 前端