如何在HTML中显示JavaScript的Film类实例film1、film2和film3数据？

原代码的问题点 #

• 构造函数参数赋值错误：constructor里第四个参数是fechaEstreno，但你写了this.date = date;，这里date是未定义变量，应该改成this.date = fechaEstreno;，否则电影日期会显示undefined。
• 实例调用逻辑错误：最后一行${this.Film.title}完全不对，this在全局环境下指向window，Film是类不是实例，根本拿不到title。你要调用的是自己创建好的film1、film2、film3这些实例对象。
• 未处理多实例展示：你需要把三个电影的信息都展示出来，而不是只获取单个title。

修正后的完整代码 #

HTML

<p id="films"></p>

JavaScript

class Film {
    title = '';
    director = '';
    genre = '';
    date = '';
    
    getDates(){
        return `<strong>${this.title}</strong> - 导演: ${this.director}, 类型: ${this.genre}, 上映日期: ${this.date}`;
    };

    constructor(title, director, genre, fechaEstreno){
        this.title = title;
        this.director = director;
        this.genre = genre;
        this.date = fechaEstreno; // 修正参数赋值
    }
}

// 创建电影实例
let film1 = new Film('El hobbit', 'peter jackson', 'aventura', '23-02-2002');
let film2 = new Film('El hobbit 2', 'peter jackson', 'aventura', '23-02-2010');
let film3 = new Film('El hobbit 3', 'peter jackson', 'aventura', '23-02-2020');

// 获取DOM元素
const peliHtml = document.getElementById('films');

// 把三个电影实例放进数组，生成展示内容
const filmsList = [film1, film2, film3];
// 遍历每个实例调用getDates方法，用换行分隔内容
peliHtml.innerHTML = filmsList.map(film => film.getDates()).join('<br><br>');

说明 #

• 修正构造函数的参数赋值后，电影的上映日期能正确传入实例。
• 用数组存储所有电影实例，通过map遍历调用getDates方法获取格式化文本，再用<br><br>分隔，让每个电影的信息在页面上更清晰地展示。

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