- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我已经使用 ReactJs 几天了。我发现有些语法有点奇怪。例如,有时我必须这样调用函数:
{this.functionName}
末尾没有括号。
有时我必须这样调用它:
{this.functionName()}
就像这个例子:
<button onClick={this.streamCamVideo}>Start streaming</button>
<h1>{this.logErrors()}</h1>
查看调用 this.streamCamVideo
和 this.logErrors()
之间的区别。
有人可以为此提供解释吗?
编辑1:根据要求,以下是它们的定义:
streamCamVideo() {
var constraints = { audio: true, video: { width: 1280, height: 720 } };
navigator.mediaDevices
.getUserMedia(constraints)
.then(function(mediaStream) {
var video = document.querySelector("video");
video.srcObject = mediaStream;
video.onloadedmetadata = function(e) {
video.play();
};
})
.catch(function(err) {
console.log(err.name + ": " + err.message);
}); // always check for errors at the end.
}
logErrors(){
return(navigator.mediaDevices.toString())
}
最佳答案
{this.streamCamVideo}
是对 streamCamVideo
的引用功能。你可以想到this.streamCamVideo
作为一个变量,其值为函数。像这样思考一下:
const myVariable = 'some text'
const myOtherVariable = function() {
console.log("You are inside the myOtherVariable function");
}
两者myVariable
和myOtherVariable
是变量。一个具有字符串的值,另一个具有函数的值。假设您想将这两个变量传递给另一个函数:
const anotherVariable = function(aStringVariable, aFunctionVariable) {
console.log(aStringVariable, aFunctionVariable)
}
anotherVariable(myVariable, myOtherVariable)
您可能会看到类似这样的内容记录到控制台:
some text
[Function]
请注意,您永远不会看到控制台中记录的文本“您位于 myOtherVariable 函数内部”。那是因为myOtherVariable
函数从未被调用。它刚刚传递到anotherVariable
功能。为了调用该函数,您需要执行以下操作:
const anotherVariable = function(aStringVariable, aFunctionVariable) {
aFunctionVariable()
console.log(aStringVariable, aFunctionVariable)
}
注意aFunctionVariable()
后面的括号?这就是实际调用函数的样子。因此,在这种情况下,您会看到类似这样的内容记录到控制台:
You are inside the myOtherVariable function
some text
[Function]
该函数实际上正在被调用。
所以在你的例子中:
<button onClick={this.streamCamVideo}>Start streaming</button>
<h1>{this.logErrors()}</h1>
this.streamCamVideo
只是作为变量传递给 <button>
元素。单击按钮时,无论已分配给onClick
,将被执行。此时,您作为变量传递的函数将被实际调用。
另外,请注意this.logErrors()
后面的括号? logErrors
函数正在执行。它没有作为变量传递给任何东西。
关于javascript - ReactJs 调用 {this.functionName} 和 {this.functionName()} 有什么区别,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59588732/
当前 Google 涂鸦的标记如下所示: 有趣的部分是 onload="window.lol&&lol()" 出于好奇:window.functionname&&functionname() 到底做
我注意到您可以使用或不使用括号来引用函数。为什么?有什么区别? 顺便说一句,我注意到这是有效的:window.onload = functionName; 而这不是:window.onload = f
jQuery 函数有什么区别 $.FunctionName = function(){ alert('Hello!') } 和正常的 javascript 函数? function FunctionN
我知道你可以直接使用名称来获取变量和调用函数 variable.functionName 或使用名称作为字符串 variable["functionName"] or variable[functio
在 jQuery 中,我见过以下两种定义 jQuery 函数的方法: $.fn.CustomAlert = function() { alert('boo!'); }; $.CustomAlert
我正在研究 angularJs 并致力于 javascript 优化。我最近看了YUI创建者的一个视频,他是一位JavaScript专家,关于JavaScript优化。他解释了变量声明和作用域以及 J
const heightOutput = document.querySelector('#height'); const widthOutput = document.querySelector('
我研究 javascript 中的函数继承。根据我读过的文章,我写了代码: function Base(){ var enableVar = true this.enable = func
我有 window.getTask = getTask window.postTask = postTask window.logIn = logIn 我正在寻找一种简写方式来做到这一点。类似 win
这个问题在这里已经有了答案: 关闭 10 年前。 Possible Duplicate: Do you ever need to specify javascript: in an onclick?
我已经使用 ReactJs 几天了。我发现有些语法有点奇怪。例如,有时我必须这样调用函数: {this.functionName} 末尾没有括号。 有时我必须这样调用它: {this.function
我已经使用 ReactJs 几天了。我发现有些语法有点奇怪。例如,有时我必须这样调用函数: {this.functionName} 末尾没有括号。 有时我必须这样调用它: {this.function
这个关闭代码可以工作: function setupSomeGlobals(){ var num = 666; gPrintNumber = function() { // play
我最近开始维护别人的 JavaScript 代码。我正在修复错误、添加功能并尝试整理代码并使其更加一致。 之前的开发人员使用了两种声明函数的方式,我无法确定其背后是否有原因。 这两种方式是: var
我最近开始维护别人的 JavaScript 代码。我正在修复错误、添加功能并尝试整理代码并使其更加一致。 之前的开发人员使用了两种声明函数的方式,我无法确定其背后是否有原因。 这两种方式是: var
我最近开始维护别人的 JavaScript 代码。我正在修复错误、添加功能并尝试整理代码并使其更加一致。 之前的开发人员使用了两种声明函数的方式,我无法确定其背后是否有原因。 这两种方式是: var
我最近开始维护别人的 JavaScript 代码。我正在修复错误、添加功能并尝试整理代码并使其更加一致。 之前的开发人员使用了两种声明函数的方式,我无法确定其背后是否有原因。 这两种方式是: var
我最近开始维护别人的 JavaScript 代码。我正在修复错误、添加功能并尝试整理代码并使其更加一致。 之前的开发人员使用了两种声明函数的方式,我无法确定其背后是否有原因。 这两种方式是: var
我最近开始维护别人的 JavaScript 代码。我正在修复错误、添加功能并尝试整理代码并使其更加一致。 之前的开发人员使用了两种声明函数的方式,我无法确定其背后是否有原因。 这两种方式是: var
我最近开始维护别人的 JavaScript 代码。我正在修复错误、添加功能并尝试整理代码并使其更加一致。 之前的开发人员使用了两种声明函数的方式,我无法确定其背后是否有原因。 这两种方式是: var
我是一名优秀的程序员,十分优秀!