解决构造函数创建对象所造成的内存浪费问题

最新推荐文章于 2023-07-21 19:09:14 发布

h_jQuery

最新推荐文章于 2023-07-21 19:09:14 发布

阅读量480

点赞数 1

分类专栏： javascript HTML5 css3 文章标签： js javascript prototype html5 css

本文链接：https://blog.csdn.net/h_jQuery/article/details/117258859

版权

javascript 同时被 3 个专栏收录

123 篇文章 0 订阅

订阅专栏

HTML5

22 篇文章 0 订阅

订阅专栏

css3

18 篇文章 0 订阅

订阅专栏

构造函数（自定义构造函数）创建对象的问题：创建多少个对象就会创建多少个方法，严重浪费内存空间

<script>
        function Person(uname, age) {
            this.uname = uname
            this.age = age
            this.sayHi = function() {
                console.log("hello");
            }
        }
        // 自定义构造函数的问题：
        // 两者存放是地址值，而不是数据，该地址值标识一个空间，数据就存放在那个空间内
        // 两者指向的是不同的地址（空间），但是地址内的内容是相同的
        // 创建了多个对象，就开辟了多个空间（指向不同的地址）
        var zs = new Person("zs", 30)
        var ls = new Person("ls", 26)
        console.log(zs);
    </script>

<!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 sayHi() {
            console.log("hello");
        }

        function run() {
            console.log("我喜欢跑步");
        } */
        // 使用对象的方式来封装，减少了全局污染，但仍在存在，对象名也可能会重复
        var obj = {
            sayHi() {
                console.log("hello");
            },
            run() {
                console.log("我喜欢跑步");
            }
        }

        function Person(uname, age) {
            this.uname = uname
            this.age = age
            this.sayHi = obj.sayHi
            this.run = obj.run
        }
        var zs = new Person("zs", 20)
        var ls = new Person("ls", 24)
        zs.sayHi();
        ls.sayHi();
        //两者指的是同一个对象内的函数
        console.log(zs.sayHi === ls.sayHi); //true
    </script>
</body>

</html>

原型

1.任何函数都有prototype属性

2.函数的prototype属性值是一个对象，把这个对象叫做原型（原型对象）

3.原型的作用：通过构造函数创建的实例对象，可以直接访问构造函数的prototype属性上的任意成员

<!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>原型</title>
</head>

<body>
    <script>
        function Person() {}
        // 原型：prototype
        Person.prototype.sayHi = function() {
            console.log("singing");
        }
        var p1 = new Person();
        var p2 = new Person();
        // p1的sayHi和p2的sayHi方法是同一个方法，都是来源于原型对象上的sayHi方法
        p1.sayHi();
        p2.sayHi();
        console.log(p1.sayHi === p2.sayHi); //true
    </script>
</body>

</html>

解决构造函数创建对造成的内存浪费问题的最终解决方法：使用原型

h_jQuery

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
解决构造函数创建对象所造成的内存浪费问题

构造函数（自定义构造函数）创建对象的问题：创建多少个对象就会创建多少个方法，严重浪费内存空间<script> function Person(uname, age) { this.uname = uname this.age = age this.sayHi = function() { console.log("hello"); }
复制链接

扫一扫