Javascript Can'；由于此关键字，无法将JSON正确加载到DOM中

我试图通过javascript模块模式加载JSON。 我想要3个人在JSON文件中，加载到DOM中。 我相信，在将其绑定到

加载数据

函数后，它指向了错误的对象

这是我的密码

(function() {

    var people = {
        people: [],

        init: function() {
                this.cacheDom();
                this.bindEvents();
                this.render();
        },

        cacheDom: function () {
            this.$el = document.querySelector('#peopleModule');
            this.$button = this.$el.querySelector('button');
            this.$input = this.$el.querySelector('input');
            this.$ul = this.$el.querySelector('ul');
            this.template = this.$el.querySelector('#people-template').innerHTML;
        },

        bindEvents: function() {
            document.addEventListener('DOMContentLoaded', this.loadingData.bind(this));

        },

        render: function() {
            var data = {
                people: this.people
            };
            this.$ul.innerHTML = Mustache.render(this.template, data);
        },

        loadingData: function() {
            var xhr = new XMLHttpRequest(),
                url = 'data/data.json',
                _self = this,
                result;
            xhr.onreadystatechange = function() {
                if(this.readyState == 4 && this.status == 200) {
                    result = JSON.parse(this.responseText);
                    _self.people = result.people;
                }
            };
            xhr.open('GET', url, true);
            xhr.send();

        }
    };

    people.init();

})();

这是我的JSON

{
    "people": [
        {
            "name" : "Cameron"
        },
        {
            "name" : "Alex"
        },
        {
            "name" : "Sara"
        }
    ]   
}

这是我的HTML

<div id="peopleModule">
        <h1>People</h1>
        <div>
            <input type="text" placeholder="Name">
            <button id="addPerson">Add Person</button>          
        </div>
        <ul id="people">
            <script id="people-template" type="text/template">
                {{#people}}
                <li>
                    <span>{{name}}</span>
                    <del>X</del>
                </li>
                {{/people}}
            </script>
        </ul>
    </div>

人
添加人

{{{人}

{{name}}
X

{{/人}

我把

render（）

函数放错地方了

这与

这个
关键字无关

(function() {

    var people = {
        people: [],

        init: function() {
                this.cacheDom();
                this.bindEvents();
        },

        cacheDom: function () {
            this.$el = document.querySelector('#peopleModule');
            this.$button = this.$el.querySelector('button');
            this.$input = this.$el.querySelector('input');
            this.$ul = this.$el.querySelector('ul');
            this.template = this.$el.querySelector('#people-template').innerHTML;
        },

        bindEvents: function() {
            document.addEventListener('DOMContentLoaded', this.loadingData.bind(this));

        },

        render: function() {
            var data = {
                people: this.people
            };
            this.$ul.innerHTML = Mustache.render(this.template, data);
        },

        loadingData: function() {
            var xhr = new XMLHttpRequest(),
                url = 'data/data.json',
                _self = this,
                result;
            xhr.onreadystatechange = function() {
                if(this.readyState == 4 && this.status == 200) {
                    result = JSON.parse(this.responseText);
                    _self.people = result.people;
                    _self.render();
                }
            };
            xhr.open('GET', url, true);
            xhr.send();

        }
    };

    people.init();

})();

因为您只是调用函数，而不是使用
new
从函数中创建对象实例，
这并不表示这些实例
people
不应该声明为对象文本，它应该声明为
function people
，然后您可以使用
let peopleObj=new people（）
调用它。然后，
peopleObj
将引用创建的对象实例，
this
也将引用正在运行的代码中的实例。如果我删除loadingData对象，只使用示例数据，如people=['1'，'2'，'3']，如果我每隔一个函数作为加载数据的回调函数运行，它也会从JSON加载数据，但是我不喜欢回调解决方案当我在loadingData函数中添加一个警报时，它会执行，你为什么这么说？我并不是说你的函数不会执行。我的意思是，它们导致
这个
没有按您希望的方式绑定
此
用于构造函数函数（使用
new
关键字调用的函数）。