ES6中的=>(箭头函数)与this

地球变暖和你们作死的添加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程序猿看不懂了,贼高端

发表评论

This site uses Akismet to reduce spam. Learn how your comment data is processed.