一尘不染

如何从javascript中的类继承?

javascript

在PHP / Java中,可以做到:

class Sub extends Base
{
}

并且,Super类的所有公共/受保护的方法,属性,字段等都会自动成为Sub类的一部分,如有必要,可以重写这些类。

Javascript中的等效功能是什么?


阅读 292

收藏
2020-05-01

共1个答案

一尘不染

我已经更改了现在的操作方式,我尝试避免使用构造函数和它们的prototype属性,但是我从2010年起的旧答案仍然是最底层的。我现在更喜欢Object.create()Object.create适用于所有现代浏览器。

我应该注意,这Object.create通常比使用函数构造函数慢得多new

//The prototype is just an object when you use `Object.create()`
var Base = {};

//This is how you create an instance:
var baseInstance = Object.create(Base);

//If you want to inherit from "Base":
var subInstance = Object.create(Object.create(Base));

//Detect if subInstance is an instance of Base:
console.log(Base.isPrototypeOf(subInstance)); //True

使用Object.create的最大好处之一就是能够传递defineProperties参数,该参数使您可以有效控制如何访问和枚举类的属性,并且我还使用函数来创建实例,这些函数可以用作构造函数,因为您可以在最后进行初始化,而不仅仅是返回实例。

var Base = {};

function createBase() {
  return Object.create(Base, {
    doSomething: {
       value: function () {
         console.log("Doing something");
       },
    },
  });
}

var Sub = createBase();

function createSub() {
  return Object.create(Sub, {
    doSomethingElse: {
      value: function () {
        console.log("Doing something else");
      },
    },
  }); 
}

var subInstance = createSub();
subInstance.doSomething(); //Logs "Doing something"
subInstance.doSomethingElse(); //Logs "Doing something else"
console.log(Base.isPrototypeOf(subInstance)); //Logs "true"
console.log(Sub.isPrototypeOf(subInstance)); //Logs "true

这是我2010年的原始答案:

function Base ( ) {
  this.color = "blue";
}

function Sub ( ) {

}
Sub.prototype = new Base( );
Sub.prototype.showColor = function ( ) {
 console.log( this.color );
}

var instance = new Sub ( );
instance.showColor( ); //"blue"
2020-05-01