React知识铺垫

最新推荐文章于 2024-03-26 00:44:05 发布

代码界小菜鸟

最新推荐文章于 2024-03-26 00:44:05 发布

阅读量172

点赞数

分类专栏： react 文章标签： react

本文链接：https://blog.csdn.net/m0_61927991/article/details/126591057

版权

react 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

本章节没有放body以外的代码

一、类的基本知识

<body>
  <script>
    //创建一个Person类
    class Person {
      //构造器函数
      constructor(name, age) {
        //构造器的this是谁？————类的实例对象
        this.name = name
        this.age = age
      }
      // 一般方法
      speak() {
        //speak方法放在了哪里？————类的原型对象上，供给实例使用
        // 通过Person实例调用speak时，speak中的this就是Person实例
        console.log(`我叫${this.name},我年龄是${this.age}`);
      }
    }

    //创建一个Student类，继承于Person类
    class Student extends Person {
      constructor(name, age, grade) {
        super(name, age) //super必须放在最上面不能放在其他人的下面
        this.grade = grade
      }

      // 一般方法
      speak() {
        //speak方法放在了哪里？————类的原型对象上，供给实例使用
        // 通过Person实例调用speak时，speak中的this就是Person实例
        console.log(`我叫${this.name},我年龄是${this.age},我读的是${this.grade}`);
        this.study()
      }

      study() {
        console.log('我很努力学习');
      }
    }

    // 创建一个Car类
    class Car {
      constructor(name, price) {
        this.name = name
        this.price = price
        // this.wheel = 4
      }
      // 类中可以直接写赋值语句,如下代码的含义就给Car的实例对象添加一个属性，名为a，值为1
      a = 1
      wheel = 4
      static demo = 100  //这个是给类的自身加一百
    }

    const c1 = new Car('奔驰c63', 199)
    console.log(c1)
    console.log(Car.demo)

    //创建一个Person的实例对象
    const p1 = new Person('tom', 18)
    const p2 = new Person('jerry', 19)
    console.log(p1);
    console.log(p2);
    p1.speak()
    p2.speak()
    // p1.speak.call({ a: 1, b: 2 }) //call改变了他的this指向 undefined  undefined


    //创建一个学生的实例
    const s1 = new Student('小张', 15, "高一")
    console.log(s1);
    s1.speak()
    s1.study()

    /*
      总结：
      1.类中的构造器不是必须写的，要对实例进行初始化操作，如添加属性时才写。
      2.如果A类继承了B类，且A类中写了构造器，那么A类构造器中的super是必须要调用的。
      3.类中定义的方法，都是放在原型对象上，供给其调用
    */
  </script>
</body>

二、原生事件绑定

<body>
  <button id="btn1">按钮1</button>
  <button id="btn2">按钮2</button>
  <button onclick="demo()">按钮3</button>

  <script>
    const btn1 = document.querySelector('#btn1')
    btn1.addEventListener('click', () => {
      alert('按钮1被点击了')
    })

    const btn2 = document.querySelector('#btn2')
    btn2.onclick = () => {
      alert('按钮2被点击了')
    }

    function demo() {
      alert('按钮3被点击了')
    }
  </script>
</body>

三、类方法中的this指向

<body>
  <script>
    class Person {
      constructor(name, age) {
        this.name = name
        this.age = age
      }

      speak() {
        console.log(this);
      }
    }

    const p1 = new Person('tom', 18)
    p1.speak() //通过实例调用 Person {name: 'tom', age: 18}
    const x = p1.speak
    x() // 默认开启严格模式这个undefined因为开启了严格模式


    function demo1() {
      'use strict'
      console.log(this);
    }

    function demo2() {
      console.log(this);
    }

    demo1() // // 这个undefined因为开启了严格模式
    demo2() // window

  </script>
</body>

四、bind修改this指向

<body>
  <script>
    function demo() {
      console.log(this);
    }
    demo() //指向的是Window
    const x = demo.bind({ a: 1, b: 2 })
    x()
  </script>
</body>

五、展开运算符

<body>
  <script>
    let arr1 = [1, 3, 5, 7, 9]
    let arr2 = [2, 4, 6, 8, 10]
    console.log(...arr1); //展开一个数组
    console.log([...arr1, ...arr2]); //链接数组

    // 在函数中使用
    function sum(...num) {
      return num.reduce((preValue, CurrentValue) => {
        return CurrentValue += preValue
      }, 0)
    }

    console.log(sum(1, 2, 3, 4));

    // 构造字面量对象时使用展开语法
    let person = { name: 'tom', age: 18 }
    let person2 = { ...person }
    // console.log(...person); //报错,展开运算符不能展开对象
    person.name = "jeeryy"
    console.log(person2.name);

    //合并
    let person3 = { ...person, name: 'jack', address: '地球' }
    console.log(person3);
  </script>
</body>

六、对象相关知识

<body>

  <script>
    let a = "name"
    let obj = {}; // {name:'tome'}
    obj[a] = 'tom'
    console.log(obj);
  </script>
</body>

七、函数柯里化

<body>
  <script>
    // function sum(a, b, c) {
    //   return a + b + c
    // }

    function sum(a) {
      return (b) => {
        return (c) => {
          return a + b + c
        }
      }
    }

    // console.log(sum(1, 2, 3));
    console.log(sum(1)(2)(3));
  </script>
</body>