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

时间:2017-05-04 14:22:20

标签: javascript reactjs

我在一个调用另一个函数的组件中有一个函数,它们都具有相同的名称 它有效,两个功能都运行 我想知道为什么它是否有效(请参阅下面的假设)? 一个后续问题,如果我想递归调用外部函数,我应该使用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的组件,它有一个onTouch道具PropTypes.func,我想在我自己的函数中运行一些内部逻辑,然后运行通过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();
}

1 个答案:

答案 0 :(得分:2)

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

myMethod(){
   myMethod();
}

当你调用函数JS时,首先尝试找到在最近的范围内定义的函数(在你的情况下在组件myMehod方法体内),如果没有这样的函数JS移动到下一个(父)范围(在您的情况下,它与定义反应组件的范围相同)并尝试再次找到它等等。但是,在任何这些范围中都没有定义组件方法这是很重要的但是被定义为类方法,所以你必须使用this.myMethod告诉JS你的意思是在'这个'宾语。通常,要调用任何对象方法,您必须使用与对象关联的方法名称 如果不是组件方法而是正常功能,情况会有所不同。考虑这样的代码:

//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的组件方法或函数?)。 /> 通常,如果您使用相同的名称,特别是如果其他人读取您的代码,则很容易混淆。当然,如果两个或多个组件具有相同名称的方法,如果它们执行类似的工作但是如果一个函数调用另一个函数IMO它们应该具有不同的名称,因为它们具有不同的目的,这应该反映在它们的名称中,这是完全正常的