ES6 类对象在 HTML 中未定义答案

【问题标题】：ES6 class object undefined in HTMLES6 类对象在 HTML 中未定义
【发布时间】：2018-07-14 08:11:25
【问题描述】：

我一直在尝试使用 ES6 类，但遇到以下错误：

VM1534:1 Uncaught ReferenceError: toDo is not defined
    at eval (eval at onclick (index.html), <anonymous>:1:13)
    at HTMLButtonElement.onclick (index.html:35)

我所做的只是点击Add 按钮，上面的错误显示在我的控制台中，没有任何反应:( .

我的 script.js：

class ToDoClass {
    constructor(){
        alert('Hello World');
        this.tasks = [
            {task : 'Go To Dentist' , isComplete : false},
            {task : 'Do Gradening' , isComplete : true},
            {task : 'Renew Library Account' , isComplete : false}
        ];
        this.loadTasks();
        this.addEventListeners();
    }
    addTaskClick(){
        let target = docuemt.getElementById('addTask');
        this.addTask(target.value);
        target.value= "";
    }

    addTask(task){
        let newTask = {
            task : task,
            isComplete : false
        };

        let parentDiv = document.getElementById('addTask').parentElement;
        if(task === ''){
            parentDiv.classList.add('has-error');
        }
        else{
            parentDiv.classList.remove('has-error');
            this.tasks.push(newTask);
            this.loadTasks();
        }
    }
}

window.addEventListener('load',()=>{
    var toDo = new ToDoClass();
});

我的 index.html 文件：

<div class="form-group col-md-1">
    <button class="btn btn-primary" onClick="toDo.addTaskClick()">Add</button>
</div>

任何帮助表示赞赏:)。

提前致谢

【问题讨论】：

Why can't I use onClick to execute a function inside a jQuery $(document).ready function? 的可能重复项。这只是一个范围问题。它与类、ES6 甚至 jQuery 的 $(document).ready 无关。

标签： javascript

【解决方案1】：

您的变量未在全局范围内声明。如果你只是改变它被声明的地方

var toDo;

window.addEventListener('load',()=>{
  toDo = new ToDoClass();
});

一切都会按预期进行。

【讨论】：

更好的是：完全避免使用内联JS，而是将点击事件监听器绑定到元素。
这里也可以使用let，不必一定是var。
谢谢你：D。按预期工作。

【解决方案2】：

你应该把你的toDo放在全局中，因为你在html click中调用了函数。它在全局范围内执行。如果你把toDo函数放在window.onload中。它是在部分范围内。

但是，下面是更好的方法，避免在 html 中使用事件；

    class ToDoClass {
        constructor(){
            alert('Hello World');
            this.tasks = [
                {task : 'Go To Dentist' , isComplete : false},
                {task : 'Do Gradening' , isComplete : true},
                {task : 'Renew Library Account' , isComplete : false}
            ];
            this.loadTasks();
            this.addEventListeners();
        }
        addTaskClick(){
            let target = docuemt.getElementById('addTask');
            this.addTask(target.value);
            target.value= "";
        }

        addTask(task){
            let newTask = {
                task : task,
                isComplete : false
            };

            let parentDiv = document.getElementById('addTask').parentElement;
            if(task === ''){
                parentDiv.classList.add('has-error');
            }
            else{
                parentDiv.classList.remove('has-error');
                this.tasks.push(newTask);
                this.loadTasks();
            }
        }
    }
    
    window.addEventListener('load',()=>{
       var toDo = new ToDoClass();
       var btnPrimary=document.getElementsByClassName('btn-primary')[0];
btnPrimary.addEventListener('click',toDo.addTaskClick , false);
    });

    <div class="form-group col-md-1">
        <button class="btn btn-primary">Add</button>
      </div>

【讨论】：