首發(fā)于：https://mingjiezhang.github.io/。

在JavaScript中，this對象是運行時基于函數(shù)的執(zhí)行環(huán)境（也就是上下文）綁定的。

從react中的demo說起

Facebook最近一次更新react時，將es6中的class加入了組件的創(chuàng)建方式當中。Facebook也推薦組件創(chuàng)建使用通過定義一個繼承自 React.Component 的class來定義一個組件類。官方的demo：

class LikeButton extends React.Component {
constructor() {
super();
this.state = {
liked: false
};
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
this.setState({liked: !this.state.liked});
}
render() {
const text = this.state.liked ? 'liked' : 'haven\'t liked';
return (
<div onClick={this.handleClick}>
You {text} this. Click to toggle.
</div>
);
}
}
ReactDOM.render(
<LikeButton />,
document.getElementById('example')
);

上面的demo中有大量this的使用，在 class LikeButton extends React.Component 中我們是聲明該class，因為this具體是由其上下文決定的，因此在類定義中我們無法得知this用法。 相當于是new了上面定義的類，首先調(diào)用 constructor() 函數(shù)， this.state 的this上下文就是該實例對象；同理，render() 函數(shù)中 this.state.liked 的this上下文也是該對象。問題在于 onClick={this.handleClick} ，獲取該函數(shù)引用是沒有問題，這里的this上下文就是該對象。

這時問題來了，在原來 React.createClass 中， handleClick() 在onClick事件觸發(fā)的時候，會自動綁定到LikeButton實例上，這時候該函數(shù)的this的上下文就是該實例。不過在ES6的class的寫法中，F(xiàn)acebook取消了自動綁定，實例化LikeButton后，handleClick()的上下文是div的支撐實例（ backing instance ），而 handleClick() 原本要綁定的上下文是LikeButton的實例。對于該問題，我們有多種解決方案。

使用bind()函數(shù)改變this的上下文

可以在class聲明中的constructor()函數(shù)中，使用

this.handleClick = this.handleClick.bind(this);

該方法是一個bind()綁定，多次使用。在該方法中，我們在聲明該實例后，可以在該實例任何地方使用 handleClick() 函數(shù)，并且該 handleClick() 函數(shù)的this的上下文都是LikeButton實例對象。

除此我們也可以在具體使用該函數(shù)的地方綁定this的上下文到LikeButton實例對象，代碼如下

<div onClick={this.handleClick.bind(this)}>
You {text} this. Click to toggle.
</div>

這種方法需要我們每次使用bind()函數(shù)綁定到組件對象上。

es6的箭頭函數(shù)

es6中新加入了箭頭函數(shù)=>，箭頭函數(shù)除了方便之外還有而一個特征就是將函數(shù)的this綁定到其定義時所在的上下文。這個特征也可以幫助我們解決這個問題。使用如下代碼：

<div onClick={() => this.handleClick()}>
You {text} this. Click to toggle.
</div>

這樣該 this.handleClick() 的上下文就會被綁定到LikeButton的實例對象上。個人認為，使用箭頭函數(shù)使得JavaScript更加接近面向?qū)ο蟮木幊田L(fēng)格。

this的總結(jié)

this的本質(zhì)就是：this跟作用域無關(guān)的，只跟執(zhí)行上下文有關(guān)。

以上所述是小編給大家介紹的React中es6創(chuàng)建組件this的方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

最新評論