JavaScript 原型的使用(prototype)

最新推荐文章于 2022-04-25 10:52:24 发布

原创最新推荐文章于 2022-04-25 10:52:24 发布 · 248 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #原型 #prototype

JavaScript 专栏收录该内容

140 篇文章

订阅专栏

本文介绍了JavaScript中构造函数Person的定义及原型的两种使用方法：通过动态特性添加成员和直接替换原型对象。展示了不同方法下对象实例的行为差异。

demo.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function Person(name, age, gender) {
            this.name = name;
            this.age = age;
            this.gender = gender;
        }

        //原型的使用方法
        //1.利用对象的动态特性给原型对象添加成员 (添加的属性少,建议使用该方式)
        //2.直接替换原型对象 (添加的属性多,建议使用该方式)

        //如果使用第二种方式使用原型，那么会出现如下问题：
        //在替换原型之前创建的对象的原型 和 在替换原型对象之后的创建的对象的原型 不是同一个！

        //为原型对象动态添加属性
        Person.prototype.sayHello = function () {
            console.log("Nice to meet you all");
        }

        var p = new Person("刘能", 18, "male");
        p.sayHello();  // 替换原型之前的对象的原型成员

        //直接替换原型对象
        Person.prototype = {
            msg : "aaaa"
        };

        var p1 = new Person("xzy",18,"male");
        console.log(p1.msg);

        p1.sayHello();  //(抛异常) 替换原型之后实例化的对象,原型是新替换的原型。
        p.sayHello();   //替换原型之前实例化的对象,原型还是之前的原型。


    </script>
</head>
<body>

</body>
</html>