这是我的代码
function App() {
const x = {
value: 10,
func1() {
console.log(this.value, "111");
},
func2: function() {
console.log(this.value, "222");
},
func3: () => {
console.log(this.value, "222");
}
};
return (
<div>
<h1 onClick={x.func1}>1</h1>
<h1 onClick={x.func2}>2</h1>
<h1 onClick={x.func3}>3</h1>
</div>
);
}
我创建了一个对象X，它具有3个函数func1, func2, func3。为什么x.func1，x.fun2 x.func3函数在onClick中不起作用？
因为func1和func2没有绑定到x，并且在称为事件处理程序时this是undefined。func3是箭头功能，并得到this从封闭词法作用域，这是App功能。this函数的值取决于是否在严格模式下调用它-请参见MDN上的函数上下文。
指向x而不是this：
function App() {
const x = {
value: 10,
func1() {
console.log(x.value, "111");
},
func2: function() {
console.log(x.value, "222");
},
func3: () => {
console.log(x.value, "222");
}
};
return (
<div>
<h1 onClick={x.func1}>1</h1>
<h1 onClick={x.func2}>2</h1>
<h1 onClick={x.func3}>3</h1>
</div>
);
}
ReactDOM.render(
<App />,
root
)<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="root"></div>文字对象上的箭头功能示例：
const x = {
func3: () => {
console.log(this === window); // this points to the enclosing lexical scope, which is window
}
};
x.func3();本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句