Как работает синтаксис «класс» в JavaScript?

Question

Я работаю над созданием службы API для собственного приложения реагирования, и мне любопытно, в чем разница между функцией, которая устанавливает экземпляры, а затем возвращает объект с замыканиями вокруг функций API, например:

export default AuthApiService = (bearerToken) => {

    const instance = axios.create({
            baseURL: `http://${BASE_URL}`,
            timeout: 5000,
            headers: {
                'Content-Type': 'application/json',
                 Authorization: `Bearer ${bearerToken}`
            }
        })

    const signup = async (email, password) => {
        try {
            const response = await instance.post(`/users`, {
                email,
                password
            })
            return response.data
        } catch (err) {
            console.log('error in signup api call', err, err.response)
            throw err
        }
    }

    const facebookLogin = async () => {
        try {
        } catch (err) {}
    }

    return {
        signup,
        facebookLogin
    }
}

и класс, который создает объект с синтаксисом конструктора и имеет прямой доступ к методам объекта следующим образом:

export default class AuthApiService {
    constructor(bearerToken) {
        this.instance = axios.create({
            baseURL: `http://${BASE_URL}`,
            timeout: 5000,
            headers: {
                'Content-Type': 'application/json',
                 Authorization: `Bearer ${bearerToken}`
            }
        })
    }

    signup = async (email, password) => {
        try {
            const response = await this.instance.post(`/users`, {
                email,
                password
            })
            return response.data
        } catch(err) {
            console.log('error in signup api call', err, err.response)
            throw err
        }
    }

    facebookLogin = async () => {
        try {

        } catch(err) {

        }
    }
}

В синтаксисе класса javascript в основном просто функция, которая создает объект сдругой прототип?

Также, если бы вы могли высказать мнение о том, какой подход "лучше"?

Спасибо

Answer 1

Как и любой другой язык программирования, классы по сути следуют объектно-ориентированному подходу. Там действительно не так много различий, кроме синтаксиса и того, как он понимается.

В частности, в JavaScript ключевым отличием является использование функции constructor для создания объекта из класса. Этот конструктор впоследствии можно отследить, тогда как с обычной функцией этого не может быть. У JavaScript технически нет даже «классов». Синтаксис класса был добавлен в ES6, и это в значительной степени стандартная функция под капотом.

Относительно того, какой подход лучше, это действительно ваше дело. На мой взгляд, чем меньше, тем лучше, а простота и удобочитаемость - это самое важное в программировании. Я бы ознакомился с обоими подходами, особенно если вы планируете работать с React из-за эпохи предварительных хуков и текущей тенденции хуков.

Answer 2

Я бы порекомендовал держаться подальше от классов, если это вообще возможно (в Javascript), посмотрите это видео на фабричных функциях с забавной забавной функцией , чтобы узнать, почему фабричные функции обычно лучше. Class.prototype может быть сложным, а ключевое слово "this" в javascript может быть сложным без правильной привязки вызовов методов с помощью .bind (this). React даже заставил вас связать метод в классе.

Это не означает, что классы являются неправильными в любом случае, просто они могут быть излишне сложными в javascript.