我有一个基类：
function Monster() {
this.health = 100;
}
Monster.prototype.growl = function() {
console.log("Grr!");
}
我想扩展并创建另一个类：
function Monkey extends Monster() {
this.bananaCount = 5;
}
Monkey.prototype.eatBanana {
this.bananaCount--;
this.health++; //Accessing variable from parent class monster
this.growl(); //Accessing function from parent class monster
}
我已经做了很多研究，似乎有很多复杂的解决方案可以在 JavaScript 中执行此操作。在 JS 中实现这一目标的最简单和最可靠的方法是什么？
下面更新了 ES6
这个 MDN 文档很好地描述了扩展类：
https://developer.mozilla.org/en-US/docs/JavaScript/Introduction_to_Object-Oriented_JavaScript
特别是，现在他们处理它：
// define the Person Class
function Person() {}
Person.prototype.walk = function(){
alert ('I am walking!');
};
Person.prototype.sayHello = function(){
alert ('hello');
};
// define the Student class
function Student() {
// Call the parent constructor
Person.call(this);
}
// inherit Person
Student.prototype = Object.create(Person.prototype);
// correct the constructor pointer because it points to Person
Student.prototype.constructor = Student;
// replace the sayHello method
Student.prototype.sayHello = function(){
alert('hi, I am a student');
}
// add sayGoodBye method
Student.prototype.sayGoodBye = function(){
alert('goodBye');
}
var student1 = new Student();
student1.sayHello();
student1.walk();
student1.sayGoodBye();
// check inheritance
alert(student1 instanceof Person); // true
alert(student1 instanceof Student); // true
请注意，Object.create()某些较旧的浏览器不支持该功能，包括 IE8：
如果您需要支持这些，链接的 MDN 文档建议使用 polyfill，或以下近似值：
function createObject(proto) {
function ctor() { }
ctor.prototype = proto;
return new ctor();
}
使用 this likeStudent.prototype = createObject(Person.prototype)比使用更好new Person()，因为它避免在继承原型时调用父构造函数，并且仅在调用继承者构造函数时调用父构造函数。
值得庆幸的是，JavaScript 设计者听到了我们的求助请求，并采用了更合适的方式来解决这个问题。
MDN有另一个关于 ES6 类继承的好例子，但我将展示与上面在 ES6 中复制的完全相同的类集：
class Person {
sayHello() {
alert('hello');
}
walk() {
alert('I am walking!');
}
}
class Student extends Person {
sayGoodBye() {
alert('goodBye');
}
sayHello() {
alert('hi, I am a student');
}
}
var student1 = new Student();
student1.sayHello();
student1.walk();
student1.sayGoodBye();
// check inheritance
alert(student1 instanceof Person); // true
alert(student1 instanceof Student); // true
干净易懂，就像我们都想要的那样。请记住，虽然 ES6 很常见，但并非所有地方都支持它：
ES6 现在让你有机会使用class和extends关键字：
然后，您的代码将是：
你有一个基类：
class Monster{
constructor(){
this.health = 100;
}
growl() {
console.log("Grr!");
}
}
您想扩展并创建另一个类：
class Monkey extends Monster {
constructor(){
super(); //don't forget "super"
this.bananaCount = 5;
}
eatBanana() {
this.bananaCount--;
this.health++; //Accessing variable from parent class monster
this.growl(); //Accessing function from parent class monster
}
}
试试这个：
Function.prototype.extends = function(parent) {
this.prototype = Object.create(parent.prototype);
};
Monkey.extends(Monster);
function Monkey() {
Monster.apply(this, arguments); // call super
}
编辑：我在这里放了一个快速演示http://jsbin.com/anekew/1/edit。请注意，这extends是 JS 中的保留字，您在 linting 代码时可能会收到警告，您可以简单地命名它inherits，这就是我通常所做的。
有了这个帮助器并使用一个对象props作为唯一参数，JS 中的继承变得更简单了：
Function.prototype.inherits = function(parent) {
this.prototype = Object.create(parent.prototype);
};
function Monster(props) {
this.health = props.health || 100;
}
Monster.prototype = {
growl: function() {
return 'Grrrrr';
}
};
Monkey.inherits(Monster);
function Monkey() {
Monster.apply(this, arguments);
}
var monkey = new Monkey({ health: 200 });
console.log(monkey.health); //=> 200
console.log(monkey.growl()); //=> "Grrrr"
如果您不喜欢原型方法，因为它并没有真正以良好的 OOP 方式运行，您可以尝试以下操作：
var BaseClass = function()
{
this.some_var = "foobar";
/**
* @return string
*/
this.someMethod = function() {
return this.some_var;
}
};
var MyClass = new Class({ extends: BaseClass }, function()
{
/**
* @param string value
*/
this.__construct = function(value)
{
this.some_var = value;
}
})
使用轻量级库（缩小 2k）：https ://github.com/haroldiedema/joii
我可以提出一种变体，只是在书中读过，这似乎是最简单的：
function Parent() {
this.name = 'default name';
};
function Child() {
this.address = '11 street';
};
Child.prototype = new Parent(); // child class inherits from Parent
Child.prototype.constructor = Child; // constructor alignment
var a = new Child();
console.log(a.name); // "default name" trying to reach property of inherited class
这是 elclanrs 解决方案的扩展（请原谅双关语），包括实例方法的详细信息，并对问题的这方面采取可扩展的方法；我完全承认，这要归功于 David Flanagan 的“JavaScript：权威指南”（针对此上下文进行了部分调整）。请注意，这显然比其他解决方案更冗长，但从长远来看可能会受益。
首先，我们使用 David 的简单“扩展”函数，它将属性复制到指定对象：
function extend(o,p) {
for (var prop in p) {
o[prop] = p[prop];
}
return o;
}
然后我们实现他的子类定义实用程序：
function defineSubclass(superclass, // Constructor of our superclass
constructor, // Constructor of our new subclass
methods, // Instance methods
statics) { // Class properties
// Set up the prototype object of the subclass
constructor.prototype = Object.create(superclass.prototype);
constructor.prototype.constructor = constructor;
if (methods) extend(constructor.prototype, methods);
if (statics) extend(constructor, statics);
return constructor;
}
在最后的准备工作中，我们使用 David 的新 jiggery-pokery 来增强我们的 Function 原型：
Function.prototype.extend = function(constructor, methods, statics) {
return defineSubclass(this, constructor, methods, statics);
};
在定义了我们的 Monster 类之后，我们执行以下操作（这对于我们想要扩展/继承的任何新类都是可重用的）：
var Monkey = Monster.extend(
// constructor
function Monkey() {
this.bananaCount = 5;
Monster.apply(this, arguments); // Superclass()
},
// methods added to prototype
{
eatBanana: function () {
this.bananaCount--;
this.health++;
this.growl();
}
}
);
对于传统的扩展，您可以简单地将超类编写为构造函数，然后将此构造函数应用于继承的类。
function AbstractClass() {
this.superclass_method = function(message) {
// do something
};
}
function Child() {
AbstractClass.apply(this);
// Now Child will have superclass_method()
}
angularjs 示例：
http://plnkr.co/edit/eFixlsgF3nJ1LeWUJKsd?p=preview
app.service('noisyThing',
['notify',function(notify){
this._constructor = function() {
this.scream = function(message) {
message = message + " by " + this.get_mouth();
notify(message);
console.log(message);
};
this.get_mouth = function(){
return 'abstract mouth';
}
}
}])
.service('cat',
['noisyThing', function(noisyThing){
noisyThing._constructor.apply(this)
this.meow = function() {
this.scream('meooooow');
}
this.get_mouth = function(){
return 'fluffy mouth';
}
}])
.service('bird',
['noisyThing', function(noisyThing){
noisyThing._constructor.apply(this)
this.twit = function() {
this.scream('fuuuuuuck');
}
}])
对于自学者：
function BaseClass(toBePrivate){
var morePrivates;
this.isNotPrivate = 'I know';
// add your stuff
}
var o = BaseClass.prototype;
// add your prototype stuff
o.stuff_is_never_private = 'whatever_except_getter_and_setter';
// MiddleClass extends BaseClass
function MiddleClass(toBePrivate){
BaseClass.call(this);
// add your stuff
var morePrivates;
this.isNotPrivate = 'I know';
}
var o = MiddleClass.prototype = Object.create(BaseClass.prototype);
MiddleClass.prototype.constructor = MiddleClass;
// add your prototype stuff
o.stuff_is_never_private = 'whatever_except_getter_and_setter';
// TopClass extends MiddleClass
function TopClass(toBePrivate){
MiddleClass.call(this);
// add your stuff
var morePrivates;
this.isNotPrivate = 'I know';
}
var o = TopClass.prototype = Object.create(MiddleClass.prototype);
TopClass.prototype.constructor = TopClass;
// add your prototype stuff
o.stuff_is_never_private = 'whatever_except_getter_and_setter';
// to be continued...
使用 getter 和 setter 创建“实例”：
function doNotExtendMe(toBePrivate){
var morePrivates;
return {
// add getters, setters and any stuff you want
}
}
有多种方法可以解决在 Javascript 中使用原型扩展构造函数的问题。这些方法中的哪一个是“最佳”解决方案是基于意见的。但是，这里有两种常用的方法来扩展构造函数的函数原型。
class Monster {
constructor(health) {
this.health = health
}
growl () {
console.log("Grr!");
}
}
class Monkey extends Monster {
constructor (health) {
super(health) // call super to execute the constructor function of Monster
this.bananaCount = 5;
}
}
const monkey = new Monkey(50);
console.log(typeof Monster);
console.log(monkey);上述使用ES 2015类的方法只不过是 javascript 中原型继承模式的语法糖。在我们评估的第一个日志中，typeof Monster我们可以观察到这是函数。这是因为类只是底层的构造函数。尽管如此，您可能喜欢这种实现原型继承的方式，并且绝对应该学习它。它用于主要框架，例如ReactJS和Angular2+.
Object.create()：function makeMonkey (bananaCount) {
// here we define the prototype
const Monster = {
health: 100,
growl: function() {
console.log("Grr!");}
}
const monkey = Object.create(Monster);
monkey.bananaCount = bananaCount;
return monkey;
}
const chimp = makeMonkey(30);
chimp.growl();
console.log(chimp.bananaCount);此方法使用的Object.create()方法接受一个对象，该对象将是它返回的新创建对象的原型。因此，我们首先在这个函数中创建原型对象，然后调用Object.create()它返回一个空对象，并将__proto__属性设置为 Monster 对象。在此之后我们可以初始化对象的所有属性，在这个例子中我们将香蕉计数分配给新创建的对象。
绝对最小（并且正确，与上面的许多答案不同）版本是：
function Monkey(param){
this.someProperty = param;
}
Monkey.prototype = Object.create(Monster.prototype);
Monkey.prototype.eatBanana = function(banana){ banana.eat() }
就这样。你可以在这里阅读更长的解释