如何在类及内部函数中正确访问对象属性？JS代码问题求助

问题根源分析 #

1. 实例ID未暴露：你在createProjectItem方法里生成的ID只是局部对象projectArray的属性，没有赋值给NewProject实例的this，所以newProject.id自然取不到值。
2. 变量作用域错误：newProject是if块内的局部变量，而appendProject函数在if块外定义，导致函数内部无法访问newProject，触发未定义错误。

修正后的完整代码 #

let projectArrayList = [];

class NewProject {
  constructor(title) {
    this.title = title;
    this.id = Date.now(); // 实例化时直接生成ID并绑定到实例
  }

  createProjectItem() {
    const projectArray = {
      title: this.title,
      id: this.id, // 使用实例的ID
    };
    projectArrayList.push(projectArray);
    console.log(projectArrayList);
  }
}

const createProjectList = document.querySelector(".create-projectList");

export default function createProjectFromClass() {
  createProjectList.addEventListener("click", () => {
    const titleInput = document.getElementById("project-title");
    const titleText = titleInput.value.trim();

    if (titleText !== "") {
      const newProject = new NewProject(titleText);
      newProject.createProjectItem();
      
      // 将appendProject放在if块内，直接使用newProject
      function appendProject() {
        const container = document.querySelector(".projects");
        const createProject = document.querySelector(".create-project");
        const projectList = document.createElement("div");
        
        projectList.setAttribute("class", "project-list project-dynamic");
        projectList.setAttribute("data-key", newProject.id); // 现在能正常访问实例ID
        projectList.innerHTML = `
          <p>${newProject.title}</p>
          <i class="fa-solid fa-trash-can"></i>
        `;
        
        container.insertBefore(projectList, createProject);
      }

      appendProject();
      titleInput.value = "";
    }
  });
}

关键修改点 #

• 暴露实例ID：在NewProject的构造函数中生成ID并赋值给this.id，确保实例能直接访问该属性。
• 调整作用域：把appendProject函数移到if块内部，使其能直接访问newProject变量；或者将newProject作为参数传递给appendProject。
• 优化显示：把固定的"Project name"替换为实际的项目标题newProject.title，提升实用性。

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