React实战-React中this的用法

Javascript中的this是一个令人讨厌的东西，对于有着面向对象编程经历的程序员来说更是如此，那么在ReactJs中，this是如何使用的呢。

Javascript从出生那天起，十足一个草根，无非是辅助一下页面特效，然而后来的发展，估计也超出了设计者的预料，从Ajax出现后就大放光彩，到近几年在服务端的应用，Reactjs框架的出现就更是惹人注目了。然后在语言的发展过程中，总有些变革与妥协。在我看来，this正是由于先天和后天的原因，让人很是讨厌(微信号：React实战)。

一.在面向对象中this代表什么？

在面向对象中this简单明确，就是指向类的对象。

二.在Javascript中this代表什么？

在Javascript中则没这么简单。this在不同的书写方式，不同的创建方式里，指向的对象则不同，细说起来，没有上万字是不够的。但大致说来主要分为几类，以及以下几类的各类组合了。

1.单独function中的this以及在闭包function中的this.

2.使用strict时的this.

3.使用对象中function的this

4.使用=>箭头函数中的this

5.使用ES6中的this

6.Dom事件中的this

7.使用bind函数中的this

以上各类条件下的this所指并不一样，两种不同组合也会导致this所指对象不同。

来几个例子就可以知道这种this对象有多讨厌了，一不小心就会错误。

a.单独function与采用bind的this

function getThis(){

console.log('getThis',this);

}

getThis();

var obj = {a:4};

getThis.bind(obj)();

运行结果：

getThis window

getThis {a:4}

b.对象中箭头function和function的this

var oo = {

arrowThis: () => {

console.log('arrowThis',this);

},

noArrowThis: function (){

console.log('noArrowThis',this);

}

}

 oo.arrowThis();

 oo.noArrowThis();

运行结果：

arrowThis window

noArrowThis {arrowThis:f, noArrowThis:f}

c.类中中箭头function和function的this

 function Person() {

  (function noArrowThis(){

  console.log('noArrowThis',this);

  })();

  var arrowThis = () =>{

  console.log('arrowThis',this);

  }

  arrowThis();

}；

var person = new Person();

运行结果：

arrowThis window

noArrowThis Person

d.strict中的this

function Person() {

 //'use strict';

...}

运行结果：

arrowThis undefined

noArrowThis Person

以上几个简单的例子可以看出在不同的组合中this是不同的，基本思想是this指向创建函数的对象，strict中创建对象更为严格，避免了自动指向window，在类的构造函数中指向自身。

三．在ReactJS中this如何使用

ReactJS基于Javascript，用法也源于Javascript，主要有以下几种用法。

1.ES6的写法

如果你采用ES6，需要记住的是ES6不会自动绑定this到实例中,你需要使用bind函数。如下：

class HelloWorld extends React.Component {

  constructor(props) {

    super(props);

    this.state = {message: HelloWorld !'};

    }

 

  handleClick() {

    alert(this.state.message);

  }

  render() {

    return (

      <button onClick={this.handleClick.bind(this)}>

        HelloWorld

      </button>

    );

  }

}

2.createReactClass中的this

如果采用createReactClass则不需要采用bind

var HelloWorld = createReactClass({

  getInitialState: function() {

    return {message: 'Hello!'};

  },

 

  handleClick: function() {

    alert(this.state.message);

  },

  render: function() {

    return (

      <button onClick={this.handleClick}>

        Say HelloWorld

      </button>

    );

  }

});

3.采用箭头函数

如果你采用箭头函数，则会省去bind了。

class HelloWorld extends React.Component {

  constructor(props) {

    super(props);

    this.state = {message: 'Hello!'};

  }

 handleClick = () => {

    alert(this.state.message);

  }

 render() {

    return (

      <button onClick={this.handleClick}>

        Say HelloWorld

      </button>

    );

  }

}

虽然Javascript中的this变化很多，但在React中要简单的多，只是在刚接触时会弄不清为什么有这三种方式，只有去看看Javascript中的使用原则，才会清楚。