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

最新推荐文章于 2024-04-19 00:17:37 发布

凯小默

最新推荐文章于 2024-04-19 00:17:37 发布

阅读量205

点赞数 1

分类专栏： JavaScript 文章标签： es6 javascript

本文链接：https://blog.csdn.net/kaimo313/article/details/125858261

版权

JavaScript 专栏收录该内容

67 篇文章 4 订阅

订阅专栏

说明

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>

在这里插入图片描述

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>

在这里插入图片描述

这里添加方法还可以使用 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>