ES6中的=>（箭头函数）与this-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_35735069/article/details/100107086

本文通过幽默的方式讨论了JavaScript在现代网页开发中的作用及其带来的能耗问题，并深入探讨了React框架中箭头函数的使用方法及原理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

地球变暖和你们作死的添加JavaScript有莫大的关系。
每个人的浏览器多执行两个函数，CPU使用就要往上蹿一点，能耗就会增加，气温就会升高。一个网页被访问的人越多，地球的生态就会越发危险。
比起空调，JavaScript 才是罪魁祸首。你看到的每一个爆款页面，后面都是北极熊和企鹅的血泪。
从我做起，克制JavaScript的使用，让网页回到没有交互没有特效几乎啥也干不了的年代。否则，我们的子孙后代的家园会毁在你们今天每一个function里。

来自鸟群某肥宅

最近在学习React，定时器中有这么一段：

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }

  componentDidMount() {
    this.timerID = setInterval(
      () => this.tick(),
      1000
    );
  }

  componentWillUnmount() {
    clearInterval(this.timerID);
  }

  tick() {
    this.setState({
      date: new Date()
    });
  }

  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

ReactDOM.render(
  <Clock />,
  document.getElementById('root')
);

其中挂载组件的时候有个没见过的写法，查过之后说是箭头函数，用来声明函数的，是ES6中的新写法。

this.timerID = setInterval(
      () => this.tick(),
      1000
    );

根据MDN的介绍，这一段等同于

function(){
    return this.tick();
}

替换了之后华丽丽的报错了，说方法不存在，然后又往下看， MDN上又说

箭头函数不会创建自己的this,它只会从自己的作用域链的上一层继承this

也就是说，我刚才写的

return this.tick();

中的this，是我替换之后的闭包函数function的this，应该使用作用域链的上次层继承this，于是借鉴MDN的写法，写下了这种形式：

componentDidMount() {
        let that = this;
        this.timerID = setInterval(
            function () {
                return that.tick();
            },
            1000
        );
    }

在闭包函数的外部先用that引用组件Clock中挂载组件方法componentDidMount()中this的值，然后在setInterval中闭包函数中使用that，that无法找到声明，就会根据作用域链去上级（上次层）中继承that，也就是我们引用的组件类Clock中的this。

采用曲线救国的形式，最终实现获取到了组件类Clock中的tick方法。

经测试，可以达到想要的效果了。

PS：目前主流的JS框架，如VUE/REACT，都和ES6联系紧密，ES6作为一个颠覆性的标准，实现了大量的新特性，确实应该学习了解一下这种新的JS开发技术、规范。

~~PPS：比如一大特性就是让普通JS程序猿看不懂了，贼高端~~