提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  其他

当前栏目

ES6 从入门到精通 # 21：class 类的用法

入门
2023-03-14 22:58:58 时间

说明

ES6 从入门到精通系列（全23讲）学习笔记。



es5 造类

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        function Person(name, age) {
            this.name = name;
            this.age = age;
        }
        Person.prototype.getName = function() {
            return this.name;
        }
        Person.prototype.getAge = function() {
            return this.age;
        }

        let kaimo = new Person("kaimo", 313);
        console.log(kaimo);
        console.log(kaimo.getName());
        console.log(kaimo.getAge());
    </script>
</body>
</html>


6bce6ade974841df81bf3b9c34fc4bc2.png


class 造类

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        class Person {
            // 实例化的时候会被立即调用
            constructor(name, age) {
                this.name = name;
                this.age = age;
            }
            getName() {
                return this.name;
            }
            getAge() {
                return this.age;
            }
        }

        let kaimo = new Person("kaimo", 313);
        console.log(kaimo);
        console.log(kaimo.getName());
        console.log(kaimo.getAge());
    </script>
</body>
</html>


1616668beb4143f6bcd60f5a305077e0.png


这里添加方法还可以使用 Object.assign() 一次性向类中添加多个方法。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        class Person {
            // 实例化的时候会被立即调用
            constructor(name, age) {
                this.name = name;
                this.age = age;
            }
        }

        Object.assign(Person.prototype, {
            getName() {
                return this.name;
            },
            getAge() {
                return this.age;
            }
        })

        let kaimo = new Person("kaimo", 313);
        console.log(kaimo);
        console.log(kaimo.getName());
        console.log(kaimo.getAge());
    </script>
</body>
</html>


cff089b69c254ecd9c3c0ed626291654.png








相关文章