JavaScript基础（Day1）：预编译、this、作用域、防抖、节流

Q1:预编译

预编译阶段，所有变量以及形参为undefined，由于实参形参统一，则a,c分别变成1,2。又由于函数声明将覆盖变量声明 a,c分别变成函数

再去逐行执行，遇到赋值的则覆盖

 Q2：this的使用

直接调用函数时，this. 指全局中的变量

 

函数run被作为对象的方法，即person.run时，这个this.name指对象内部的变量值 

代码中的fun()是直接调用函数，输出222 

a.say()是调用对象中的函数，输出对象中的变量值111

b.say(a.say())相当于调用了a的fun，但由于不是自身调用自身函数（a.say()），则实际等同于fun = a.say，输出222，b.say = a.say相当于把a的say函数复制给了b，再去调用b.say()，就是自身调用了，输出333

 

 箭头函数：

下图箭头函数所在的代码块是该对象obj的代码块，this指向的是外层，即window 

 

 下图中的this指向 obj，因为箭头函数所在的级为function内部，则上一级代码块为obj

Q3：作用域

 函数内部的对象AO，全局对象GO，都是在预编译阶段进行的

Q4：防抖

 防抖：在一定时间间隔内，将多次触发变为一次触发，利用setTimeout

下图为具体实现方法：通过设置计时器t，setTimeout，延时1s执行，每次用户点击，将清掉上一个计时器，然后重新设一个计时器，也就是每一次点击就会在本次点击的时间上延时执行1s

问题是，如何获取当前事件项

函数debounce中的fn参数对应submit，

‘

下图做法虽然能得到结果，但是由于我们不知道function的形参有多少个，因此不能这样用形参

因此我们可以通过实参解决，要使内部的fn要获取debounce内部的arguments[0] 作为参数，需要使用箭头函数获取

为了传多个，我们使用如下方法，采用apply，使用类数组方式传参：

 

注意打印的值，fn.apply(this,arguments)  this是按钮

问题是：第一次点击也会出现延时

如下方法解决，triggleNow是判断标识，为true表示第一次点击直接执行，后续都进行防抖处理。因此，设置firstClick为!t，当t为null，即不在计时器时间内的点击，则点击事件执行；当t不为null，即t在计时器中（用户多次点击时），就让计时器对t进行计时，计时结束将t=null

最终简化版：（第一次点击立即执行，后续会有延时）

 

Q5：节流

节流较为简单，主要通过限制点击时间进行防止多次点击，下图定义超过2000 ms才可以再次点击。begin时间，即上一次点击时间，cur表示现在的点击时间。判断是否距上一次点击超过2000ms，执行点击事件后将begin时间更新