- Java 双重比较
- java - 比较器与 Apache BeanComparator
- Objective-C 完成 block 导致额外的方法调用?
- database - RESTful URI 是否应该公开数据库主键?
关闭。这个问题需要更多 focused .它目前不接受答案。
想改进这个问题?更新问题,使其仅关注一个问题 editing this post .
3年前关闭。
Improve this question
在学习 JS 和 React 时,我在教程中遇到了令人困惑的差异。
我将通过示例将以下问题分开。我了解常规函数和此上下文的绑定(bind),它只是箭头函数以及我如何看到它们使用/声明的方式令人困惑。
请不要只引用重复的内容,因为我在教程中发现了相互矛盾的答案,这让我感到困惑,所以要以简单的方式寻找真相的来源。与以下问题和示例相关的答案会有所帮助。
1 - 我已经看到一个教程说'this'的值将是窗口的例子,因为箭头函数继承自全局/窗口范围,但我也看到了他们说它将从类上下文继承的教程 -哪个是对的?如果你能解释一下。
class MyClass {
value = 'Hello World!'
clickHandler = () => { console.log(this.value) };
}
class Foo extends React.Component {
constructor() {
}
clickhandler = () => {
console.log("you clicked me!!")
}
render() {
return(
<div>
<button onClick={this.clickhandler}> // => CALLBACK
class MyComponent extends React.Component {
showValue() {
console.log(this.props.value);
}
render() {
return (
<button onClick={() => this.showValue()}>Do Something</button>
);
}
}
-------------------------------------------
showValue() {
console.log(this.props.value);
}
render() {
return (
<button onClick={this.showValue}>Do Something</button>
);
}
最佳答案
Why is the syntax clickHandler = () => rather than clickHandler () =>
foo () => ...
语法对 ES6 类无效,这个概念没有意义。
foo() {...}
是原型(prototype)方法的语法糖:
function Class() {}
Class.prototype.foo = function () {
// this instanceof Class === true
}
Class.prototype.foo
,这将不起作用是一支箭;
this
将从
Class
的范围中检索被定义为:
// this === undefined
Class.prototype.foo = () => {
// this === undefined
}
foo = () => ...
是
class field语法,这是第 3 阶段的提议,不是 ES6 的一部分。
class Class {
foo = () => {
// this instanceof Class === true
}
}
class Class {
constructor() {
// this instanceof Class === true
this.foo = () => {
// this instanceof Class === true
}
}
}
I've seen examples where a tutorial says the value of this would be window as the arrow function inherits from the global/window scope but I've also seen tutorials where they say it will inherit this from the class context/scope - which is correct?
this
从封闭范围。如果在全局范围内定义了箭头,
this
是
window
, 和
undefined
在 ES 模块范围内。
this
是类实例。
Here I see the event handler is an inline function, but it looks like it gets invoked because of the () at the end, sometimes as in the follow on snippet, you can see that just the function name is given without the parentheses, shouldn't they be there also?
onClick
传递支柱。
this.showValue()
调用一个函数并从中返回一个值。除非值也是一个函数,否则就地调用方法,如
onClick={this.showValue()}
是不正确的。
onClick={this.showValue}
将类方法作为回调传递。从
showValue
是未绑定(bind)到正确
this
的原型(prototype)方法上下文,回调将在错误的上下文中执行(问题在
this question 中解释),而
onClick={() => this.showValue()}
将包装函数作为执行
showValue
的回调传递有正确的上下文。
关于javascript - 类和箭头函数和 THIS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54842813/
我有一个 PSD 布局要开发,还有一些东西,比如“卡片”,我很好奇我是否可以在没有图像的情况下只使用 CSS3 边框来做到这一点。 http://i.imgur.com/NSZYPsh.png (这些
我想添加一个轻量级的导航栏来切换登录和注册。结果应如下所示: 箭头应指示当前所选页面。 最佳答案 引用这个question ,问题中的 UI 与您的相似,并且可以根据您的需要调整答案中使用的概念。 关
我想创建一个元组,它包含一个箭头和一个描述箭头的字符串。如果我使用函数(而不是箭头)这样做,则以下工作如预期: funTimes10 = (*10) describe10 = "times 10" t
var std_obj = { activeEffect : 'fade', name : 'Jane', displayMe() { const doSomeEffects =
我有一个使用TActionToolBar和TActionManager的工具栏。一个按钮具有子按钮,这些子按钮可通过单击按钮右侧的向下小箭头来使用。 “向下箭头”按钮的宽度非常薄,需要精确的鼠标控制。
我正在使用 Javascript 进行流网络可视化。顶点表示为圆圈,边表示为箭头。 这是我的 Edge 类: function Edge(u, v) { this.u = u; // start
这个问题已经有答案了: Show border triangle in navbar using CSS (3 个回答) 已关闭 7 年前。 我有一个列表菜单,其边框宽度为 1px ...100%。
有什么方法可以从 javafx 2.2 表列中的排序表列中删除排序指示符/箭头吗? 最佳答案 这可以通过 css 来完成 .table-view .arrow { -fx-background
在我的应用程序中,我使用了 googlemap。在那,我在一个特定的位置放置了一个物体(自行车或汽车)。然后我搬到了其他地方。现在,根据我当前的位置,我需要显示一个箭头(校园),即我放置汽车或自行车的
关闭。这个问题需要debugging details .它目前不接受答案。 编辑问题以包含 desired behavior, a specific problem or error, and t
我一直在 goole 中搜索如何仅使用 css 创建箭头和框。我在这里找到了一个近乎完美的例子:- http://dabblet.com/gist/4639593 如何更改此代码,使箭头指向左而不是右
嗨,我正在为这个问题挠头。我想创建一个如图所示的 CSS 渐变箭头,并能够将红色部分的填充定义为百分比。红色 block 只是纯色。 从这里JFiddle示例 我在创建绿色箭头方面取得了一些进展,但三
我刚刚开始在 Android 中创建一些自定义 View ,但在圆外绘制位图(箭头)时遇到问题。 这是我的代码: Canvas osCanvas = new Canvas(windowFrame);
我正在尝试绘制一个具有渐变的左侧箭头。这是我正在使用的代码,但我不明白为什么它不起作用。 .left-arrow{ position: relative; &:after{ rig
是否可以使用 GD 在 PHP 中创建此图像?我知道我需要使用 GD 和 imagecreate、imagecolorallocate、imagedestroy 等...但我不知道如何做曲线 我需要用
我在我的区域 map 中有一个我正在使用的工具台 http://qtip2.com/ 我调用工具提示时的代码与这个问题中的相同Tooltip on map area tag jQuery(docume
我正在尝试在 Haskell 中学习 Arrows,所以我正在使用基于箭头的 HXT 库为 XML 编写一个简单的应用程序。 HXT wiki 和教程中的示例放弃了函数类型签名。但是,我非常喜欢类型,
我一直在使用 Haskell(特别是 Yampa)中的 Arrowized FRP 库,但我不太清楚如何进行“连续”切换。我的意思是信号通过信号函数(下面的 sf),它本身就是一个信号(如图像的上半部
我想要一个引用,清楚地说明 PHP 的箭头/方法调用运算符 (->) 在运算符绑定(bind)顺序方面的位置。 不幸的是,authoritative PHP manual page关于运算符优先级没有
如何隐藏 QScrollBar 箭头? 我需要隐藏在水平滚动条中。 我试图用 setStyleSheet 隐藏: setStyleSheet(" QScrollBar:left-arrow:horiz
我是一名优秀的程序员,十分优秀!