React基础篇之复习总结

类的基本知识

<script type="text/javascript" >
  /* 
    总结：
      1.类中的构造器不是必须要写的，要对实例进行一些初始化的操作，如添加指定属性时才写。
      2.如果A类继承了B类，且A类中写了构造器，那么A类构造器中的super是必须要调用的。
      3.类中所定义的方法，都放在了类的原型对象上，供实例去使用。
  */
  //创建一个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)
      this.grade = grade
      this.school = '尚硅谷'
    }
    //重写从父类继承过来的方法
    speak(){
      console.log(`我叫${this.name}，我年龄是${this.age},我读的是${this.grade}年级`);
      this.study()
    }
    study(){
      //study方法放在了哪里？——类的原型对象上，供实例使用
      //通过Student实例调用study时，study中的this就是Student实例
      console.log('我很努力的学习');
    }
  }
  
  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);
</script>

原生事件绑定

<script type="text/javascript" >
  const btn1 = document.getElementById('btn1')
  btn1.addEventListener('click',()=>{
    alert('按钮1被点击了')
  })

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

  function demo(){
    alert('按钮3被点击了')
  }

</script>

类方法中的this指向

<script type="text/javascript" >
  class Person {
    constructor(name,age){
      this.name = name
      this.age = age
    }
    study(){
      //study方法放在了哪里？——类的原型对象上，供实例使用
      //通过Person实例调用study时，study中的this就是Person实例
      console.log(this);
    }
  }

  const p1 = new Person('tom',18)
  p1.study() //通过实例调用study方法
  const x = p1.study
  x()

</script>

展开运算符

<script type="text/javascript" >
  let arr1 = [1,3,5,7,9]
  let arr2 = [2,4,6,8,10]
  console.log(...arr1); //展开一个数组
  let arr3 = [...arr1,...arr2]//连接数组
  
  //在函数中使用
  function sum(...numbers){
    return numbers.reduce((preValue,currentValue)=>{
      return preValue + currentValue
    })
  }
  console.log(sum(1,2,3,4));

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

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

对象相关的知识

<script type="text/javascript" >
  let a = 'name'

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

函数的柯里化

<script type="text/javascript" >
  /* function sum(a,b,c){
    return a+b+c
  } */
  
  function sum(a){
    return(b)=>{
      return (c)=>{
        return a+b+c
      }
    }
  }
  const result = sum(1)(2)(3)
  console.log(result);
</script>