методы constructor () и super () в JavaScript

Question

В настоящее время я учусь создавать приложения для iOS с использованием React Native. У меня есть некоторый опыт работы с Javascript и HTML (не так уж и много, я пришел из лет Swift и Objective-C). Я работаю над примером фрагмента кода о создании компонентов с сохранением состояния с помощью (а) инициализатора свойства или (б) метода конструктора. Вот мои фрагменты кода для обоих соответственно.

Я полностью понимаю способ инициализации свойства. Я запутался в том, как работает конструктор. Мой вопрос:

1. Что делают конструктор и супер методы? Я понимаю, что это не часть React Native, а сам Javascript.

2. Есть ли причина, по которой вы бы выбрали способ инициализации свойства вместо метода конструктора или наоборот?

Спасибо! Мухаммед

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

super требуется, если вы продолжаете учиться в другом классе.

Что касается constructor против field declaration, единственная разницачто объявление поля еще не является частью спецификации JS;React поддерживает это, хотя.

Answer 2

1. constructor() запускает новые экземпляры объекта, чтобы подготовить его. При расширении класса вызов функции super() предназначен для конструктора родительского класса. Вот почему вы не можете использовать this в любом месте, пока не вызовете super, ваш класс еще не полностью создан

2. Инициализация свойства вне конструктора - просто синтаксический сахар. Он новее JavaScript (иногда в течение последних нескольких лет), но функционально эквивалентен инициализации свойств в constructor()

Answer 3

super() используется для вызова родительской функции.

В своем коде вы написали super() в конструкторе, поэтому он запускает constructor() из React.Component.

Вы можете использовать super() не только в constructor, но и в других функциях.

Например, у родительского класса (React.Component в вашем коде) есть метод func1(), и он был определенкак следующий код.

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

Но вам нужно установить другое свойство c в func1() дочернего класса. В этом случае вам следует переопределить func1 в дочернем классе, и оно должно быть следующим:

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

Answer 4

Если вы исходите из Цели C:

• constructor это -(id)init;
• super() внутри constructor это [super init]

Это немного упрощено, но достаточно хорошо для фрагмента, который вы разместили. Недостающий фрагмент:

• Если вы возвращаете не примитивное значение из конструктора, оператор new не вернет значение new , но переданное;это можно сделать, переопределив +(id)alloc.

• . Вы также можете использовать super для доступа к другим методам родительского класса. Например, super.foo(42) будет [super foo:42].