《你不知道的JavaScript-上卷》第一部分-附录C-笔记-this词法

箭头函数

js 复制代码
var foo = a => {
    console.log( a );
};

foo( 2 ); // 2

箭头函数修复了this指向的一个问题。问题代码如下

js 复制代码
    var obj = {
      id: "awesome",
      cool: function coolFn() {
        console.log(this.id);
      }
    };
    var id = "not awesome"
    obj.cool(); // 酷
    setTimeout(obj.cool, 100); // 不酷 这里的this指向window,没有指向obj

旧的修复方式1,通过闭包来解决

  • 使用self变量引用声明时指向的this
js 复制代码
    var obj = {
      count: 0,
      cool: function coolFn() {
        var self = this;
        if (self.count < 1) {
          setTimeout(function timer() {
            self.count++;
            console.log("awesome?");
          }, 100);
        }
      }
    };
    obj.cool(); // awesome?

箭头函数也可以修复这个this绑定问题

  • 箭头函数在涉及 this 绑定时的行为和普通函数的行为完全不一致
  • 是用当前的词法作用域覆盖了 this 本来的值
  • 这个代码片段中的箭头函数"继承"了 cool() 函数的 this 绑定(因此调用它并不会出错)。
js 复制代码
    var obj = {
      count: 0,
      cool: function coolFn() {
        if (this.count < 1) {
          setTimeout(() => { // 箭头函数是什么鬼东西?
            this.count++;
            console.log("awesome?");
          }, 100);
        }
      }
    };
    obj.cool(); // awesome?

还有一种旧的修复方式,就是使用函数的bind方法,进行this绑定

js 复制代码
    var obj = {
      count: 0,
      cool: function coolFn() {
        if (this.count < 1) {
          setTimeout(function timer() {
            this.count++; // this 是安全的
            // 因为 bind(..)
            console.log("more awesome");
          }.bind(this), 100); // look, bind()!
        }
      }
    };
    obj.cool(); // more awesome
相关推荐
知识分享小能手34 分钟前
微信小程序入门学习教程,从入门到精通,微信小程序常用API(上)——知识点详解 + 案例实战(4)
前端·javascript·学习·微信小程序·小程序·html5·微信开放平台
清灵xmf1 小时前
CSS field-sizing 让表单「活」起来
前端·css·field-sizing
文火冰糖的硅基工坊1 小时前
[光学原理与应用-480]:《国产检测设备对比表》
前端·人工智能·系统架构·制造·半导体·产业链
excel1 小时前
Qiankun 子应用生命周期及使用场景解析
前端
weixin_446260851 小时前
Django - 让开发变得简单高效的Web框架
前端·数据库·django
蓝莓味的口香糖2 小时前
【JS】什么是单例模式
开发语言·javascript·单例模式
ObjectX前端实验室3 小时前
【react18原理探究实践】异步可中断 & 时间分片
前端·react.js
SoaringHeart3 小时前
Flutter进阶:自定义一个 json 转 model 工具
前端·flutter·dart
努力打怪升级3 小时前
Rocky Linux 8 远程管理配置指南(宿主机 VNC + KVM 虚拟机 VNC)
前端·chrome
brzhang3 小时前
AI Agent 干不好活,不是它笨,告诉你一个残忍的现实,是你给他的工具太难用了
前端·后端·架构