javascript - object.create 和链接对象

Question

在我下面的代码中，我试图通过链接对象来委派任务。我的目标是将媒体对象置于链的“顶部”，并将歌曲的每个实例置于链的底部，如下所示:media <-- song <-- songXYZ

JavaScript:

var playlistElement = document.getElementById("playlist");

var playButton = document.getElementById("play");
playButton.onclick = function() {
    playlist.play();
    playlist.renderInElement(playlistElement);
};
var nextButton = document.getElementById("next");
nextButton.onclick = function() {
    playlist.next();
    playlist.renderInElement(playlistElement);
};
var stopButton = document.getElementById("stop");
stopButton.onclick = function() {
    playlist.stop();
    playlist.renderInElement(playlistElement);
};

var playlist = {
    init: function() {
        this.songs = [];
        this.nowPlayingIndex = 0;
    },
    add: function(song) {
        this.songs.push(song);
    },
    play: function() {
        var currentSong = this.songs[this.nowPlayingIndex];
        currentSong.play();
    },
    stop: function() {
        var currentSong = this.songs[this.nowPlayingIndex];
        currentSong.stop();
    },
    next: function() {
        this.stop();
        this.nowPlayingIndex++;
        if (this.nowPlayingIndex === this.songs.length) {
            this.nowPlayingIndex = 0;
        }
        this.play();
    },
    renderInElement: function(list) {
        list.innerHTML = "";
        for (var i = 0; i <this.songs.length; i++) {
            list.innerHTML += this.songs[i].toHTML();
        }
    }

};

var media = {
    init: function(title, duration) {
        this.title = title;
        this.duration = duration;
        this.isPlaying = false;
    },
    play: function() {
        this.isPlaying = true;
    },
    stop: function() {
        this.isPlaying = false;
    }
};

var song = Object.create(media);

song = {
    setup: function(title, artist, duration) {
        this.init(title, duration);
        this.artist = artist;
    },
    toHTML: function() {
        var htmlString = '<li';
        if(this.isPlaying) {
            htmlString += ' class="current"';
        }
        htmlString += '>';
        htmlString += this.title;
        htmlString += ' - ';
        htmlString += this.artist;
        htmlString += '<span class="duration">'
        htmlString += this.duration;
        htmlString += '</span></li>';

        return htmlString;
    }
};

playlist.init();

var song1 = Object.create(song);
song1.setup("Here comes the Sun", "The Beatles", "2:54");
var song2 = Object.create(song);
song2.setup("Walking on Sunshine", "Katrina and the Waves", "3:43");

playlist.add(song1);
playlist.add(song2);

playlist.renderInElement(playlistElement);

我让对象使用 Object.create() 相互委托(delegate)。

歌曲对象通过以下方式委托(delegate)给媒体对象:

var song = Object.create(media);

我创建的每首歌曲都通过以下方式委托(delegate)给歌曲对象:

var song1 = Object.create(song);

根据 Chrome 开发工具 song.isPrototypeOf(song1) === true，但 media.isPrototypeOf(song) === false。我使用相同的代码将歌曲链接到媒体，就像我将歌曲 1 链接到歌曲一样。另外，有人告诉我 this.init 不是一个函数。但是当在 song1 和 song 对象上找不到它时，它应该向上委托(delegate)链并在 media 对象上找到它。

这是 JSfiddle:https://jsfiddle.net/n3q64nq4/

Answer 1

正如我在评论中所说，问题的根源在于，您对 song 进行了两项分配，其中第二项破坏了第一项。您想要使用 Object.assign 或 polyfill/等价物，或者直接分配属性:

song.setup = ...;
song.toHTML = ...;