为了账号安全,请及时绑定邮箱和手机立即绑定

如何从javascript中的类继承?

/ 猿问

如何从javascript中的类继承?

烧仙草VB 2019-09-18 14:56:26

在PHP / Java中可以做到:


class Sub extends Base

{

}

并且Super类的所有公共/受保护方法,属性,字段等自动成为Sub类的一部分,必要时可以覆盖它。


Javascript中的等价物是什么?


查看完整描述

3 回答

?
交互式爱情

我现在已经改变了我的方法,我尽量避免使用构造函数及其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

的jsfiddle


使用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

的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"


查看完整回答
反对 回复 2019-09-18
?
汪汪一只猫

在JavaScript中,您没有类,但您可以通过多种方式获得继承和行为重用:


伪经典继承(通过原型设计):


function Super () {

  this.member1 = 'superMember1';

}

Super.prototype.member2 = 'superMember2';


function Sub() {

  this.member3 = 'subMember3';

  //...

}

Sub.prototype = new Super();

应与new运营商一起使用:


var subInstance = new Sub();

函数应用程序或“构造函数链接”:


function Super () {

  this.member1 = 'superMember1';

  this.member2 = 'superMember2';

}



function Sub() {

  Super.apply(this, arguments);

  this.member3 = 'subMember3';

}

这种方法也应该与new运营商一起使用:


var subInstance = new Sub();

与第一个示例的不同之处在于,当我们apply将Super构造函数添加到this对象内部时Sub,它会直接在新实例this上添加分配给on 的属性Super,例如subInstance包含属性member1和member2直接(subInstance.hasOwnProperty('member1') == true;)。


在第一个示例中,这些属性是通过原型链到达的,它们存在于内部[[Prototype]]对象上。


寄生继承或电源构造器:


function createSuper() {

  var obj = {

    member1: 'superMember1',

    member2: 'superMember2'

  };


  return obj;

}


function createSub() {

  var obj = createSuper();

  obj.member3 = 'subMember3';

  return obj;

}

这种方法基本上基于“对象扩充”,您不需要使用new运算符,如您所见,this不涉及关键字。


var subInstance = createSub();

ECMAScript第5版。Object.create方法:


// Check if native implementation available

if (typeof Object.create !== 'function') {

  Object.create = function (o) {

    function F() {}  // empty constructor

    F.prototype = o; // set base object as prototype

    return new F();  // return empty object with right [[Prototype]]

  };

}


var superInstance = {

  member1: 'superMember1',

  member2: 'superMember2'

};


var subInstance = Object.create(superInstance);

subInstance.member3 = 'subMember3';

上述方法是Crockford提出的原型继承技术。


对象实例继承自其他对象实例,就是这样。


这种技术可以比简单的“对象增强”更好,因为继承属性不通过所有的新对象实例复制,由于基座对象被设定为[[Prototype]]所述的扩展对象,在上述例子中subInstance包含物理上只有member3属性。


查看完整回答
反对 回复 2019-09-18
?
眼眸繁星

适用于2018年或之后访问此页面的用户

使用最新版本的ECMAScript标准(ES6),您可以使用de keyworkclass


请注意,类定义不是常规的,object因此类成员之间没有逗号。要创建类的实例,必须使用new关键字。要从基类继承,请使用extends:


class Vehicle {

   constructor(name) {

      this.name = name;

      this.kind = 'vehicle';

   }

   getName() {

      return this.name;

   }   

}


// Create an instance

var myVehicle = new Vehicle('rocky');

myVehicle.getName(); // => 'rocky'

要从基类继承,请使用extends:


class Car extends Vehicle {

   constructor(name) {

      super(name);

      this.kind = 'car'

   }

}


var myCar = new Car('bumpy');


myCar.getName(); // => 'bumpy'

myCar instanceof Car; // => true

myCar instanceof Vehicle; // => true

从派生类中,您可以使用super从任何构造函数或方法访问其基类:


要调用父构造函数,请使用 super().

要呼叫其他成员,请使用,例如,super.getName()。

使用类还有更多功能。如果你想深入研究这个主题,我推荐Axel Rauschmayer博士的“ ECMAScript 6中的课程 ”。*


查看完整回答
反对 回复 2019-09-18

添加回答

回复

举报

0/150
提交
取消
意见反馈 邀请有奖 帮助中心 APP下载
官方微信