碎知识点笔记

1.节流和防抖函数：
          节流函数：在函数需要频繁触发的时候,函数执行一次后,只有大于设定的执行周期后才会执行下一次,适合多次事件按照时间分配来触发
          应用的场景:
         窗口的调用,页面的滚动,DOM的元素的拖拽(mounsemove),疯狂的抢购(mounsedown)
         function throttle(callback, time) {
              let start = 0 // 保证第一次事件必然是调用的
              return function (...args) {
                console.log('throttle事件触发')
                const current = Date.now() // 当前时间
                // 判断条件是否满足
                if (current - start > time) {
                  start = current
                  callback.apply(this, args)
                }
              }
            }
         防抖函数：在函数需要频繁触发的时候,在规定的时间内,只能让最后一次是生效的,之前都不触发
         应用的场景:
                    实时的搜索联想:keyup
                    文本框输入验证(输入内容,需要发送ajax请求)
        function debounce(callback, time) {
          return function (...args) {
            console.log('debounce事件触发')
            // 清理定时器的操作
            if (callback.timeId) {
              clearTimeout(callback.timeId)
            }
            callback.timeId = setTimeout(() => {
              // 删除保存的定时器id
              delete callback.timeId
              callback.apply(this, args)
            }, time);
    
          }
        }
    
2.懒加载：让进入到窗口的资源先加载，没进入到窗口的资源先不加载，等快进入到窗口在加载（12.24）
    
3.new 关键字: 4件事:
      1. 申请一块空闲的空间,
      2. 设置this为当前的实例对象
      3. 初始化属性和方法的值
      4. 返回当前实例对象this
      
4.帧动画
     window.requestAnimationFrame():参数是一个回调函数
     
5.this:        
    - this 首先是一个关键字,其实也是一个特殊的变量，指向是动态的，看函数的调用方式
    
    - 普通函数
      - 函数直接调用 fn() --> window
        - 在 ES5 严格模式下('use strict') --> undefined
      - 函数隐式调用 obj.fn() --> obj
      - 函数显示调用 fn.call/apply(obj) --> obj
      - 函数 new 调用 new fn() --> 实例对象
      - 事件的回调函数：指向被绑定事件的 DOM 元素
      - 定时器的回调函数：window
        - 在 ES5 严格模式下('use strict') --> undefined
    
    - 特殊函数
      - ES6 的箭头函数：指向离它最近，包裹它函数的 this（没有就是 window）
        - 在 ES5 严格模式下 之前指向 window --> undefined
        - 不能被 new 调用，不能被 call/apply 改变 this 指向
      
    - ES6 类语法（class）中的方法：指向类的实例对象
       
    
6.闭包:
    函数嵌套,内部函数引用外部函数变量,使用内部函数
    
7.实现JS中的继承
      1. 通过改变原型指向实现继承
      2. 借用构造函数实现继承
      3. 组合继承
      4. 拷贝继承:浅拷贝和深拷贝(递归后再说)
      5. class
      
8.apply(),call(),bind()
      apply():[].forEach.apply(obj,[function(){}]):第一个参数是改变函数的调用者(函数的this指向也改变)，第二个参数是数组放着函数的参数，函数会直接调用
      call():[].forEach.call(obj,function(){},num):第一个参数是改变函数的调用者(函数的this指向也改变)，第二、三...个参数放着函数的参数，函数会直接调用
      bind(obj)：第一个参数是改变函数的调用者(函数的this指向也改变)
      
      
         注意：bind方法不会修改原函数，会返回一个新函数，新函数的this才发生变化
     
9.严格模式(在所有js代码上面加'use strict')
          函数中的this为undefined
    创建eval作用,传入字符串,解析代码---几乎不用,不安全
    有严格模式,结果是20，没有严格模式是123
          var a = 20;
          eval("var a=123; alert(a)")
          console.log(a)
        
10.类的语法
    class Person{
        //添加在原型上
        set(){},
        //添加在实列对象上
        set=function(){}
    }
    
11.高阶函数(作用是：外层函数向内层函数传参,闭包的典型应用)
    1) 执行函数返回值是一个函数
     2) 执行函数传入的参数是函数
         
12.js jsx ts tsx的区别
    1)js和ts的区别
        TypeScript 是JavaScript 的超集，即包含JavaScript 的所有语法，并扩展了JavaScript 的语法。相比于JavaScript ，
        它还增加了静态类型、类、模块、接口和类型注解方面的功能，更易于大项目的开发。ts文件最终要被编译成js文件才能被浏览器识别
        TypeScript 相比于JavaScript 的优势总结为以下几点:
            1.便于开发人员做注释。
            2.能帮助开发人员检测出错误并修改。
            3.TypeScript工具使重构更变的容易、快捷。
            4.TypeScript 引入了 JavaScript 中没有的“类”概念。
            5.TypeScript 中引入了模块的概念，可以把声明、数据、函数和类封装在模块中。
            6.类型安全功能能在编码期间检测错误，这为开发人员创建了一个更高效的编码和调试过
    2)js和jsx的区别
        JSX就是Javascript和XML结合的一种格式，利用HTML语法来创建虚拟DOM。
        当遇到<，JSX就当HTML解析，遇到{就当JavaScript解析。
        JSX只是为 React.createElement(component, props, …children)方法提供的语法糖。
    3)jsx和tsx
        jsx和tsx是一样的，jsx是在js文件中利用HTML语法来创建虚拟DOM,tsx是在ts文件中利用HTML语法来创建虚拟DOM