javascript - 在具有相同名称的函数内调用 props 中的方法

Question

我在调用另一个函数的组件中有一个函数，并且两者具有相同的名称。
它有效，两个函数都运行
我想知道为什么它有效(见下面我的假设)？ 后续问题，如果我想递归调用外部函数，我应该使用 this.myMethod() 吗？
这种模式使用安全吗？

示例:

myMethod(){
    const {myMethod} = this.props;
    if(typeof myMethod == 'function'){ // i was sure this will check the external myMethod func
        myMethod(); // i was sure it will call the external myMethod func. 
    }
    // what if i want to call to the external "myMethod" func (recursively)?
}

我假设引擎正在外部 myMethod(词法作用域？)的主体内搜索名为 myMethod 的函数，并且它找到了它。
谁能证实这个假设？

编辑
只是为了让我更清楚地了解这种模式的普遍性和安全性。
假设我有一个 Item 的组件，它有一个 PropTypes.func 的 onTouch Prop ，我想在我的内部运行一些内部逻辑自己的函数，然后运行通过 props 接收到的函数作为回调或类似的东西。
我应该为我的内部函数寻找一个新名称，如 onInternalTouch 还是坚持使用相同的名称 onTouch 是否安全？

onTouch(){ // is this common practice?
    const {onTouch} = this.props;
    // ... internal component logic
    onTouch();
}

onInternalTouch(){ // or should i bother finding a new name?
    const {onTouch} = this.props;
    // ... internal component logic
    onTouch();
}

Answer 1

请注意，组件 myMethod 方法被定义为对象(类)方法，因此要从任何组件方法调用它，您必须使用 this.myMethod()。在任何组件方法中调用 myMethod()(没有 this.)不可能调用具有相同名称的组件方法。如果您没有在方法中定义 myMethod 变量并尝试调用它，您会收到一条错误消息，提示 myMethod 未定义。所以这样的代码会给你提到的错误:

myMethod(){
   myMethod();
}

当你调用一个函数时，JS 首先尝试找到在最近范围内定义的函数(在你的情况下，在组件 myMehod 方法体内)，如果没有这样的函数，JS 将移动到下一个(父)范围(在您的情况下，它与定义 react 组件的范围相同)并尝试再次找到它，依此类推。但重要的是，组件方法未在任何这些范围内定义，而是定义为类方法，因此你必须使用 this.myMethod 来告诉 JS 你指的是在“this”对象上定义的方法。通常要调用任何对象方法，您必须使用与对象关联的方法名称。
如果不是组件方法而是正常功能，情况会有所不同。考虑这样的代码:

//here is outer scope
function myMethod() {
    //here is inner scope
    myMethod(); // this will call function defined in outer scope
}

myMethod();

它会给你“过多的递归”错误 - 内部范围内没有定义 myMethod 函数，因此 JS 使用外部范围内定义的函数。
如果您现在用同名的内部变量覆盖外部函数，则不会出现错误:

//here is outer scope
function myMethod() {
  //here is inner scope
	var myMethod = function() {
		console.log(12);
	}
	myMethod();
}

myMethod();

在上面的代码中，定义在内部作用域的变量会覆盖定义在外部作用域的函数，因此 JS 会在内部作用域中找到 myMethod，甚至不会尝试在外部作用域中搜索 myMethod范围。
回到你的问题 - 是的，如果你想递归调用外部函数，你必须使用 this.myMethod()。

问题编辑更新:
至于您关于命名实践的问题，两种选择都可以。这只是代码可读性和良好实践的问题。我个人会使用不同的有意义的名称。在您的示例中，我将使用例如handleTouch 用于方法名称，touchCallback 用于 prop 名称。一般来说，不同函数使用相同名称的代码更难理解 - 你必须更加注意掌握函数的作用和它的来源(它是组件方法还是作为 prop 传递的函数？)。
通常，如果您使用相同的名称，特别是当其他人阅读您的代码时，很容易混淆。当然，如果两个或多个组件具有相同名称的方法，如果它们执行类似的工作，那是完全可以的，但是如果一个函数调用另一个函数 IMO，它们应该有不同的名称，因为它们有不同的目的，这应该反射(reflect)在它们的名称中。