为什么我的对象返回undefined？

Question

在我的文档就绪函数中,我创建了一个对象videoList,当我检查并单步执行代码时,对象确实存在了很短的时间.但是,在创建后不久,它将被返回,而不是由另一个函数定义.我的代码看起来像:

$(document).ready(function(){
    var videoList = new Object();
    videoList.videoPlaylist = [];
    videoList.addNew = function(data){
        $('.videoPlayer iframe').first().remove();
    }
    videoList.removeOld = function(){

    }

});

这是一个名为video.js的文件.在另一个文件buffer.js中,它在video.js之后加载并且不包含在ready函数中我有:

function loadTracks(playlistID){
    if(GoogleAuth.currentUser.get().hasGrantedScopes(SCOPE)){
         var request = gapi.client.request({
             'method':'GET',
             'path':'/youtube/v3/playlistItems',
             'params':{
                'playlistId':playlistID,
                'part':'snippet',
                'maxResults':'15',
                'key':'AIzaSyD0OY6xhl9gP9CmPXvU-rN-purRDaTrip8'
             }
         });
        request.execute(function(response){
            $('.playlistContainer').html('');
            response.items.forEach(function(element){
                $('.playlistContainer').append('<div class="songTrack"><img src="'+element.snippet.thumbnails.medium.url+'"/><span data-videoId = "'+element.snippet.resourceId.videoId+'">'+element.snippet.title+'</span></div>');
            });

            $('.songTrack').click(function(){
                var data = $(this).data('videoid');
                videoList.addNew(data);
                console.log('I was clicked');
            });
            console.log(response);
        });
    }
}

这样做的要点是,它将一个视频列表添加到容器中,每个视频都应该是可点击的.videoList对象最终将包含大量视频,addNew和removeOld将处理数组维护.我还在学习对象但是从我收集的内容中,不应该将videoList对象放在全局范围内并且可以访问该loadTracks()函数吗？

Answer 1

我认为问题是你在jQuery函数范围内声明变量,而不是在文档就绪之外全局声明.尝试类似的东西:

var videoList = new Object();
$(document).ready(function(){
   ...
});