如何从定义为 JS 中同一对象键的另一个函数中访问定义为对象键的函数

Question

给出下面的代码，我需要在 innerfunc3 中重用 innerFunc1 和 innerFunc2 的功能，但我不确定 innerFunc1 和 innerFunc2 可以在 innerfunc3 内访问，因为当时甚至都没有定义。另外，我想知道，有没有更好的模式来实现这个功能？

const outerFunc = () => ({
    innerFunc1: () => {
        console.log("Inner function 1");
    },
    innerFunc2: () => {
        console.log("Inner function 2");
    },
    innerFunc3: () => {
        innerFunc1();
        innerFunc2();
        console.log("Inner function 3");
    }
});

const func = outerFunc();
func.innerFunc3();

预期行为

Inner function 1
Inner function 2
Inner function 3

但明显的输出是ReferenceError: innerFunc1 is not defined

更新：

我想到可以使用以下代码实现所需的输出

const outerFunc = () => ({
    innerFunc1: () => {
        console.log("Inner function 1");
    },
    innerFunc2: () => {
        console.log("Inner function 2");
    },
    innerFunc3: () => {
        const func = outerFunc();
        func.innerFunc1();
        func.innerFunc2();
        console.log("Inner function 3");
    }
});

const func = outerFunc();
func.innerFunc3();

但是，使用这种模式是否正确？

Answer 1

ES 类解决方案

class + this 关键词

class Func {
    innerFunc1 = () => {
        console.log("Inner function 1");
    }
    innerFunc2 = () => {
        console.log("Inner function 2");
    }
    innerFunc3 = () => {
        this.innerFunc1();
        this.innerFunc2();
        console.log("Inner function 3");
    }
}

const func = new Func();
func.innerFunc3();

但是，正如@Sergey 指出的那样

Assigning functions to class properties is not considered to be a good practice since it will duplicate this logic each time an instance is created. Instead it should be defined as a regular method and thus one method will be shared with N instances through the prototype

没有类

的解决方案

工厂函数 + this 关键字

const outerFunc = () => ({
    innerFunc1: function() {
        console.log("Inner function 1");
    },
    innerFunc2: function() {
        console.log("Inner function 2");
    },
    innerFunc3: function() {
        this.innerFunc1();
        this.innerFunc2();
        console.log("Inner function 3");
    }
});

const func = outerFunc();
func.innerFunc3();

由于普通 vs 箭头函数 difference when working with function invocation context。

在正常函数的情况下 this 将是对 func 的引用，因为它是在调用时确定的并且调用发生在 func 对象上。

在箭头函数的情况下 this 将是 undefined，因为箭头函数会在对象尚未实例化时推断其创建时的上下文。

Answer 2

如果出于某种原因必须使用箭头函数而不是常规函数。您可以使用闭包来存储对象。

const outerFunc = () => {
    let obj = {
        innerFunc1: () => {
            console.log("Inner function 1");
        },
        innerFunc2: () => {
            console.log("Inner function 2");
        },
        innerFunc3: () => {
            obj.innerFunc1();
            obj.innerFunc2();
            console.log("Inner function 3");
       }
    };
    return obj;
});

Answer 3

另一种继续使用箭头函数的解决方案是将函数定义为变量，最后将 return 定义为对象。这也将消除对其他函数调用使用 this 关键字的需要。

const outerFunc = () => {
    const innerFunc1 = () => {
        console.log("Inner function 1");
    };

    const innerFunc2 = () => {
        console.log("Inner function 2");
    };

    const innerFunc3 = () => {
        innerFunc1();
        innerFunc2();
        console.log("Inner function 3");
    };
    return {
        innerFunc1,
        innerFunc2,
        innerFunc3
    };
};

const func = outerFunc();
func.innerFunc3();

如何从定义为 JS 中同一对象键的另一个函数中访问定义为对象键的函数

How to access a function defined as key of an object from within another function defined as key of same object in JS

javascript

functional-programming

javascript-objects

ES 类解决方案

没有类

如何从定义为 JS 中同一对象键的另一个函数中访问定义为对象键的函数

How to access a function defined as key of an object from within another function defined as key of same object in JS

javascript

functional-programming

javascript-objects

ES 类 解决方案

没有类

ES 类解决方案