React学习笔记-02.知识点复习01-类的基本知识 02-原生事件绑定 03-类中方法 this 的指向 04-展开

01-类的基本知识

<!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>01-函数式组件</title>
  </head>
  <body>
    <script type="text/JavaScript">
      /**
       * 总结
       * 1. 类的实例不是必须写的,需要对实例进行一些初始化操作挥着添加属性的属性需要写
       * 2. 如果A类继承了B类,且A类写了构造器,那么A类构造器中 super() 必须要调用
       * 3. 类中所定义的方法,都是放在类的原型对象上,供实例去使用
       */
      class person {
        // 构造器方法
        constructor(name, age) {
          // 构造器中的this-->类的实例对象(也就是谁new的)
          this.name = name;
          this.age = age;
        }
        // 一般方法
        speak() {
          // speak 方法放在了--->类的原型对象上; 供实例使用
          // 通过person实例调用时候,speak的this就是person实例
          console.log("我叫", this.name, "我年龄是", this.age);
        }
      }
      const p1 = new person("小张", 100);
      const p2 = new person("小红", 101);
      console.log(p1);  // person {name: '小张', age: 100}
      console.log(p2);  // person {name: '小红', age: 101}
      console.log(p1.speak()); //我叫 小张 我年龄是 100
      //   创建一个student类继承于person
      class student extends person {
        constructor(name, age, grade) {
          super(name, age);
          this.grade = grade;
        }
        speak() {
          console.log(
            "我叫",
            this.name,
            "我年龄是",
            this.age,
            "我上年纪",
            this.age
          );
        }
        study() {
          // study 方法放在了--->类的原型对象上; 供实例使用
          // 通过 student 实例调用时候, study 的 this 就是 student 实例
        }
      }
      const s1 = new student("小白", 10, "六年级");
      const s2 = new student("小黑", 11, "五年级");
      s1.speak(); // 我叫 小白 我年龄是 10 我上年纪 10
      console.log(s1);  // student {name: '小白', age: 10, grade: '六年级'}
      console.log(s2);  // student {name: '小黑', age: 11, grade: '五年级'}
    </script>
  </body>
</html>

02-原生事件绑定

<!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>
    <button id="btn1">按钮1</button>
    <button id="btn2">按钮2</button>
    <button id="btn3" onclick="demo3()">按钮3</button>
    <script>
      const btn1 = document.getElementById("btn1");
      const btn2 = document.getElementById("btn2");
      const btn3 = document.getElementById("btn3");
      btn1.addEventListener("click", () => {
        alert("点击了按钮1");
      });
      btn2.onclick = () => {
        alert("点击了按钮2");
      };
      function demo3(params) {
        alert("点击了按钮3");
      }
    </script>
  </body>
</html>

03-类中方法 this 的指向

<!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>
    <script type="text/javascript">
      class person {
        constructor(name, age) {
          this.name = name;
          this.age = age;
        }
        speak() {
          console.log(this);
        }
      }
      const p1 = new person("tom", 18);
      const x = p1.speak;
      x(); // undefined
      p1.speak(); // person {name: 'tom', age: 18}

      //   function demo(params) {
      //     "use strict"; // this就undefined了
      //     console.log(this); // window
      //   }
      //   demo();
    </script>
  </body>
</html>

04-展开运算符

<!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>
    <script>
      let arr1 = [1, 3];
      let arr2 = [2, 4];

      // 应用1:展开数组
      console.log(...arr1); // 1 3

      // 应用2: 连接数组
      let arr3 = [...arr1, ...arr2];
      console.log(arr3); // (4) [1, 3, 2, 4]

      // 应用3: 配合函数使用
      function sum(...numbers) {
        console.log(numbers); // [1]
        let sum = numbers.reduce((pre, cur) => {
          return pre + cur;
        }, 0);
        return sum;
      }
      console.log(sum(1, 2, 3, 4, 5)); // 15

      // 应用4: 构造字面量对象的时候使用展开语法
      let person = { name: "123", value: "456" };
      let person2 = { ...person }; // 这个写法 {...} 是ES6字面量形式,是被允许的
      // console.log(...person2);    // 展开运算符不能展开对象
      console.log(person2); // {name: '123', value: '456'}

      // 应用4: 合并对象
      let person3 = { ...person, address: "999" };
      console.log(person3); // {name: '123', value: '456', address: '999'}
    </script>
  </body>
</html>