ES6箭头函数this指向

梓逸
2021-08-31 / 0 评论 / 3 阅读 / 正在检测是否收录...
温馨提示:
本文最后更新于2021年11月17日,已超过14天没有更新,若内容或图片失效,请留言反馈。

LDB(%)9BDE{E)(M5T[$`CO7.png

箭头函数的this特性

  1. 箭头函数没有自己的this对象。这里说的没有指的是箭头函数本身无法有效的使用this,它指向的永远是自己的父作用域
  2. 箭头函数的this永远指向其父作用域。在没有规划父级作用域的情况下,执行代码中最高级别的,也就是window
  3. 任何方法都改变不了this,包括call,apply,bind
  4. 不可以当作构造函数,也就是说,不可以使用new命令,否则会抛出一个错误。
  5. 不可以使用arguments对象,该对象在函数体内不存在。如果要用,可以用Rest参数代替。
  6. 不可以使用yield命令,因此箭头函数不能用作Generator函数。

需求一: 该蓝色div点击之后 2s之后颜色更改成粉色

使用原版的this写法:

cont.addEventListener('click', function() {
                let _this = this;
                setTimeout(() => {
                    this.style.background = "pink";
                    console.log(this);
                }, 2000)
            })

需要在第二行处定义一个this指向cont,如果不定义this的话会指向window,而不是cont
ES6箭头函数写法:

cont.addEventListener('click', function() {
                setTimeout(() => {
                    this.style.background = "pink";
                    console.log(this);
                }, 2000)
            })

在延时器处使用箭头函数,这时里面的this会指向外面一层的cont
LDB(%)9BDE{E)(M5T[$`CO7.png

0

评论

博主关闭了所有页面的评论