バインド（これ）は何を意味しますか？

Question

私はすでにバインドしていることを知っています、それはあなたが望む機能にあなたの与えられたオブジェクトや機能を束縛しましたが、bind(this)は本当に私を混乱させています。thisは本当に意味しますか？

以下はfirebase Databaseの私の反応アプリのコードです。ここ

componentWillMount: function() { 
    this.firebaseRef = firebase.database().ref('todos'); 
    this.firebaseRef.limitToLast(25).on('value', function(dataSnapshot) { 
     var items = []; 
     dataSnapshot.forEach(function(childSnapshot) { 
     var item = childSnapshot.val(); 
     item['key'] = childSnapshot.key; 
     items.push(item); 
     }.bind(this)); 

     this.setState({ 
     todos: items 
     }); 
    }.bind(this)); 

    }, 

Answer 1

bind(this)）（componentWillMountの範囲にforEach()内部あなたの関数のコンテキストをバインドします。

thisは、componentWillMount()の範囲を指します。

bind(this)とすると、内部関数内のキーワードthisは外側スコープを参照します。 componentWillMount()に限定されているので、この場合はがforEach関数内にあるので、これは必須です。 docsによれば

：

バインド（）メソッドが呼び出されたとき、その このキーワードが先行 引数の指定された配列と、与えられた値に設定されている、新たな機能を作成します新しい関数が呼び出されたときに提供されるもの。

bind(this)の使い方を示すこのデモをご覧ください。

class App extends React.Component { 
 
    constructor(){ 
 
    super(); 
 
    this.state = { 
 
     data: [{ 
 
    "userId": 1, 
 
    "id": 1, 
 
    "title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit", 
 
    "body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto" 
 
    }] 
 
    } 
 
    } 
 
    componentDidMount() { 
 
    this.state.data.forEach(function(item) { 
 
     console.log('outer scope ', this); 
 
    }.bind(this)) 
 
    this.state.data.forEach(function(item) { 
 
     console.log('Inner scope ', this); 
 
    }) 
 
    } 
 
    render() { 
 
    return (
 
    <div>Hello</div>) 
 
    } 
 
} 
 

 
ReactDOM.render(<App/>, document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react-dom.js"></script> 
 
<div id="app"></div>

Answer 2

あなたは完全なコンポーネント定義に反応を示さなかったが、それはおそらくあなたのcomponentWillMountが定義されているコンポーネントのインスタンスに反応を指します。

Answer 3

あなたはforEach内thisで素晴らしいプレーすることができます - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEachによると - の代わりにforEach文の2番目の引数としてパスthisを結合。

class App extends React.Component { 
 
    constructor() { 
 
     super(); 
 
     this.state = { 
 
     data: [{ 
 
      "userId": 1, 
 
      "id": 1, 
 
      "title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit", 
 
      "body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto" 
 
     }] 
 
     } 
 
    } 
 

 
    componentDidMount() { 
 
     this.state.data.forEach(function(item) { 
 
     console.log('outer scope ', this); 
 
     }, this) // be nice for context - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach 
 
    } 
 

 
    render() { 
 
     return (<div> Hello < /div>) 
 
    } 
 
} 
 

 
ReactDOM.render(< App/> , document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react-dom.js"></script> 
 
<div id="app"></div>