似乎 React 組件改變了thisDOM 事件處理程式中分配方式的行為，但我找不到任何詳細說明此行為的檔案。
例如，當使用物件的方法作為帶有 vanilla JS 的 DOM 事件處理程式時，this背景關系保持為物件：
function SomeClass() {}
SomeClass.prototype.showThis = function() { console.log(this) };
let o = new SomeClass();<button onclick="o.showThis()">Show "this"</button>然而，React 改變了這種行為，使得this背景關系變得未定義：
function SomeClass() {}
SomeClass.prototype.showThis = function() { console.log(this) };
let o = new SomeClass();
function App() {
return (
<button onClick={o.showThis}>Show this</button>
);
}
ReactDOM.render(<App />, document.getElementById("root"));<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>解釋這一點的檔案在哪里？（我可以推測為什么會發生這種情況，但想知道 React 檔案中的哪些內容。）
uj5u.com熱心網友回復：
這對 React 來說沒什么特別的。這是因為，使用行內處理程式，在呼叫函式的那一刻，它被作為物件的一部分呼叫：
onclick="o.showThis()"
^ object
^^ invocation
但是在 React 代碼中，它不是作為物件的一部分被呼叫——而是o.showThis作為回呼傳遞，然后像任何其他回呼一樣被呼叫——比如callback()或類似的東西（而不是作為物件的一部分）。如果您稍微調整代碼以便showThis作為物件的一部分呼叫，它將顯示與行內處理程式相同的行為：
onClick={() => o.showThis()}
^ object
^^ invocation
顯示代碼片段
function SomeClass() {}
SomeClass.prototype.showThis = function() { console.log(this) };
let o = new SomeClass();
function App() {
return (
<button onClick={() => o.showThis()}>Show this</button>
);
}
ReactDOM.render(<App />, document.getElementById("root"));<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>所以 React 沒有什么可以專門解釋它的——它是底層 JavaScript 的一種行為。
undefined如果函式不是作為物件的一部分呼叫的，并且您處于嚴格模式，您同樣會進入行內處理程式。
'use strict';
function SomeClass() {}
SomeClass.prototype.showThis = function() {
console.log(this)
};
const o = new SomeClass();
const theFn = o.showThis;<button onclick="theFn()">Show "this"</button>轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/492937.html
標籤：javascript 反应 dom 事件 这个
上一篇：變數的值無故改變
下一篇：ember.js存盤庫中的檔案