React.createClass中console.log(this)結果是Coustructor？

01-21

這個this是方法調用模式，指向構造函數本身。
結果出現的Constructor對象是什麼呢？就是構造出來的實例嗎？
舉個簡單的栗子

const CommentList = React.createClass({ componentDidMount() { console.log(this); }, render() { return ( & Hello, world! I am a CommentList. & ); } });

謝邀

首先你題目里的現象是錯的，結論也是錯的。當 componentDidMount() 被調用時，函數內部的 this 是實例，而非構造函數。

React.createClass() 是工廠函數，返回值是 class （構造函數）。

React.createClass() 創建出來的 class 有 auto bind 功能，會把參數中的函數成員綁定到 class 實例上，有如下結論：

const CommentList = React.createClass({ componentDidMount() { console.dir(this); // instance console.log(this instanceof CommentList); // true }, returnThis(){ return this; }, render() { return ( & Hello, world! I am a CommentList. & ); } });


let a = new CommentList()
console.log(a.returnThis() === a); // true

let returnThis = a.returnThis; console.log(returnThis() === a); // true

因此在 React 里，我們可以把被 auto bind 過的函數傳給別的組件，當這些函數被調用時可以保證其中的 this 始終是當前實例。

React ES6 starter

而 ES6 Class 就沒有 auto bind 了，如果你需要把某個函數傳給別人，需要自己手動 bind

class Test extends React.Component{ notBound(e){ e.preventDefault(); console.log(this instanceof Test); // false } bound = (e)=&> { e.preventDefault(); console.log(this instanceof Test); // true }; render(){ return ( &



      Click or right click me and see the console.

      &
    );

  }

}

React ES6 starter

註：文中的例子需要 babel react+stage0 配置。