解决JavaScript类中this上下文丢失与图片资源加载时机问题

const SelectedSkeleton = eval(character).Skeleton; // 假设 eval(character) 返回一个角色实例
const SelectedFunction = SelectedSkeleton[node]; // 例如 SelectedSkeleton.addLeftSide
SelectedFunction(name, Node[name]); // 问题出在这里

// 修正后的代码片段
Object.keys(Node).forEach(name => {
    const SelectedSkeleton = gameCharacters[character].Skeleton; // 假设 gameCharacters 存储了角色实例
    const SelectedFunction = SelectedSkeleton[node];

    if (typeof SelectedFunction === 'function') {
        // 使用 .call() 显式绑定 this
        SelectedFunction.call(SelectedSkeleton, name, Node[name]);
    } else {
        console.warn(`Method ${node} not found or is not a function on Skeleton.`);
    }
});

// 示例：如果需要在循环外提前绑定
const boundFunction = SelectedFunction.bind(SelectedSkeleton);
boundFunction(name, Node[name]);

// 假设你有一个存储角色实例的对象
const gameCharacters = {
    Someone: new Character('Someone')
};

// 在循环中替换 eval
// const SelectedSkeleton = eval(character).Skeleton; // 避免使用 eval
const SelectedSkeleton = gameCharacters[character].Skeleton; // 安全地获取实例

window.addEventListener('load', () => {
    // 在这里执行依赖于所有图片加载完成的逻辑
    // 例如：初始化角色图片、启动游戏循环等
});

// Skeleton 和 Character 类定义保持不变 (Character.UpdateCharacter 建议改为箭头函数或绑定)
class Skeleton {
    constructor(updateFunction) {
        this.Faces = new Map();
        this.LeftSides = new Map();
        this.RightSides = new Map();

        this.CurrentFace = null;
        this.CurrentLeftSide = null;
        this.CurrentRightSide = null;

        this.Update = updateFunction;
    }

    addFace(name, src) {
        if (this.Faces.has(name)) {
            console.warn(`Face ${name} already exists`);
            return;
        }
        const FaceImage = new Image();
        FaceImage.src = src;
        this.Faces.set(name, FaceImage);
    }

    addLeftSide(name, src) {
        if (this.LeftSides.has(name)) {
            console.warn(`Left side ${name} already exists`);
            return;
        }
        const LeftSideImage = new Image();
        LeftSideImage.src = src;
        this.LeftSides.set(name, LeftSideImage);
    }

    addRightSide(name, src) {
        if (this.RightSides.has(name)) {
            console.warn(`Right side ${name} already exists`);
            return;
        }
        const RightSideImage = new Image();
        RightSideImage.src = src;
        this.RightSides.set(name, RightSideImage);
    }

    setFace(name) {
        if (!this.Faces.has(name)) {
            console.warn(`Face ${name} does not exist`);
            return;
        }
        this.CurrentFace = this.Faces.get(name);
        this.Update(this);
    }

    setLeftSide(name) {
        if (!this.LeftSides.has(name)) {
            console.warn(`Left side ${name} does not exist`);
            return;
        }
        this.CurrentLeftSide = this.LeftSides.get(name);
        this.Update(this);
    }

    setRightSide(name) {
        if (!this.RightSides.has(name)) { // 注意：原代码此处条件有误，应为 !this.RightSides.has(name)
            console.warn(`Right side ${name} does not exist`);
            return;
        }
        this.CurrentRightSide = this.RightSides.get(name);
        this.Update(this);
    }
}

class Character {
    constructor(name) {
        this.name = name;
        this.PoseTypes = ['normal', 'side'];
        this.Pose = 'normal';
        // 确保 UpdateCharacter 的 this 绑定到 Character 实例
        this.Skeleton = new Skeleton(this.UpdateCharacter.bind(this));
    }

    UpdateCharacter(ThisSkeleton) {
        // 可以在这里访问 this.name 等 Character 实例属性
        console.log(`Character ${this.name} updated with skeleton:`, ThisSkeleton);
    }
}

// 资源路径定义
const Assets = '../../assets/';
const Images = `${Assets}images/`;
const CharacterImages = `${Images}images/`;
const CharacterImageDirectory = name => `${CharacterImages}${name}`;

const CharDirectory = CharacterImageDirectory('someone');

// 角色资源配置
const CharachterNodes = {
    Someone: {
        addLeftSide: {
            'stand': `${CharDirectory}/1l.png`,
            'up': `${CharDirectory}/2l.png`,
        },
        addRightSide: {
            'stand': `${CharDirectory}/1r.png`,
            'up': `${CharDirectory}/2r.png`,
        },
        addFace: {
            'happy': `${CharDirectory}/a.png`,
        }
    },
};

// 存储角色实例的对象，避免使用 eval
const gameCharacters = {
    Someone: new Character('Someone') // 确保角色实例已创建
};

// 监听页面的 'load' 事件，确保所有图片资源加载完毕
window.addEventListener('load', () => {
    console.log('All page resources including images have loaded.');

    Object.keys(CharachterNodes).forEach(characterName => {
        const CharacterNode = CharachterNodes[characterName];
        const characterInstance = gameCharacters[characterName]; // 从 gameCharacters 获取角色实例

        if (!characterInstance) {
            console.error(`Character instance for ${characterName} not found in gameCharacters.`);
            return;
        }

        const SelectedSkeleton = characterInstance.Skeleton;

        Object.keys(CharacterNode).forEach(nodeMethodName => {
            const Node = CharacterNode[nodeMethodName]; // 例如 'addLeftSide', 'addRightSide', 'addFace'

            // 检查方法是否存在且是函数
            if (typeof SelectedSkeleton[nodeMethodName] === 'function') {
                const SelectedFunction = SelectedSkeleton[nodeMethodName];

                Object.keys(Node).forEach(assetName => {
                    // 关键：使用 .call() 显式绑定 this 到 SelectedSkeleton 实例
                    SelectedFunction.call(SelectedSkeleton, assetName, Node[assetName]);
                });
            } else {
                console.warn(`Method "${nodeMethodName}" not found or is not a function on Skeleton instance for character "${characterName}".`);
            }
        });
    });

    // 此时所有图片资源已加载并分配给 Skeleton，可以安全地设置角色姿态
    gameCharacters.Someone.Skeleton.setFace('happy');
    gameCharacters.Someone.Skeleton.setLeftSide('stand');
    gameCharacters.Someone.Skeleton.setRightSide('stand');
    console.log('Character assets loaded and set.');
});