Javascript 如何在子类主体中声明时访问和扩展ES7父类属性？

考虑到这门课

class BasePage extends Component {
  state = {
    locale: 'en'
  };

  render() {
    return (<div>{ this.state.locale }</div>);
  }
}

显然，

super.state

不起作用，

BasePage.prototype.state

也不存在

---

这可能吗？

我将从一个简单的JS角度来回答这个问题（但如果使用React，同样的概念也适用于React）

为了让您使用base的道具，您需要在子构造函数中这样做：

class BasePage {
  state = {
    locale: 'en'
  }; 
}

class FooPage extends BasePage {
  constructor() {
    super();  // can't access this props without calling super first

    // this.state refers to super's state prop. We simply extend it using Object.assign.
    this.state = Object.assign(this.state, {
      foo: 'Hello'
    });
  }  

  render() {
    const { locale, foo } = this.state;
    console.log({ locale, foo });  // prints { locale: 'en', foo: 'Hello' }
  }
}

演示：

关于React的注意事项：由于React构建在普通JS之上，因此相同的概念（即调用

super

首先也适用于此）

或者，如果您不喜欢构造函数方法，可以通过getter实现类似的效果：

class BasePage {
  get state()  {
    return { locale: 'en' }
  } 
}

class FooPage extends BasePage {
  get state()  {
    return Object.assign(super.state, {
      foo: 'Hello'
    })
  }  

  render() {
    const { locale, foo } = this.state;
    console.log({ locale, foo });  // prints { locale: 'en', foo: 'Hello' }
  }
}

---

演示：

谢谢。实际上，我最后做了第一个例子。

class BasePage {
  get state()  {
    return { locale: 'en' }
  } 
}

class FooPage extends BasePage {
  get state()  {
    return Object.assign(super.state, {
      foo: 'Hello'
    })
  }  

  render() {
    const { locale, foo } = this.state;
    console.log({ locale, foo });  // prints { locale: 'en', foo: 'Hello' }
  }
}