JavaScript中的继承：如何调用对象父对象？

我正在用JavaScript构建一个多源音频播放器，我的目标是编写几个提供者类（用于Youtube、Soundcloud等），这些类将扩展一个基类，因此每个提供者都有相同的方法和属性，但我可以为每个提供者自定义它们

这里有一个简化的例子

基类如下所示：

function Player_Provider(slug) {
    this.slug = slug;
    console.log("Player_Provider init: " + this.slug);
};

Player_Provider.prototype.loadUrl = function(url) {
    console.log("provider "+this.slug+" - load URL: " + url);
};

我为供应商“扩展”该类；例如：

function Player_Provider_Youtube() {
  Player_Provider.call(this, 'youtube');
}

Player_Provider_Youtube.prototype = Object.create(Player_Provider.prototype); //inherit methods
Player_Provider_Youtube.prototype.constructor = Player_Provider_Youtube; //fix constructor

Player_Provider_Youtube.prototype.loadUrl = function(url) {
    Player_Provider.prototype.loadUrl(url);
}

然后我像这样注册它：

var providers = [];
providers.youtube = new Player_Provider_Youtube();
providers.youtube.loadUrl("https://www.youtube.com/watch?v=5SIQPfeUTtg");

控制台中的哪些输出：

Player_Provider init: youtube
provider undefined - load URL: https://www.youtube.com/watch?v=5SIQPfeUTtg

如您所见，控制台输出：

“提供程序未定义-加载URL…”

当我希望它输出时：

“提供商youtube-加载URL…”

这里的想法是，在提供者的每个函数中（每次都会重写基类中的函数），我会首先调用“parent”函数，至少要输出这样的控制台消息；并最终运行一些代码——以获得尽可能干净的代码

我对PHP比较熟悉，这是我第一次尝试使用JavaScript做这类事情

---

您将如何做到这一点？为什么我的变量未定义？

在ES5及更早版本中，这是一个难题。您可以使用

调用

或

应用

，正如您所发现的，它非常冗长

Player_Provider_Youtube.prototype.loadUrl = function(url) {
    Player_Provider.prototype.loadUrl.call(this, url);
    // ------------------------------^^^^^^^^^^^
}

我发现我写了一个库来处理它（）已经够痛苦的了，但是现在它已经过时了

但在2017年，你不再这样做了；相反，您使用ES2015的

class

语法和transfile（类似于），因此它可以在较旧的JavaScript引擎上运行：

类父类{
方法（）{
console.log（“父方法”）；
}
}
类子级扩展父级{
方法（）{
console.log（“子方法”）；
super.method（）；
}
}
new Child（）.method（）在ES5及更早版本中，这是一种痛苦。您可以使用
调用
或
应用
，正如您所发现的，它非常冗长

Player_Provider_Youtube.prototype.loadUrl = function(url) {
    Player_Provider.prototype.loadUrl.call(this, url);
    // ------------------------------^^^^^^^^^^^
}

我发现我写了一个库来处理它（）已经够痛苦的了，但是现在它已经过时了

但在2017年，你不再这样做了；相反，您使用ES2015的
class
语法和transfile（类似于），因此它可以在较旧的JavaScript引擎上运行：


类父类{
方法（）{
console.log（“父方法”）；
}
}
类子级扩展父级{
方法（）{
console.log（“子方法”）；
super.method（）；
}
}
new Child（）.method（）我刚刚做了一个JSFIDLE，T.J.Crowder打败了我


函数播放器\u提供程序（slug）{
this.slug=slug；
log（“Player_Provider init:+this.slug”）；
};
Player\u Provider.prototype.loadUrl=函数（url）{
log（“provider”+this.slug+”-加载URL:+URL）；
};
函数播放器\提供程序\ Youtube（）{
Player_Provider.call（这是“youtube”）；
}
Player\u Provider\u Youtube.prototype=Object.create（Player\u Provider.prototype）//继承方法
Player\u Provider\u Youtube.prototype.constructor=Player\u Provider\u Youtube//固定构造函数
播放器\提供者\ Youtube.prototype.loadUrl=函数（url）{
Player\u Provider.prototype.loadUrl.call（这个url）；
}
var提供者=[]；
providers.youtube=新播放器\提供商\ youtube（）；
providers.youtube.loadUrl（“https://www.youtube.com/watch?v=5SIQPfeUTtg");我刚刚做了一个JSFIDLE，T.J.Crowder打败了我


函数播放器\u提供程序（slug）{
this.slug=slug；
log（“Player_Provider init:+this.slug”）；
};
Player\u Provider.prototype.loadUrl=函数（url）{
log（“provider”+this.slug+”-加载URL:+URL）；
};
函数播放器\提供程序\ Youtube（）{
Player_Provider.call（这是“youtube”）；
}
Player\u Provider\u Youtube.prototype=Object.create（Player\u Provider.prototype）//继承方法
Player\u Provider\u Youtube.prototype.constructor=Player\u Provider\u Youtube//固定构造函数
播放器\提供者\ Youtube.prototype.loadUrl=函数（url）{
Player\u Provider.prototype.loadUrl.call（这个url）；
}
var提供者=[]；
providers.youtube=新播放器\提供商\ youtube（）；
providers.youtube.loadUrl（“https://www.youtube.com/watch?v=5SIQPfeUTtg");