《你不知道的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
相关推荐
咖啡の猫28 分钟前
Vue初始化脚手架
前端·javascript·vue.js
晨枫阳39 分钟前
uniapp兼容问题处理总结
前端·vue.js·uni-app
liusheng2 小时前
腾讯地图 SDK 接入到 uniapp 的多端解决方案
前端·uni-app
拉不动的猪2 小时前
如何处理管理系统中(Vue PC + uni-app 移动端):业务逻辑复用基本方案
前端·javascript·架构
边洛洛2 小时前
next.js项目部署流程
开发语言·前端·javascript
Zsnoin能2 小时前
浏览器连接 新北洋BTP-P33/P32蓝牙打印机,打印 二维码
前端
非凡ghost2 小时前
Syncovery Premium(文件同步软件)
前端·javascript·后端
trsoliu2 小时前
2025前端AI Coding产品与实战案例大盘点
前端·ai编程
云中雾丽2 小时前
react-checkbox的封装
前端
乐园游梦记2 小时前
告别Ctrl+F5!解决VUE生产环境缓存更新的终极方案
前端