【九月打卡】第17天 BAT大牛带你横扫初级前端JavaScript面试（第二版）

学习课程名称：BAT大牛带你横扫初级前端JavaScript面试（第二版）
章节名称：作用域和闭包（新版）
讲师姓名：双越

课程内容：

1. 作用域和自由变量
2. 闭包
3. this
4. 原型中的this

作用域是什么？
代表着某个变量合法的使用范围

作用域分类：
全局作用域
函数作用域
块级作用域

自由变量：一个变量在当前作用域没有定义，但是被使用了
向上级作用域，一层一层一次寻找，直至找到为止
如果到全局作用域都没找到，则报错 xx is not defined

闭包的核心重点：函数定义的地方和函数执行的地方不一样。

闭包的两种情况：

1. 函数作为参数被传递
2. 函数作为返回值被返回

所有自由变量的查找，都会向上级作用域查找，不是在执行的地方！！！

闭包在实际开发中，有如下应用场景：
隐藏数据（不让外边去改变）

如何做一个简单的 缓存工具

function createCache() {
  const data = {}; // 闭包中的数据，被隐藏，不被外界访问
  return {
    set: function (key, val) {
      data[key] = val;
    },
    get: function (key) {
      return data[key];
    },
  };
}

const demo = createCache();
demo.set("a", 100);
console.log(demo.get("a"));

this 有如下应用场景，比较复杂（场景比较多）

1. 作为普通函数 window
2. 使用call apply bind 改变this的指向
3. 作为对象的方法被调用 this即当前对象
4. 在class 方法中被调用 this即创建的实例
5. 箭头函数 取上级作用域的this

this这里有句话，一定要记住：“this在各个场景中，取什么样的值，是在函数执行的时候确认的，不是在函数定义的时候确认的”

手写bind

Function.prototype.bind = function () {
  // 将参数拆解为数组  列表转换为数组
  const args = Array.prototype.slice.call(arguments);

  // 获取this (数组第一项)
  const t = args.shift();

  // fn1.bind(...) 中的 fn1
  const self = this;

  // 返回一个函数
  return function () {
    return self.apply(t, args);
  };
};

// bind 示例验证
function fn1(a, b, c) {
  console.log("this", this);
  console.log(a, b, c);
  return "this is fn1";
}

const fn4 = fn1.bind1({ x: 100 }, 10, 20, 30);
const res1 = fn3();
console.log(res1);
//this, {x:100}
// 10,20,30
//this is fn1