如何从javascript中的类继承？ [英] How to inherit from a class in javascript?

问题描述

在PHP / Java中可以做到：

  class Sub extends Base 
 {
} 
  

自动所有超级类的公共/受保护方法，属性，字段等都成为其中的一部分可以在必要时覆盖的子类。

Javascript中的等价物是什么？

解决方案

我已经改变了我现在这样做的方法，我尽量避免使用构造函数及其 prototype 属性，但是我在2010年的旧回答仍然是底部。我现在更喜欢 Object.create（）。所有现代浏览器都提供 Object.create 。

我应该注意对象。创建通常是慢得多而不是使用函数构造函数 new 。

  //当你使用`Object.create（）`
 var Base = {}时，原型只是一个对象; 
 
 //这是你创建实例的方式：
 var baseInstance = Object.create（Base）; 
 
 //如果你想继承Base：
 var subInstance = Object.create（Object.create（Base））; 
 
 //检测subInstance是否是Base的实例：
 console.log（Base.isPrototypeOf（subInstance））; //真
  

defineProperties 参数，它可以让您显着控制类的属性可以访问和枚举，我也使用函数来创建实例，它们在某种程度上用作构造函数，因为你可以在最后进行初始化而不是只返回实例。

  var Base = {}; 
 
函数createBase（）{
返回Object.create（Base，{
 doSomething：{
 value：function（）{
 console.log（ 做某事）; 
}，
}，
}）; 
} 
 
 var Sub = createBase（）; 
 
函数createSub（）{
返回Object.create（Sub，{
 doSomethingElse：{
 value：function（）{
 console.log（ 做其他事情）; 
}，
}，
}）; 
} 
 
 var subInstance = createSub（）; 
 subInstance.doSomething（）; //记录做某事
 subInstance.doSomethingElse（）; //记录做其他事情
 console.log（Base.isPrototypeOf（subInstance））; // Logstrue
 console.log（Sub.isPrototypeOf（subInstance））; //记录true 
  

jsfiddle

这是我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
  

In PHP/Java one can do:

class Sub extends Base
{
}

And automatically all public/protected methods, properties, fields, etc of the Super class become a part of the Sub class which can be overridden if necessary.

What's the equivalent for that in Javascript?

解决方案

I have changed how I do this now, I try to avoid using constructor functions and their prototype property, but my old answer from 2010 is still at the bottom. I now prefer Object.create(). Object.create is available in all modern browsers.

I should note that Object.create is usually much slower than using new with a function constructor.

//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

jsfiddle

One of the big benefits of using Object.create is being able to pass in a defineProperties argument, which gives you significant control over how properties on the class can be accessed and enumerated over, and I also use functions to create instances, these serve as constructors in a way, as you can do initialization at the end instead of just returning the instance.

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

jsfiddle

This is my original answer from 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"

这篇关于如何从javascript中的类继承？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！