为了账号安全,请及时绑定邮箱和手机立即绑定
首页 手记 【九月打卡】第17天...

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

2022.09.21 15:52 53浏览

学习课程名称: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


图片描述

点击查看更多内容
0人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
Web前端工程师
手记
粉丝
1
获赞与收藏
2

关注TA,一起探索更多经验知识

同主题相似文章浏览排行榜

风间影月说签约讲师

50篇手记,涉及Java、MySQL、Redis、Spring等方向

进入讨论

Tony Bai 说签约讲师

146篇手记,涉及Go、C、Java、Python等方向

进入讨论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消