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中的使用原则，才会清楚。
╰+哭是因爲堅強的太久メ
末蓝、
灰太狼
淩亂°似流年
Myth丶恋晨
还没有评论，来说两句吧...