如何在JavaScript函数内访问类/对象？解决初始化报错及Setter使用问题

我来帮你搞定这个问题，你的代码里有两个核心问题导致了报错和功能异常，咱们一步步梳理修复：

问题分析 #

1. 未声明变量引发的作用域错误
   你在getCarsInfo函数里直接写了mycar=new Cars("Tata")，没有用let/const声明变量。这会让mycar变成全局变量，再加上JavaScript中类声明不会被提升（函数声明会被提升），如果函数在类完成初始化前被调用，就会触发Cannot access 'Cars' before initialization的报错。

2. Getter/Setter的使用方式错误
   你把carBrandName这个setter当成普通函数调用了（mycar.carBrandName("abc")），但Getter和Setter本质是属性的语法糖，不是方法：

   • Getter：直接通过对象.属性名访问，不需要括号
   • Setter：通过对象.属性名 = 值的赋值方式调用，不能加括号传参

修复后的完整代码 #

class Cars {
  constructor(brand) {
    this.carBrand = brand;
  }
  // Getter：获取品牌名称
  get carBrandName() {
    return this.carBrand;
  }
  // Setter：设置品牌名称
  set carBrandName(newCarName) {
    this.carBrand = newCarName;
  }
}

function getCarsInfo() {
  // 用let声明局部变量，避免全局污染和作用域问题
  let mycar = new Cars("Tata");
  console.log("Hi ");
  
  // 正确使用Setter：赋值操作，而非函数调用
  mycar.carBrandName = "abc";
  // 从输入框获取值并设置
  mycar.carBrandName = document.getElementById("getCarName").value;
  
  console.log(mycar.carBrand);
  document.getElementById("carDetails").innerHTML = mycar.carBrand;
}

额外优化建议 #

为了避免页面加载顺序导致的潜在问题，建议不要直接在HTML元素上用onclick绑定事件，而是通过JavaScript在页面加载完成后绑定：

// 等待DOM加载完成后再绑定点击事件
document.addEventListener('DOMContentLoaded', function() {
  const button = document.querySelector('button');
  if (button) {
    button.addEventListener('click', getCarsInfo);
  }
});

这样能确保类和DOM元素都已初始化完成，再执行函数逻辑。

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