JSON格式

JSON只是一种数据格式，不是新的数据类型：JSON格式的对象、JSON格式大的字符串
属性名用“双引号”包起来，属性值是字符串，也是基于“双引号”包起来
使用：JSON:{stringify,parse}
JSON.stringify(对象)：把对象转换为JSON格式的字符串
JSON.parse(JSON格式的字符串)：把JSON格式的字符串转换为对象

继承

思想（自己理解）：就是让子类能继承父类的特点
案例：好学生拥有学生的特点，学生拥有人类的特点

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

</body>

</html>
<script src=''>
  function Person(name, age) {
    this.name = name;
    this.age = age
    this.height = 666;
    this.tz = 8888;
  }
  Person.prototype.talk = function () {
    console.log("说话")
  }
  Person.prototype.walk = function () {
    console.log("走路")
  }
  let p1 = new Person('小明', 15)

  //  先走要创造一个学生类 Object.create()
  function Student(name, age, id) {
    let qq = this;
    Person.call(qq, name, age) // 私有属性的继承
    // Person(name, age) // 这么执行 里边的this 是window,不是我们的目的；
    // 我们的目的是为了让Person里边的this是当前Student实例
    // qq.name = name;
    // qq.age = age
    qq.id = id
  }
  // Student.prototype = Person.prototype
  // Student.prototype = new Person()   // p2.__proto__ === Person.prototype
  Student.prototype = Object.create(Person.prototype) // p3.__proto__=== Person.prototype
  Student.prototype.constructor = Student;
  Student.prototype.study = function () {
    console.log("学习")
  }
  let s1 = new Student('小红', 13, 88888) // s1.walk

  function Nan(name, age, id, playGame) {
    Student.call(this, name, age, id)
    this.playGame = playGame
  }
  Nan.prototype = new Student()
  Nan.prototype.run = function () {
    console.log("跑的块")
  }
  let n1 = new Nan("晓非", 16, 9999, 'lol')
</script>
<script>
  /* 
    26行执行的时候   Person里边的this是 p1
    31行执行的时候   Person里边的this是 qq
    32行执行的时候   Person里边的this是 window
    函数中的this是谁  有个前提是 函数的某一次执行
  
  */
</script>

class实现【简单快捷】

<script>
  class Person {
    static qq = 123
    constructor(name, age) {
      this.name = name;
      this.age = age;
    }
    static ee = 888
    talk() {}
    walk() {}
    static tt = 999
  }
  Person.yy = 777


  class Student extends Person {
    constructor(name, age, id) {
      super(name, age) // 为了继承Person的私有属性  相当于es5的call继承
      this.id = id
    }
    study() {}
  }
</script>

封装版本

(function () {
    class shopSort {
        constructor(id) {
            this.box = document.getElementById(id);
            this.contentBox = this.box.getElementsByClassName('content')[0]; //填充卡片的盒子
            this.navs = this.box.getElementsByClassName('nav-link');
            this.getData();
            this.render(this.ary); //需要用getData中的ary
            this.bindEvent();

        };
        getData() {
            //这个方法是原型上的一个用来获取数据的方法
            let xhr = new XMLHttpRequest;
            xhr.open('get', './product.json', false);
            xhr.onreadystatechange = () => {
                if (xhr.status == 200 && xhr.readyState == 4) {
                    let ary = JSON.parse(xhr.response);
                    console.log(ary);
                    this.ary = ary;
                }
            };
            xhr.send();
        };
        render(list) {
            //这个方法是原型上用来根据数据渲染页面的方法
            let str = '';
            list.forEach(item => {
                str += `<div class="card">
                <img src="${item.img}" class="card-img-top" alt="" />
                <div class="card-body">
                    <h5 class="card-title">${item.title}</h5>
                    <p class="card-text">价格：￥${item.price}</p>
                    <p class="card-text">时间：${item.time}</p>
                    <p class="card-text">热度：${item.hot}</p>
                </div>
            </div>`
            });
            this.contentBox.innerHTML = str;
        };
         removeArrow() {
             for (let i = 0; i <this.navs.length; i++) {
                 //循环时为了把所有的nav的arrow删掉
                 this.navs[i].classList.remove('arrow_up');
                 this.navs[i].classList.remove('arrow_down');
             }
         };
        bindEvent() {
            let types = ['price', 'time', 'hot']
            for (let i = 0; i < this.navs.length; i++) {
                let flag = 1;
                this.navs[i].onclick = () => { 
                    flag *= -1
                    this.removeArrow();
                     if (flag == 1) {
                         this.navs[i].classList.add('arrow_up')
                         this.navs[i].classList.remove('arrow_down')
                     } else {
                         this.navs[i].classList.remove('arrow_up')
                         this.navs[i].classList.add('arrow_down')
                     };
                    let type = types[i]
                    this.ary.sort((a, b) => {
                        return (('' + a[type).replace(/-/g, '') - ('' + b[type]).replace(/-/g, '')) * flag;
                    });
                    this.render(this.ary);

                }

            };
        };
    };

    window.shopSort = shopSort;
})()

let s1 = new shopSort('productBox') //就能实现商城排序

第二十一章 JS版本商城排序问题

JSON格式

继承

class实现【简单快捷】

封装版本