ES6箭头函数this指向

2021 年 10 月 31 日

2321 次浏览

883字数

<img src="https://www.xxhzm.cn/usr/uploads/2021/10/2011546137.png" alt="LDB(%)9BDE{E)(M5T[$`CO7.png" title="LDB(%)9BDE{E)(M5T[$`CO7.png"style=""><h2>箭头函数的this特性</h2><ol><li>箭头函数没有自己的this对象。这里说的没有指的是箭头函数本身无法有效的使用this，它指向的永远是自己的父作用域</li><li>箭头函数的this永远指向其父作用域。在没有规划父级作用域的情况下，执行代码中最高级别的，也就是window</li><li>任何方法都改变不了this，包括call，apply，bind</li><li>不可以当作构造函数，也就是说，不可以使用new命令，否则会抛出一个错误。</li><li>不可以使用arguments对象，该对象在函数体内不存在。如果要用，可以用Rest参数代替。</li><li>不可以使用yield命令，因此箭头函数不能用作Generator函数。</li></ol>需求一： 该蓝色div点击之后 2s之后颜色更改成粉色使用原版的this写法：<pre><code>cont.addEventListener('click', function() {
 let _this = this;
 setTimeout(() =&gt; {
 this.style.background = &quot;pink&quot;;
 console.log(this);
 }, 2000)
 })
</code></pre>需要在第二行处定义一个this指向cont，如果不定义this的话会指向window，而不是cont ES6箭头函数写法：<pre><code>cont.addEventListener('click', function() {
 setTimeout(() =&gt; {
 this.style.background = &quot;pink&quot;;
 console.log(this);
 }, 2000)
 })

</code></pre>在延时器处使用箭头函数，这时里面的this会指向外面一层的cont <img src="https://www.xxhzm.cn/usr/uploads/2021/10/2011546137.png" alt="LDB(%)9BDE{E)(M5T[$`CO7.png" title="LDB(%)9BDE{E)(M5T[$`CO7.png"style="">