面向对象的原型：prototype，原型链

陌一一

已于 2022-11-06 11:47:30 修改

阅读量293

点赞数

分类专栏： web前端开发文章标签： javascript 开发语言 ecmascript es6 原型模式

于 2022-11-05 22:58:05 首次发布

本文链接：https://blog.csdn.net/a1598452168YY/article/details/127710200

版权

web前端开发专栏收录该内容

281 篇文章 16 订阅

订阅专栏

面向对象的应用：

<body>
    <div class="box1">
        <h1></h1>
        <ul></ul>
    </div>
    <div class="box2">
        <h1></h1>
        <ul></ul>
    </div>

    <script>
        var data1 = {
            title:"体育",
            list:["体育-1","体育-2","体育-3"]
        }
        var data2 = {
            title:"综艺",
            list:["综艺-1","综艺-2","综艺-3"]
        }
        function CreateList(select,title,list){
            this.ele = document.querySelector(select)
            this.title = title,
            this.list = list,
            this.render = function(){
                var h1 = this.ele.querySelector("h1")
                var ul = this.ele.querySelector("ul")
                // console.log(h1,ul)
                h1.innerHTML = this.title
                ul.innerHTML = this.list.map(item=>`<li>${item}</li>`).join("")
            }
        }

        var obj1 = new CreateList(".box1",data1.title,data1.list)
        obj1.render()
        var obj2 = new CreateList(".box2",data2.title,data2.list)
        obj2.render()
        
    </script>
</body>

结果：

现在我们可以使用“面向对象的原型”的思路来做，把render函数拿出来，用原型表示：

<body>
    <div class="box1">
        <h1></h1>
        <ul></ul>
    </div>
    <div class="box2">
        <h1></h1>
        <ul></ul>
    </div>

    <script>
        var data1 = {
            title:"体育",
            list:["体育-1","体育-2","体育-3"]
        }
        var data2 = {
            title:"综艺",
            list:["综艺-1","综艺-2","综艺-3"]
        }
        function CreateList(select,title,list){
            this.ele = document.querySelector(select)
            this.title = title,
            this.list = list
        }
        CreateList.prototype.render = function(){
                var h1 = this.ele.querySelector("h1")
                var ul = this.ele.querySelector("ul")
                // console.log(h1,ul)
                h1.innerHTML = this.title
                ul.innerHTML = this.list.map(item=>`<li>${item}</li>`).join("")
            }

        var obj1 = new CreateList(".box1",data1.title,data1.list)
        obj1.render()
        var obj2 = new CreateList(".box2",data2.title,data2.list)
        obj2.render()
        //对象._proto_ === 构造函数.prototype
        
    </script>
</body>

把render函数拿出来写，按照面向对象的原型方法写就是上面的：构造函数.prototype.render这样子；
因为对象有一个属性__proto__属性===构造函数的原型prototype，所以对象可以访问到render函数，也就是obj1.render成立的原因；
对象.__proto__===构造函数.prototype

为什么会引入原型的概念：

因为按照第一种方法，当我们构造多个函数时，这个函数里面其实在堆区里占用的是不同的空间不是一个空间，而一个render函数虽然执行的代码是一样的，但是obj1和obj2执行的render函数还是不在一个区域，这样就会造成，构造函数越多，空间重复占用越大，浪费空间。

但是我们用原型就可以解决这个问题，用每一个对象去调用同一个原型即可，不会造成重复的空间浪费。