17.Class类

Posted on Edited on In

 

1.类的定义

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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
/**
 * ES5实现
 */
function Student(id, name, score) {
    this.id = id;
    this.name = name;
    this.score = score;
}

Student.prototype.display_score = function() {
    console.log(this.name + ' score = ' + this.score);
}

let Tom = new Student(1, "Tom", 90);
console.log(Tom);
// Student {id: 1, name: 'Tom', score: 90}

Tom.display_score();
// Tom score = 90

/**
* ES6实现
*/
class Student {
    constructor(id, name, score) {
        this.id = id;
        this.name = name;
        this.score = score;
    }

    display_score() {
        console.log(this.name + ' score = ' + this.score);
    }
}

let Tom = new Student(1, "Tom", 90);
console.log(Tom);
// Student {id: 1, name: 'Tom', score: 90}

Tom.display_score();
// Tom score = 90

2.类的静态成员

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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
/**
 * 1.ES5 语法实现类的静态成员
 */
function Student() {
    
}
/**
 * name和learn属性属于函数对象，是静态属性，不属于实例对象
 */
Student.name = "John";
Student.learn = function() {
    console.log('study');
};
/**
 * 函数对象的prototype的属性与实例对象是相同的
 */
Student.prototype.id = 1;

let s1 = new Student();
console.log(s1.name);
// undefined

s1.learn();
// Uncaught TypeError: s1.learn is not a function

console.log(s1.id);
// 1

/**
 * 2.ES6 语法实现类的静态成员
 */
/**
 * static修饰的属性和方法属于类，而不属于实例对象
 */
class Student {
    static name = "John";
    static learn() {
        console.log('study');
    };
}

let s2 = new Student();
console.log(s2.name);
// undefined
console.log(Student.name);
// John
s2.learn();
// Uncaught TypeError: s2.learn is not a function
Student.learn();
// undefined

3.类继承

(1) ES5 实现类继承

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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
/**
 * ES5 实现类继承
 */
// 父类：手机
function Phone(brand, price) {
    this.brand = brand;
    this.price = price;
}

Phone.prototype.sendShortMessage = function() {
    console.log("send a short message");
}

// 子类：智能手机
function SmartPhone(brand, price, color, size) {
    Phone.call(this, brand, price);
    this.color = color;
    this.size = size;
}

SmartPhone.prototype = new Phone;
SmartPhone.prototype.constructor = SmartPhone;

// 声明子类的方法
SmartPhone.prototype.takePhoto = function() {
    console.log("take a photo");
}
SmartPhone.prototype.playGame = function() {
    console.log("play game");
}

// 实例化子类
const iphone = new SmartPhone("apple", 8000, "black", "5.5");

console.log(iphone);
/*
SmartPhone
    brand: "apple"
    color: "black"
    price: 8000
    size: "5.5"
    [[Prototype]]: Phone
        brand: undefined
        constructor: ƒ SmartPhone(brand, price, color, size)
        playGame: ƒ ()
        price: undefined
        takePhoto: ƒ ()
        [[Prototype]]: Object
            sendShortMessage: ƒ ()
            constructor: ƒ Phone(brand, price)
            [[Prototype]]: Object
*/
iphone.sendShortMessage();
// send a short message
iphone.takePhoto();
// take a photo
iphone.playGame();
// play game

(2) ES6 实现类继承

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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
// 父类：Phone
class Phone {
    // 构造方法
    constructor(brand, price) {
        this.brand = brand;
        this.price = price;
    }

    // 父类的成员方法
    sendShortMessage() {
        console.log("send a short message");
    }
}

// 子类：SmartPhone
class SmartPhone extends Phone {
    // 构造方法
    constructor(brand, price, color, size) {
        super(brand, price);
        this.color = color;
        this.size = size;
    }

    // 子类的成员方法
    takePhoto() {
        console.log("take a photo");
    }

    playGame() {
        console.log("play game");
    }
}

// 实例化子类
const iphone = new SmartPhone("apple", 8000, "black", "5.5");
console.log(iphone);
/*
SmartPhone
    brand: "apple"
    color: "black"
    price: 8000
    size: "5.5"
    [[Prototype]]: Phone
        constructor: class SmartPhone
        playGame: ƒ playGame()
        takePhoto: ƒ takePhoto()
        [[Prototype]]: Object
            constructor: class Phone
            sendShortMessage: ƒ sendShortMessage()
            [[Prototype]]: Object
*/
iphone.sendShortMessage();
// send a short message
iphone.takePhoto();
// take a photo
iphone.playGame();
// play game

(3) 子类对父类方法的重写

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
// 父类：Phone
class Phone {
    // 父类的成员方法
    sendShortMessage() {
        console.log("send a short message");
    }
}

// 子类：SmartPhone
class SmartPhone extends Phone {
    // 子类覆盖父类的方法
    sendShortMessage() {
        // 注意：子类的方法不可以使用 super 关键字调用父类的同名方法
        // super();
        // Uncaught SyntaxError: 'super' keyword unexpected here

        console.log("send a image message");
    }
}

// 实例化子类
const iphone = new SmartPhone("apple", 8000, "black", "5.5");
iphone.sendShortMessage();
// send a image message

注意：子类的方法不可以使用 super 关键字调用父类的同名方法

4.getter 和 setter

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
28
29
30
class Phone {
    // 获取 Phone 对象的 price 属性值的时候会触发执行此函数
    get price() {
        console.log("read the attribute price value");
        // 此函数 return 的值为：获取 Phone 对象的 price 属性值时得到的值
        // 若没有 return，则获取 Phone 对象的 price 属性值时得到的值为：undefined
        return "price value";
    }

    // 设置 Phone 对象的 price 属性值的时候会触发执行此函数
    // set 函数必须有一个参数
    set price(newPrice) {
        // 可以对要设置的值进行校验，符合要求的值才能设置
        if (isNaN(newPrice)) {
            console.log("the price value must be a number");
        } else {
            console.log(`set the attribute price value, the new value is ${newPrice}`);
        }
        
    }
}

let p = new Phone();
p.price = 8000;
// set the attribute price value, the new value is 8000
p.price = "abc";
// the price value must be a number
console.log(p.price);
// read the attribute price value
// price value