函數中的「this」不應該指向對象本身嗎？

謝謝你們，這竟然是我對ES6課程語法的混淆。函數中的「this」不應該指向對象本身嗎？

但我問這個問題，因爲我遇到了以下問題。

我在學習React，我有以下代碼片段。

import React, { Component } from 'react'; 

class SearchBar extends Component { 
constructor(props){ 
    super(props); 
} 

render() { 
    // console.log(this); 
    return <div> 
      <input 
       onChange={ this.onInputChange } 
      /> 
     </div>; 
    } 

    onInputChange(event) { 
     console.log(this); 
    } 
} 

export default SearchBar;

非常簡單，這段代碼會生成一個輸入組件，當它裏面的東西發生變化時，我們註銷'this'。

但是，這段代碼會一直生成'undefined'。

據我所知，'this'內的對象子函數應指向對象本身，爲什麼這種情況發生？

順便說一句，主要的js文件看起來像這樣。

import ReactDOM from 'react-dom'; 
import React from 'react'; 

import SearchBar from './components/search_bar'; 

const API_KEY = 'AIzaSyCdAXs0YXxqGUKjb4sZsmsF_hHq_f3PJmY'; 

const App =() => { 
    return (
      <div> 
      <SearchBar /> 
      </div> 
      ); 
} 

ReactDOM.render(<App />, document.querySelector('.container'));

和HTML看起來像這樣

<!DOCTYPE html> 
<html> 
    <head> 
    <link rel="stylesheet" href="/style/style.css"> 
    <link rel="stylesheet" href="https://cdn.rawgit.com/twbs/bootstrap/48938155eb24b4ccdde09426066869504c6dab3c/dist/css/bootstrap.min.css"> 
    <script src="https://maps.googleapis.com/maps/api/js"></script> 
    </head> 
    <body> 
    <div class="container"></div> 
    </body> 
    <script src="/bundle.js"></script> 
</html>

其中bundle.js是輸出反應腳本巴布爾。

來源

2017-02-24 W.Chen

因爲您正在使用原型繼承 – Hosar

函數中'this'的值取決於該函數的調用方式。在過於簡化的術語中，如果您使用像「tester.hello（）」這樣的「點」符號來調用一個函數，那麼函數內的this將被設置爲該對象的左邊。是'tester'。這是重複的，但我認爲[這個']的MDN頁面（https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/this）解釋它比其他問題被接受的更好回答。 – nnnnnn

this關鍵字指向因爲prototype而命名測試的對象。 hello函數不是來自測試對象的分離函數。

如果你問爲什麼使用原型？

使用原型可以加快對象的創建速度，因爲每次創建新對象時都不必重新創建該函數。

來源

2017-02-24 06:06:10

感謝您的幫助，原來我誤解了原型鏈規則。 –

函數中的「this」不應該指向對象本身嗎？

回答

相關問題