Вызов объекта JavaScript не работает

Question

У меня есть определенный объект, созданный так:

var classes = {

        login: {
            form: {
                wrapper:        'content-login',
                cls:            'login-form',
                fields:         'login-fields'
            },
            username: {
                wrapper:        'username-wrapper',
                label:          'user-img',
                input:          'username'
            },
            password: {
                wrapper:        'password-wrapper',
                label:          'pass-img',
                input:          'password'
            },
            button: {
                wrapper:        'login-wrapper',
                proceed:        'login'
            },
            toogle: {
                trigger: {
                    wrapper:    'toogle-button',
                    button:     'toogle'
                },
                buttons: {
                    wrapper:    'toogle-buttons',
                    twitter:    'twitter-login',
                    register:   'register',
                    recover:    'recover-password'
                }
            }   
        },

        register: {
            form: {
                wrapper:        'content-register',
                cls:            'register-form',
                fields:         'register-fields'
            },
            username: {
                wrapper:        'username-wrapper',
                label:          'username-label',
                input:          'username'
            },
            email: {
                wrapper:        'email-wrapper',
                label:          'email-label',
                input:          'email' 
            },
            password: {
                wrapper:        'password-wrapper',
                label:          'password-label',
                input:          'password'  
            },
            confirm: {
                wrapper:        'confirm-wrapper',
                label:          'confirm-label',
                input:          'confirm'
            },
            captcha: {
                wrapper:        'captcha-wrapper',
                label:          'captcha-label',
                input:          'captcha'
            },
            button: {
                wrapper:        'register-wrapper',
                message:        'message-handling',
                proceed:        'register'
            },
            back: {
                wrapper:        'back-button',
                button:         'back'
            }
        },

        recover: {
            form: {
                wrapper:        'content-recover',
                cls:            'recover-form',
                fields:         'recover-fields'
            },
            email: {
                wrapper:        'email-wrapper',
                label:          'email-label',
                input:          'email' 
            },
            button: {
                wrapper:        'recover-wrapper',
                proceed:        'recover'
            },
            back: {
                wrapper:        'back-button',
                button:         'back'
            }
        },

        reset: {
            form: {
                wrapper:        'content-reset',
                cls:            'reset-form',
                fields:         'reset-fields'
            },
            email: {
                wrapper:        'email-wrapper',
                label:          'email-label',
                input:          'email'
            },
            authcode: {
                wrapper:        'authcode-wrapper',
                label:          'authcode-label',
                input:          'authcode'  
            },
            password: {
                wrapper:        'password-wrapper',
                label:          'password-label',
                input:          'password'  
            },
            confirm: {
                wrapper:        'confirm-wrapper',
                label:          'confirm-label',
                input:          'confirm'
            },
            button: {
                wrapper:        'proceed-wrapper',
                message:        'message-handling',
                proceed:        'proceed'
            },
            back: {
                wrapper:        'back-button',
                button:         'back'
            }
        },

        success: {
            wrapper:            'after-login',
            message:            'row-one',
            buttons: {
                wrapper:        'row-two',
                cancel:         'cancel',
                proceed:        'continue'  
            }
        },

        lockdown: {
            wrapper:            'system-lockdown',
            message:            'row-one',
            buttons: {
                wrapper:        'row-two',
                back:           'back'
            }
        }

    }

И я пытаюсь вызвать определенный ключ вот так:

classes[login.form.wrapper];

Но это не работаетКстати, только так:

classes.login.form.wrapper;

Или вот так:

classes['login'];

Может кто-нибудь сказать мне, почему это не работает так:

classes[login.form.wrapper];

И могу ли я заставить это работать так?Потому что я где-то видел этот метод, но не знаю, является ли он тем же самым, что и у меня.

Answer 1

Используйте это:

classes['login']['form']['wrapper']

Код, который вы пытаетесь вызвать, недействителен:

classes[login.form.wrapper];

Вы имеете в виду переменную login, которая не определена.

Answer 2

Ответ в значительной степени с вашим описанием.

Что вам в основном нужно, так это получить доступ к определенному атрибуту, вложенному атрибуту в вашем случае.

classes.login.form.wrapper;

Это довольно интуитивно понятно, что логин находится внутри классов, форма внутри логина и оболочка внутри формы.

JavaScript также позволяет использовать имена свойств в качестве индексов, например:

classes['login'];

Однако, с

classes[login.form.wrapper];

Это фактически означает поиск атрибута classes, имя которого хранится в

login.form.wrapper

ясно, login.form.wrapper, не существует само по себе.

Answer 3

classes[login.form.wrapper]; ищет объект с именем login в любой области, в которой запускается строка кода. Этого не будет найдено, поскольку login является свойством classes.Поэтому это вызовет ReferenceError, потому что login не определено.

Если login было определено и имело свойство с именем form, которое, в свою очередь, имело свойство с именем wrapper, значение этогобудет использоваться свойство:

var login = {
        form: {
            wrapper: 'login'
        }
    };
console.log(classes[login.form.wrapper]); //Now this would return classes.login

classes.login.form.wrapper; работает, поскольку classes является объектом со свойством с именем login.

classes['login']; эквивалентно classes.login.Вы можете написать classes['login']['form']['wrapper'] как эквивалент classes.login.form.wrapper.

Answer 4

Вы не можете вызывать такой объект

классы [login.form.wrapper];

поскольку логин является ключом вашего класса объектов, он будет работать следующим образом

classes ['login'] ИЛИ classes.login

Ваш ключ не должен быть таким: классы [login.form.wrapper];

Answer 5

когда пишешь

classes[login.form.wrapper];

ожидается вход в систему объекта. поскольку login является частью классов, вы должны указать весь «путь» к классу.