Javascript `此.some_属性`在匿名回调函数中未定义

因此，我无法完全理解为什么变量this.tasks在我的目标对象中的添加事件侦听器中变得未定义。我有一种感觉，它可能与异步编程有关（我仍然不完全理解）。对不起，我有点像JS noob，但如果你们能向我解释我做错了什么，以及什么可能是更好的解决方案，那就太棒了！谢谢

function Goal(name) {
        this.gDiv =  document.createElement('div');
        this.name = name || "goal";
        this.tasks = document.createElement('ul');
        //Sets the styling and content and adds it to the parent element
        this.initialize = function() {
            this.gDiv.className = "default";
            this.gDiv.setAttribute("id", this.name);
            this.gDiv.innerHTML = this.name;
            elem.appendChild(this.gDiv);

            this.gDiv.parentNode.insertBefore(this.tasks, this.gDiv.nextSibling);
            this.tasks.style.display = "none";


        };  
        //Creates a list underneath the a dive associated with the Goal object
        this.addTask = function(task) {
            var newLi = document.createElement('li');
                newLi.innerHTML = task;
                this.tasks.appendChild(newLi);
        };

        this.gDiv.addEventListener('click', function(){
            alert(this.tasks);              
        });

    }

---

谢谢你们！你们都回答了我的问题！这件事让我挠头已有一段时间了。你们大家好

当您输入匿名闭包且“this”更改时，范围将更改。你可以通过这样做来绕过它

var self = this;

然后用self代替这个（例如）：

如果使用jQuery，您可以做一些更好的事情：

this.gDiv.addEventListener('click', $.proxy(function() {
    alert(this.tasks);
 }, this));

两种方法都可以

编辑：在ES6中，可以使用箭头函数，因为它们不绑定自己的“this”，所以变得更简单：

this.gDiv.addEventListener('click', () => {
    alert(this.tasks);
 });

---

这里是一些方法的比较（包括你的问题），让你尝一尝，并尝试解释一些事情

//这是您遇到的问题，
//其中，匿名函数中的'this'
//与其父级的作用域不同
函数Test1（something）{
//这里的'this'指的是Test1的作用域
这个，某物，某物；
setTimeout（函数（）{
//`this`这里指的是匿名函数的作用域
//“这个。这里有些东西”是“未定义的”
console.log（this.something）；
}, 1000);
};
新的Test1（“Hello”）关键字“this”对构造函数的事件处理程序的含义发生了变化

请参阅MDN

在ES6中，引入了箭头函数，它们不绑定自己的箭头函数


因此，使用arrow语法创建匿名函数可能是目前解决此问题的最简单方法。除IE外，目前所有主流浏览器都支持它。
您的回答很好。您更改了它，现在我想知道是什么让您认为使用jQuery方法更好？在大型代码库中，我看到“var self=this；”习惯用法一直在使用，它会变得笨重，尤其是当您进一步嵌套闭包时。这可以确保你的“这”永远是你想要的。或者可以使用呼叫方式谢谢米莎的帮助！谢谢你花时间把这些放在一起！你是冠军！是的，这是一篇很棒的文章。非常感谢@Xotic750——我将努力在回答问题时像你们将来一样彻底。我必须承认我对JavaScript比较陌生，这是我在JS中见过的最好的代理函数解释之一。谢谢你的参考！我建议使用文档，而不是在没有深入理解的情况下遵循惯用的快速修复方法。这是否回答了您的问题？
this.gDiv.addEventListener('click', () => {
    alert(this.tasks);
 });