js--闭包
闭包---非常重要但又难以掌握的概念, 理解闭包可以看做是某种意义上的重生---<<>你不知道的js>
#### 什么是闭包?
一贯的思维方式
-
闭包就是函数内部的子函数 --- 等于没说.
-
当函数可以记住并访问所在的词法作用域时, 就产生了闭包, 计时函数是在当前词法作用域之外执行 ----靠谱
-
闭包就是能够读取其他函数内部变量的函数，在本质上是函数内部和函数外部链接的桥梁——
靠谱 -
函数和对其周围状态（词法环境）的引用捆绑在一起构成闭包（closure）——
很靠谱先看这段代码:
function foo(params) { var a = ‘余光‘; function bar() { console.log(a); } bar() } foo(); // 余光
基于词法作用域的查找规则，`bar函数`可以成功的打印`a`变量，并且它也是`foo`的子函数，
但严格来说它并没有清晰的表达出闭包这一概念，
说它表达的是**嵌套函数可以访问声明于大外部作用域的变量**更准确一些。
#### 1.2 闭包就是能够读取其他函数内部变量的函数，在本质上是函数内部和函数外部链接的桥梁
? 再来看下面的例子：
```javascript
function foo(params) {
var a = ‘余光‘;
function bar() {
console.log(a);
}
return bar;
}
var res = foo();
res(); // 余光
```
结果一致，这是因为此时`res`是执行`foo`函数时返回的`bar`引用，bar函数得以保存了它的环境。
#### 1.3 函数和对其周围状态（词法环境）的引用捆绑在一起构成闭包（closure）
我们来看下面代码：
```javascript
var name = ‘余光‘;
function foo() {
console.log(name); // 余光
}
foo(); //余光
```
foo的上下文被静态的保存了下来，而且是在该函数创建的时候就保存了。下面我们来验证一下：
```javascript
var name = ‘余光‘;
function foo() {
console.log(name); // 余光
}
(function (func) {
var name = ‘老王‘;
func()
})(foo); // 余光
```
这里我们就可以理解——函数被创建后就形成了闭包，他们保存了上层上下文的作用域链并且保存在`[[scope]]`中
### apply、call和bind的共同点，作用？
- 他们都可以去调用别人的方法
- 他们都可以改变this的指向
- 他们的第一个参数都是this对象的指向
- 后续都可以进行参数的传递
### apply、call和bind的区别？
1. **调用的呈现方式不一样**
让我们一起先来看下代码:
```java
class Person{
name="美女"
say(){
console.log(this.name)
}}
//1.创建一个p1实例
let p1=new Person()
//2.创建一个对象
let obj={
name:‘屌丝‘
}
//3.借用美女的方法，喊上屌丝的名字
let newfunc=p1.say.bind(obj）
//bind 会生成一个函数, 不调用不执行
newfunc() // ‘屌丝‘
//call 直接在第二个参数里面写需要传递的参数
p1.say.call(obj,"abc") // ‘屌丝‘
//apply需要将传递的参数放在一个数组里面
p1.say.apply(obj,["abc"]) // ‘屌丝‘
```
js递归
函数中用调用函数自己，此时就是递归，递归一定要有结束条件
function f1() {
console.log("从前有座山，山里有个庙，庙里有个老和尚给小和尚讲故事：");
f1();
};
f1();//浏览器崩溃，因为没有结束条件——死循环
改进如下：
var i=0;
function f1() {
i++;
if (i<5){
f1();
}
console.log("从前有座山，山里有个庙，庙里有个老和尚给小和尚讲故事：");
};
f1();
小栗子：
递归实现：求n个数字的和 n=5 ------->5+4+3+2+1
//for 循环写法：
var sum=0;
for (var i=0;i<=5;i++){
sum+=i;
}
console.log(sum);
----------------------分割线---------------------------
function getSum(x) {
if (x==1){
return 1
}
return x+getSum(x-1);
};
var sum1=getSum(5);
console.log(sum1);
console.log(getSum(10));
//递归案例:求一个数字各个位数上的数字的和: 123 --->6 ---1+2+3
//523
function getEverySum(x) {
if(x<10){
return x;
}
//获取的是这个数字的个位数
return x%10+getEverySum(parseInt(x/10));
}
console.log(getEverySum(1364));//5
//递归案例:求斐波那契数列
function getFib(x) {
if(x==1||x==2){
return 1
}
return getFib(x-1)+getFib(x-2);
}
console.log(getFib(12));
函数防抖(debounce)：触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间。
函数节流(throttle)：高频事件触发，但在n秒内只会执行一次，所以节流会稀释函数的执行频率。
函数节流（throttle）与 函数防抖（debounce）都是为了限制函数的执行频次，以优化函数触发频率过高导致的响应速度跟不上触发频率，出现延迟，假死或卡顿的现象。
函数防抖(debounce)
- 实现方式：每次触发事件时设置一个延迟调用方法，并且取消之前的延时调用方法
- 缺点：如果事件在规定的时间间隔内被不断的触发，则调用方法会被不断的延迟
//防抖debounce代码：
function debounce(fn,delay) {
var timeout = null; // 创建一个标记用来存放定时器的返回值
return function (e) {
// 每当用户输入的时候把前一个 setTimeout clear 掉
clearTimeout(timeout);
// 然后又创建一个新的 setTimeout, 这样就能保证interval 间隔内如果时间持续触发，就不会执行 fn 函数
timeout = setTimeout(() => {
fn.apply(this, arguments);
}, delay);
};
}
// 处理函数
function handle() {
console.log(‘防抖：‘, Math.random());
}
//滚动事件
window.addEventListener(‘click‘, debounce(handle,500));
2、函数节流(throttle)
- 实现方式：每次触发事件时，如果当前有等待执行的延时函数，则直接return
//节流throttle代码：
function throttle(fn,delay) {
let canRun = true; // 通过闭包保存一个标记
return function () {
// 在函数开头判断标记是否为true，不为true则return
if (!canRun) return;
// 立即设置为false
canRun = false;
// 将外部传入的函数的执行放在setTimeout中
setTimeout(() => {
// 最后在setTimeout执行完毕后再把标记设置为true(关键)表示可以执行下一次循环了。
// 当定时器没有执行的时候标记永远是false，在开头被return掉
fn.apply(this, arguments);
canRun = true;
}, delay);
};
}
function sayHi(e) {
console.log(‘节流：‘, e.target.innerWidth, e.target.innerHeight);
}
window.addEventListener(‘resize‘, throttle(sayHi,500));
总结：
函数防抖：将多次操作合并为一次操作进行。原理是维护一个计时器，规定在delay时间后触发函数，但是在delay时间内再次触发的话，就会取消之前的计时器而重新设置。这样一来，只有最后一次操作能被触发。
函数节流：使得一定时间内只触发一次函数。原理是通过判断是否有延迟调用函数未执行。
区别： 函数节流不管事件触发有多频繁，都会保证在规定时间内一定会执行一次真正的事件处理函数，而函数防抖只是在最后一次事件后才触发一次函数。 比如在页面的无限加载场景下，我们需要用户在滚动页面时，每隔一段时间发一次 Ajax 请求，而不是在用户停下滚动页面操作时才去请求数据。这样的场景，就适合用节流技术来实现。