Question

在下面的代码中，我尝试通过链接对象来委派任务。我的目标是将媒体对象放在＆＃34; top＆＃34;链的每个实例都在底部，如下所示：media＆lt; - song＆lt; - 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（）将对象委托给另一个。

歌曲对象通过以下方式委托给媒体对象：

var song = Object.create(media);

我创作的每首歌曲都通过以下方式委托给歌曲对象：

var song1 = Object.create(song);

根据Chrome开发工具song.isPrototypeOf（song1）=== true，但media.isPrototypeOf（song）=== false。我使用同一段代码将歌曲与媒体相关联，就像我将歌曲链接到歌曲一样。另外，我告诉过this.init不是一个功能。但是，如果没有找到song1和song对象，它应该委托链，并在媒体对象中找到它。

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

Answer 1

问题的根源是，正如我在评论中所说，你有song的两个任务，第二个任务是第一个任务。您希望使用Object.assign或polyfill /等效，或直接指定属性：

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

object.create和链接对象

1 个答案: