构造函数-原型对象（利用原型挂载解决内存占用问题）

最新推荐文章于 2023-06-20 10:03:18 发布

喵帕斯_喵太

最新推荐文章于 2023-06-20 10:03:18 发布

阅读量385

点赞数

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

本文链接：https://blog.csdn.net/miaopasi_poi/article/details/116331916

版权

javascript 专栏收录该内容

58 篇文章 2 订阅

订阅专栏

01-构造函数-原型对象（利用原型挂载解决内存占用问题）

构造函数链接：构造函数解决内存占用问题方法之一

<body>
    <script>
        // 解决内存占用问题
        function CreateTeacher(name, age) {
            this.name = name
            this.age = age
        }

        // 将为函数的属性：挂载到原型对象上
        CreateTeacher.prototype.say = function () {
            console.log(`我是${this.name},我今年${this.age}岁`)
        }

        let t1 = new CreateTeacher('小白', 30)
        let t2 = new CreateTeacher('前端', 50)

        t1.say()
        t2.say()

        console.log(t1, t2)

        // 证明：两个say不占用内存
        console.log(t1.say === t2.say)  // true
    </script>
</body>

02-构造函数-原型对象(含义解释)

<body>
    <script>
        // 原型对象：只要是个函数，系统一定会为函数 自动 产生一个对象：原型对象prototype

        // 函数如何找到自己的原型对象呢？
        // 函数名.prorotype
        function a() { }

        console.log(a.prototype)
        // 原型对象中默认只有一个属性：constructor，指向所在的构造函数

        // 构造函数：男人
        // 男人找女人：男人.prototype
        // 原型对象：系统分配的女人
        // 女人找男人：constructor

        // 一对一关系：证明
        console.log(a.prototype.constructor == a)   // true


        // 原型对象是一个对象：对象是否可以添加属性？且非常安全
        // 男人.女人.新增属性 = 新的属性值
        // 构造函数.prototype.属性名 = 值
        a.prototype.say = function () {
            console.log('我是要成为海贼王的男人')
        }

        // 原型对象中的方法：给对象用，构造函数产生的对象
        let objA = new a()
        objA.say()

        // 对象的原型对象(__proto__) === 构造函数的原型对象(prototype)
        console.log(objA.__proto__ === a.prototype)     // true


        // 总结
        // 1. 是函数一定会有原型对象：系统产生
        // 2. 函数如何找到原型对象：函数名.prorotype
        // 3. 原型对象中默认有一个属性：constructor，指向构造函数本身

        // 4. 构造函数的作用：new产生对象，产生的对象与构造函数没有直接关联（间接有）
        // 5. 构造函数产生对象可以通过__proto__找到原型对象

        // 以上就是原型的三角关系

        // 解决的问题
        // 1. 原型对象只有1个：将方法存储到原型对象中，占用一份内存
        // 2. 原型对象是对象：方法存在对象里面不存在覆盖问题，与全局隔离：安全
    </script>
</body>

在这里插入图片描述

喵帕斯_喵太

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
构造函数-原型对象（利用原型挂载解决内存占用问题）

01-构造函数-原型对象（利用原型挂载解决内存占用问题）构造函数链接：构造函数解决内存占用问题方法之一<body> <script> // 解决内存占用问题 function CreateTeacher(name, age) { this.name = name this.age = age } // 将为函数的属性：挂载到原型对象上 Crea
复制链接

扫一扫