React中对象内部函数调用自身常量失败问题咨询

你遇到的核心问题是：对象字面量内部的箭头函数无法访问同对象里的属性，原因如下：

1. 箭头函数没有独立的this上下文，它的this继承自外层模块作用域（此处为undefined）；
2. 你使用的self未定义，无法指向对象本身；
3. 对象在初始化过程中，不能通过对象名直接访问尚未完全创建的属性。

下面给你几种可行的解决方案：

方案一：将常量提取到对象外部 #

把所有常量单独定义在对象外面，函数直接引用这些独立的常量，逻辑清晰且不会有访问问题：

import dayjs from 'dayjs';

// 单独提取全局常量
const dateFormat = 'DD.MM.YYYY';
const dateFormatWrittenOut = 'D. MMMM YYYY';
const dateFormatSQL = 'YYYY-MM-DD';
const dateTimeFormatSQL = 'YYYY-MM-DD HH:mm';
const timeFormatSQL = 'HH:mm';

const constantsAndFunctions = {
    // 用对象简写语法导入常量
    dateFormat,
    dateFormatWrittenOut,
    dateFormatSQL,
    dateTimeFormatSQL,
    timeFormatSQL,

    formatDateToWrittenOut: (date) => {
        return dayjs(date).format(dateFormatWrittenOut);
    },
};

方案二：改用普通函数，通过this访问属性 #

把箭头函数换成普通函数，调用时this会指向constantsAndFunctions对象，从而访问到内部属性：

import dayjs from 'dayjs';

const constantsAndFunctions = {
    dateFormat:'DD.MM.YYYY',
    dateFormatWrittenOut:'D. MMMM YYYY',
    dateFormatSQL:'YYYY-MM-DD',
    dateTimeFormatSQL:'YYYY-MM-DD HH:mm',
    timeFormatSQL:'HH:mm',

    // 改用普通函数，不要用箭头函数
    formatDateToWrittenOut(date) {
        return dayjs(date).format(this.dateFormatWrittenOut);
    },
};

注意：如果后续需要解构这个函数单独调用（比如const { formatDateToWrittenOut } = constantsAndFunctions），要记得手动绑定this，否则this会丢失：

const boundFormatFn = constantsAndFunctions.formatDateToWrittenOut.bind(constantsAndFunctions);
boundFormatFn(new Date());

方案三：对象初始化后挂载函数 #

先创建常量对象，再单独添加函数，这样函数可以直接访问已创建好的对象：

import dayjs from 'dayjs';

const constantsAndFunctions = {
    dateFormat:'DD.MM.YYYY',
    dateFormatWrittenOut:'D. MMMM YYYY',
    dateFormatSQL:'YYYY-MM-DD',
    dateTimeFormatSQL:'YYYY-MM-DD HH:mm',
    timeFormatSQL:'HH:mm',
};

// 初始化完成后添加函数
constantsAndFunctions.formatDateToWrittenOut = (date) => {
    return dayjs(date).format(constantsAndFunctions.dateFormatWrittenOut);
};

这三种方案都能解决你的问题，其中方案一和方案二是最常用的，根据你的使用场景选择即可。

内容的提问来源于stack exchange，提问作者FaultierSP