面向对象JS继承

最新推荐文章于 2024-07-12 14:10:05 发布

张若若受s了

最新推荐文章于 2024-07-12 14:10:05 发布

阅读量111

点赞数

文章标签： javascript 原型模式开发语言

本文链接：https://blog.csdn.net/weixin_53286240/article/details/126699294

版权

<!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>
      <ul></ul>
      <img src="" alt="" />
    </div>
    <script>
      var data1 = {
        title: "体育",
        list: ["体育-1", "体育-2", "体育-3"],
      };
      var data2 = {
        title: "综艺",
        url: "https://pic.maizuo.com/usr/movie/5b5400f760e89d1ae725f6b67b95ba3a.jpg?x-oss-process=image/quality,Q_70",
        list: ["综艺-1", "综艺-2", "综艺-3"],
      };
      CreateList.prototype.render = function () {
        //渲染页面
        var h1 = this.ele.querySelector("h1");
        var ul = this.ele.querySelector("ul");
        h1.innerHTML = this.title;
        ul.innerHTML = this.list.map((item) => `<li>${item}</li>`).join("");
      };
      function CreateList(select, data = {}) {
        this.ele = document.querySelector(select);
        this.title = data.title;
        this.list = data.list;
      }
      var obj1 = new CreateList(".box1", data1);
      obj1.render();

      CreateImgList.prototype = new CreateList();
      //增强方法一
      //   CreateImgList.prototype.enhanceRender = function () {
      //     // 渲染页面
      //     this.render();
      //     var img=this.ele.querySelector('img');
      //     img.src=this.imgUrl;
      //     img.style.width='200px';
      //   };
      // 增强方法二
      CreateImgList.prototype.render = function () {
        CreateList.prototype.render.call(this);
        var img = this.ele.querySelector("img");
        img.src = this.imgUrl;
        img.style.width = "200px";
      };

      function CreateImgList(select, data) {
        CreateList.call(this, select, data);
        this.imgUrl = data.url; // 新增属性
      }

      var obj2 = new CreateImgList(".box2", data2);
      //   obj2.enhanceRender();
      obj2.render();

      console.log(obj2);
    </script>
  </body>
</html>