JavaScript随机名言生成器按钮点击报错：TypeError无法读取length属性

错误原因 #

点击「New Quote」按钮触发的TypeError: Cannot read properties of undefined (reading 'length')，核心是函数绑定丢失了this指向：
当你直接将quote.newQuote作为事件回调时，函数内部的this不再指向Quote类的实例，而是指向触发事件的按钮元素（HTMLButtonElement）。此时this.apiQuote为undefined，自然无法读取length属性。

修复方案 #

以下三种方式都可以解决这个问题：

1. 用箭头函数包裹回调 #

箭头函数会继承外部作用域的this，确保指向Quote实例：

document.getElementById('newQuote').addEventListener('click', () => quote.newQuote())

2. 使用bind()绑定this #

通过bind()强制将函数的this绑定到quote实例：

document.getElementById('newQuote').addEventListener('click', quote.newQuote.bind(quote))

3. 类内部提前绑定（推荐） #

在类的构造函数中提前绑定newQuote的this指向，避免后续重复绑定：

class Quote {
    apiQuote = [];
    apiUrl = '';
    
    constructor(apiUrl){
        this.apiUrl = apiUrl;
        // 提前绑定this到当前实例
        this.newQuote = this.newQuote.bind(this);
    };
    
    // 其余方法保持不变
}

完整修复代码示例 #

HTML代码 #

<div id="quote-container">
    <div>
      <span id="quote"></span>
    </div>
    <div>
      <span id="author"></span>
    </div>
    <div>
      <button id="newQuote">New Quote</button>
    </div>
  </div>

JavaScript代码（采用类内绑定方案） #

class Quote {
    apiQuote = [];
    apiUrl = '';
    
    constructor(apiUrl){
        this.apiUrl = apiUrl;
        this.newQuote = this.newQuote.bind(this);
    };
    
    newQuote(){
        const quoteTxt = document.getElementById('quote');
        const author = document.getElementById('author');
        
        const quote = this.apiQuote[Math.floor(Math.random() * this.apiQuote.length)]; 
        
        quoteTxt.innerHTML = quote.text;
        // 处理部分名言没有作者的情况
        author.innerHTML = quote.author || 'Unknown';
    };
    
    async getQuote(){
        try{
            const response = await fetch(this.apiUrl);
            this.apiQuote = await response.json();
            this.newQuote();
        }catch(e){
            console.error('获取名言失败:', e);
        }
    }
}

const quote = new Quote('https://type.fit/api/quotes');
quote.getQuote();

document.getElementById('newQuote').addEventListener('click', quote.newQuote);

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