Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > JavaScript: для новичков > вызов строчного литерала как метода. jQuery

Автор: pasha4ur 13.10.2014, 19:46

Всем привет

Не пойму, почему работает у автора эта строка:

function () { $this[config.effect](config.speed);}

config.effect - это строка и туда придет строчный литерал.

Код


(function() {
    
$('html').addClass('js');

var contactForm = {

    container: $('#contact'),

    config: {
        effect: 'slideToggle',
        speed: 500
    },

    init: function(config) {
        $.extend(this.config, config);

        $('<button></button>', {
            text: 'Contact Me'
        })
            .insertAfter( 'article:first' )
            .on( 'click', this.show );
    },

    show: function() {
        var cf = contactForm,
            container = cf.container,
            config = cf.config;

        if ( container.is(':hidden') ) {
            contactForm.close.call(container);
            container[config.effect](config.speed);
        }
    },

    close: function() {
        var $this = $(this), // #contact
            config = contactForm.config;

        if ( $this.find('span.close').length ) return;

        $('<span class=close>X</span>')
            .prependTo(this)
            .on('click', function() {
                // this = span
                $this[config.effect](config.speed);
            })
    }
};

contactForm.init({
    // effect: 'fadeToggle',
    speed: 300
});

})();

Автор: ksnk 14.10.2014, 11:28

А что удивляет? Все сущности в JS - объекты. К объектам есть литеральный доступ, через точку и "массивный", через "вырезку". Так оно устроено.

Автор: pasha4ur 14.10.2014, 16:57

Это я знаю.

проблема в том, что в $this[config.effect] лежит строка 'slideToggle'. Как ее можно вызывать? Это все равно, что написать

Код


var v = 'slideToggle'(500);

моя не понимать этого

Неужели там eval() парсит код и вызывает анимационный метод по ссылке?

Автор: ksnk 17.10.2014, 09:33

pasha4ur, в JS у всех полей объектов есть имена. Фактически - ассоциативный массив. И да, JS - это интерпретатор он весь состоит из одного большого евала smile

Автор: sQu1rr 17.10.2014, 13:15

Цитата(pasha4ur @ 14.10.2014, 16:57

)

Это все равно, что написать

Нет, это всеравно что написать

Код


$this.slideToggle(500);

Потому что как я понимаю не

Цитата(pasha4ur @ 14.10.2014, 16:57

)

в $this[config.effect] лежит строка 'slideToggle'

а в config.effect лежит строка 'slideToggle'

Автор: pasha4ur 19.10.2014, 00:07

ksnk про объекты я знаю. Но все равно не пойму, как он так строку использует, как функцию.

Цитата(sQu1rr @ 17.10.2014, 13:15

)

Потому что как я понимаю не

там он лежит.

все равно, что написать $this.config.effect.

Автор: _zorn_ 20.10.2014, 02:28

Цитата(pasha4ur @ 19.10.2014, 08:07

)

там он лежит.

все равно, что написать $this.config.effect.

Нет

Код


...
var contactForm = {
...
    config: {
        effect: 'slideToggle',
        speed: 500
    },
...
            config = contactForm.config;
...
                $this[config.effect](config.speed);
...

$this[config.effect](config.speed); === $this['slideToggle'](config.speed); === $this.slideToggle(config.speed);

Автор: pasha4ur 20.10.2014, 19:35

А почему нельзя сделать так?

$this.config.effect(config.speed)

"$this['slideToggle'](config.speed);"
В объекте contactForm нет же свойства с названием 'slideToggle'

Автор: sQu1rr 20.10.2014, 20:03

Цитата(pasha4ur @ 20.10.2014, 19:35

)

А почему нельзя сделать так?

Цитата(pasha4ur @ 19.10.2014, 00:07

)

про объекты я знаю.

Нельзя потому что "точка" это доступ к полям объекта. $this.config.effect - это дуступ к полю effect переменной config внутри объекта $this. Выполняется слева на право.
$this = { config: { effect: 'asdf' }, asdf: true };
$this.config.effect // asdf
$this[$this.config.effect] // true, == $this['asdf'] == $this.asdf

Цитата(pasha4ur @ 20.10.2014, 19:35

)

В объекте contactForm нет же свойства с названием 'slideToggle'

Ну так $this это же не объект contactForm smile

Автор: _zorn_ 21.10.2014, 07:04

Цитата(pasha4ur @ 21.10.2014, 03:35

)

А почему нельзя сделать так?

$this.config.effect(config.speed)

$this.config.effect - не метод (функция), а просто строка. Ее нельзя вызвать.
Если только таким извратом

Код


eval('$this.'+$this.config.effect+'('+config.speed+')');

но зачем ?

Цитата(pasha4ur @ 21.10.2014, 03:35

)

В объекте contactForm нет же свойства с названием 'slideToggle'

Код

var $this = $(this)

Теперь $this - это jQuery обертка contactForm у которой есть метод slideToggle.

Автор: pasha4ur 20.1.2015, 20:46

Получается, что по этому текстовому ключу ['slideToggle'] мы вызываем метод в объекте обертке $(this).

Забыл про строку var $this = $(this)

Автор: sQu1rr 21.1.2015, 20:04

Цитата(pasha4ur @ 20.1.2015, 17:46

)

Получается, что по этому текстовому ключу ['slideToggle'] мы вызываем метод в объекте обертке $(this).

Вприниципе да. По этому текстовому ключу мы получаем доступ к методу который и вызываем. Метод есть под этим ключем потому что обертка $(this). Все верно, да
2 месяца - это довольно долго что бы это понять smile

Автор: pasha4ur 22.1.2015, 23:58

Я просто случайно вспомнил, решил зайти и разобраться. Нужно было мне внимательнее код читать. Спасибо всем за терпение.

Я это время не занимался js (он мне и не особо понравился из-за своей кривости + книга нудная была (подробное руководство)). Прочитал книгу по WP, немного поэкспериментировал с убунту(вернулся в виндовс). Сейчас вот начал читать книгу по PHP, от которого меня все стратсно отговаривают в сторону руби, питона и джавы (только вакансий джунов по ним вообще в моей области нет).