JavaScript类中如何访问约定私有字段？解决'movieName未定义'错误

我定义了一个Movie类，其中包含两个以下划线开头的约定私有字段。我需要创建一个方法返回电影标题，但当前控制台提示错误“movieName is not defined”，请问该如何解决？

原代码 #

class Movie {
  constructor(movieName, category ) {
    this._movieName = movieName;
    this._category = category;
  }

  showMovieName() {
    return `${movieName}`;
  }
}

const movie1 = new Movie("Avengers", "superheroes");

console.log(movie1.showMovieName());

错误原因 #

showMovieName方法里直接使用movieName，但该变量仅存在于constructor的参数作用域内，方法内部无法直接访问。要访问实例上的约定私有字段_movieName，必须通过this关键字引用。

修正后的代码 #

class Movie {
  constructor(movieName, category ) {
    this._movieName = movieName;
    this._category = category;
  }

  showMovieName() {
    return `${this._movieName}`;
  }
}

const movie1 = new Movie("Avengers", "superheroes");

console.log(movie1.showMovieName()); // 输出: Avengers

补充说明 #

• JavaScript类的实例方法中，访问实例属性必须用this关键字，无论属性是约定私有（下划线开头）还是公共属性。
• 下划线开头的字段只是约定俗成的私有标识，JS本身不会限制外部访问。如果需要真正的私有字段，可以使用ES6+的#前缀语法，示例如下：

class Movie {
  #movieName;
  #category;

  constructor(movieName, category ) {
    this.#movieName = movieName;
    this.#category = category;
  }

  showMovieName() {
    return `${this.#movieName}`;
  }
}

const movie1 = new Movie("Avengers", "superheroes");
console.log(movie1.showMovieName()); // 输出: Avengers
// console.log(movie1.#movieName); // 会报错，真正的私有字段无法从外部访问

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