Javascript 中的 constructor() 和 super() 方法

Question

我目前正在学习如何使用 React Native 构建 iOS 应用程序。我在 Javascript 和 HTML 方面有一些经验（不是很多，我直接来自多年的 Swift 和 Objective-C）。我正在研究有关使用 (a) 属性初始化程序或 (b) 构造函数方法创建有状态组件的示例代码片段。这是我分别针对两者的代码片段。

我完全理解属性初始化方法。我对构造函数的工作方式感到困惑。我的问题是：

构造函数和超级方法有什么作用？我知道这些不是 React Native 的一部分，而是 Javascript 本身的一部分。
你会选择属性初始化方法而不是构造方法，反之亦然吗？

谢谢！穆罕默德

// Property Initiliazer Way of Doing It
class PropertyInitializerStatefulComponent extends React.Component {

    // 1. State is initialized when a component is created as demonstrated below
    // 2. Once initialized, it is avalable as a this.state.
    state = {

        year: 2019,
        name: 'Johnny Appleseed',
        colors: ['blue']

    }

    render() {

        // Implementation of Point 2
        return(
            <View>
                <Text>My name is  {this.state.name}</Text>
                <Text>The year is: {this.state.year}</Text>
                <Text>My favorite colors are: {this.state.colors[0]}</Text>
            </View>
        )
    }
}

// Making a stateful component using the constructor method...

class ConstructorStatefulComponent extends React.Component {

    // ??
    constructor() {

        // ??
        super() 
        this.state = {

            year: 2019,
            name: 'Johnny Appleseed',
            colors: ['blue']

        }
    }

    render() {

        // Implementation of Point 2
        return(
            <View>
                <Text>My name is  {this.state.name}</Text>
                <Text>The year is: {this.state.year}</Text>
                <Text>My favorite colors are: {this.state.colors[0]}</Text>
            </View>
        )
    }

}

Answer 1

如果您来自 Objective C:

constructor 是 -(id)init;
super() 在 constructor 里面是 [super init]

这有点简化，但对于您发布的片段来说已经足够好了。缺少的部分是：

如果您 return 来自构造函数的非原始值，new 运算符将不会 return 一个 new 值但是传递的值；你可以通过覆盖 +(id)alloc.
您还可以使用 super 访问父 class 上的其他方法。例如，super.foo(42) 将是 [super foo:42].

Answer 2

constructor() 在对象的新实例化上运行，以准备它。扩展 class 时，super() 函数调用用于父 class 的构造函数。这就是为什么你不能在任何地方使用 this 直到你调用 super，你的 class 还没有完全实例化
属性构造函数之外的初始化只是语法糖。它比 JavaScript 更新（最近几年的某个时候），但它在功能上等同于 constructor()

Answer 3

super()用于调用parent的函数。

在您的代码中，您在构造函数中编写了 super()，因此它运行 React.Component 的 constructor()。

您不仅可以在 constructor 中使用 super()，还可以在其他函数中使用。

例如，parent class（您的代码中的React.Component）有一个方法func1()，它的定义如下代码。

function func1() {
  this.a = 0;
  this.b = 0;
}

但是你需要在childclass的func1()中再设置一个属性c。在这种情况下，您应该重新定义 child class 中的 func1 并且它应该是以下内容。

function func1() {
  super.func1(); // it will set a and b as 0
  this.c = 0;
}

Answer 4

super 如果您要从另一个 class.

扩展，则需要

super

至于 constructor 与 field declaration，唯一的区别是字段声明还不是 JS 规范的一部分；不过 React 支持它。

Javascript 中的 constructor() 和 super() 方法

constructor() and super() methods in Javascript

javascript

react-native

constructor

super