在這個例子中,this物件在App范圍內,所以我想如果我嘗試console.log(this)然后我會從物件中找到recall并changeMyName運行this。
但是this物件中沒有任何方法名稱,我有點困惑,因為這this.changeMyName意味著我可以changeMyName從this物件訪問函式。
我在哪里可以找到this物件中的方法名稱?
// example code
import React from "react";
import "./styles.css";
class App extends React.Component{
changeMyName() {
console.log(this)
this.recall();
}
recall() {
console.log('recall');
}
render() {
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<h2>Start editing to see some magic happen!</h2>
<button onClick={this.changeMyName.bind(this)}>click</button>
</div>
);
}
}
export default App;
// result of console.log(this)
App {props: Object, context: Object, refs: Object, updater: Object, _reactInternals: FiberNode…}
props: Object
context: Object
refs: Object
updater: Object
isMounted: ? isMounted() {}
enqueueSetState: ? enqueueSetState() {}
enqueueReplaceState: ? enqueueReplaceState() {}
enqueueForceUpdate: ? enqueueForceUpdate() {}
_reactInternals: FiberNode
_reactInternalInstance: Object
state: null
isReactComponent: Object
setState: ? () {}
<constructor>: "Function"
forceUpdate: ? () {}
<constructor>: "Function"
<constructor>: "App"
uj5u.com熱心網友回復:
的changeMyName,recall和render功能通過的傳承提供。它們不在物件本身上,而是在物件的原型上。當您訪問 時this.changeMyName,幕后的 javascript 會檢查this,沒有看到changeMyName屬性,因此它會檢查 的原型this并在那里找到它。類實體的原型可以通過 Object.getPrototypeOf 或已棄用的__proto__屬性訪問。
另一個復雜因素是class將所有方法設定為不可列舉。所以它們不會出現在 Object.keys 之類的東西上,也不會被 console.log 記錄。所以我們需要使用 Object.getOwnPropertyNames 來獲取密鑰
class Example {
hello() {
console.log('hello world');
}
}
const e = new Example();
console.log(e);
console.log(Object.getOwnPropertyNames(e));
console.log(e.__proto__);
console.log(Object.getOwnPropertyNames(e.__proto__));
console.log(Object.getPrototypeOf(e));
console.log(Object.getOwnPropertyNames(Object.getPrototypeOf(e)));
轉載請註明出處,本文鏈接:https://www.uj5u.com/houduan/365789.html
標籤:反应
