【问题标题】:Use prototypical inheritance with ES6 [duplicate]在 ES6 中使用原型继承
【发布时间】:2018-02-01 15:11:18
【问题描述】:

我们如何在 ES6 中使用 class 关键字来像在 ES5 中那样动态添加方法?

https://jsfiddle.net/user1212/7c57eou3/

class Person{
  constructor(name){
    this.name = name;
  }

  getName(){
    return this.name;
  }

  setName(name){
    this.name = name;
  }
}


function Company(cName){
  this.cName = cName;
}

Company.prototype.getName = function(){
    return this.cName;
}

Person 类定义后如何添加新方法?

【问题讨论】:

  • 完全中与 ES5 中的方式相同。
  • 就像@Bergi 说的一样,这是因为Javascript中的类不是新类型,只是普通功能原型的装饰器。
  • 事后向原型添加方法的用例是什么?当您不能在类定义时添加方法时,我想不出任何理由自己这样做。
  • @jfriend00 添加用户定义的jQuery方法就是一个例子。
  • @Barmar 但是 jQuery 的集合不使用 class 语法,是吗?

标签: javascript inheritance ecmascript-6


【解决方案1】:

您不使用class 关键字来添加更多方法。就像在 ES5 中一样,您只需将它们分配给原型对象:

class Person { … }
…
Object.assign(Person.prototype, { // Object.assign provides a neater syntax
    logName() {                   // but really is the same as Person.prototype.logName = …
        console.log(this.name);
    },
    alertName() {
        alert(this.name);
    }
});

【讨论】:

  • 只是不要使用super.foo props :P
  • @loganfsmyth 甚至可以通过使用Object.setPrototypeOf 使super “工作”,但我不推荐它:-)
【解决方案2】:

由于其他人已经回答了您的具体问题,您可以使用 prototype

但是提醒一下,如果你正在修改 class 的原型以添加方法,也许你想使用 extends 语法并创建一个“子类”,所以你总是使用相同的类逻辑而不接触原型.

对于大多数来自其他语言的程序员来说很难理解prototype-style classes,所以如果你可以使用 ES6 only 典型的类风格,我会说去吧。像这样:

class Hello {
  constructor(name) {
    this.name = name;
  }

  hello() {
    return 'Hello ' + this.name + '!';
  }

  static sayHelloAll() {
    return 'Hello everyone!';
  }
}

class HelloWorld extends Hello {
  constructor() {
    super('World');
  }

  echo() {
    alert(super.hello());
  }
}

var hw = new HelloWorld();
hw.echo();

alert(Hello.sayHelloAll());

taken from here

【讨论】:

  • 如果你不了解原型的工作原理,我不推荐使用 JS,更不用说classes了……
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2015-07-07
  • 1970-01-01
相关资源
最近更新 更多