如何在对象自身函数中访问其id属性？点击时this.id返回undefined

你遇到的问题是next函数里的this.id返回undefined，核心原因是函数调用时this的指向发生了变化：当next被作为点击事件处理函数触发时，this会绑定到触发事件的DOM元素，而非定义它的对象本身。

以下是几种可行的解决方案：

方案一：闭包捕获对象引用 #

通过立即执行函数（IIFE）创建对象，用内部变量保存对象本身，next函数直接通过这个变量访问id，不受this指向影响：

const opciones = [
    (() => {
        const obj = {
            id: 0,
            texto: "Inicio",
            descripcionTitulo: "Bienvenido al programa de carga de Viajes",
            descripcion: "Selecciona lo que quieras hacer",
            icon: <FaCheckCircle />,
            next: function() {
                console.log(obj.id);
            },
            contenido: <Inicio setToggle={setToggle} />,
            botonSiguiente: "Nuevo Viaje"
        };
        return obj;
    })(),
    (() => {
        const obj = {
            id: 1,
            texto: "Descripción",
            descripcionTitulo: "Descripcion",
            descripcion: "detalles importantes",
            icon: <FaBookOpen />,
            next: function() {
                console.log(obj.id);
            },
            contenido: <Descripcion setToggle={setToggle} />,
            botonSiguiente: "Siguiente"
        };
        return obj;
    })()
];

方案二：绑定this到对象自身 #

创建对象后，遍历数组将每个next函数的this绑定到当前对象，确保调用时指向正确：

const opciones = [
    {
        id: 0,
        texto: "Inicio",
        descripcionTitulo: "Bienvenido al programa de carga de Viajes",
        descripcion: "Selecciona lo que quieras hacer",
        icon: <FaCheckCircle />,
        next: function() {
            console.log(this.id);
        },
        contenido: <Inicio setToggle={setToggle} />,
        botonSiguiente: "Nuevo Viaje"
    },
    {
        id: 1,
        texto: "Descripción",
        descripcionTitulo: "Descripcion",
        descripcion: "detalles importantes",
        icon: <FaBookOpen />,
        next: function() {
            console.log(this.id);
        },
        contenido: <Descripcion setToggle={setToggle} />,
        botonSiguiente: "Siguiente"
    }
];

opciones.forEach(item => {
    item.next = item.next.bind(item);
});

方案三：调用时显式指定this #

在触发next的地方，用call或apply显式把this指定为当前对象：

// 示例：假设获取到当前要触发的对象
const currentOption = opciones[0];
// 调用next时指定this为对象本身
currentOption.next.call(currentOption);

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