ES5继承案例

最新推荐文章于 2024-09-16 23:05:35 发布

数星星呀

最新推荐文章于 2024-09-16 23:05:35 发布

阅读量67

点赞数

分类专栏： JS 文章标签： html css 前端 javascript

本文链接：https://blog.csdn.net/qq_52291147/article/details/129989211

版权

JS 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

<!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>
    <div class="box1">
        <h1></h1>
        <ul></ul>
    </div>
    <div class="box2">
        <h1></h1>
        <img src="" style="width:100px"/>
        <ul></ul>
    </div>

    <script>
        var data1 = {
            title:"体育",
            list:["体育-1","体育-2","体育-3"]
        }

        var data2 = {
            title:"综艺",
            url:"https://pic.maizuo.com/usr/movie/3b90090620061bf349c900345cabef62.jpg?x-oss-process=image/quality,Q_70",
            list:["综艺-1","综艺-2","综艺-3"]
        }

        function CreateList(select,data={}){
            this.ele = document.querySelector(select)
            this.title = data.title
            this.list = data.list

            // this.render = 
        }

        // 原型
        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)
        obj1.render()

        function CreateImgList(select,data){
            CreateList.call(this,select,data)
            this.imgUrl = data.url
        }
        // 原型继承
        CreateImgList.prototype = new CreateList()

        // 继承方法
        CreateImgList.prototype.render = function(){
            CreateList.prototype.render.call(this)

            var img = this.ele.querySelector("img")
            img.src = this.imgUrl
        }

        var obj2 = new CreateImgList(".box2",data2)
        obj2.render()
        console.log(obj2)

    </script>
</body>
</html>

效果显示：