VPF::Доступ к свойствам объекта из методов объекта

vlarry

Дата 14.1.2016, 11:19 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 153
Регистрация: 16.8.2009

Репутация: нет
Всего: нет

Добрый день, форумчане.
Помогите пожалуйста. Не могу обратиться к свойствам объекта из метода объекта. Есть объект:

Код


var Shape = 
{
    CIRCLE_SHAPE:     4,
    LINE_SHAPE:       5,
    POLYGON_SHAPE:    6,
    RECTANGLE_SHAPE:  7,
 
    // properties
    _map:   null,
    _id:    null,
    _layer: null,
    _shape: null,
    _type:  null,
    
    // methods
    create: function(map, type, latlngs)
    {
        if(this._shape == null)
        {
            this._map  = map;
            this._type = (type == 'circle')?this.CIRCLE_SHAPE:(type == 'polyline')?
                               this.LINE_SHAPE:(type == 'polygon')?this.POLYGON_SHAPE:
                               (type == 'rectangle')?this.RECTANGLE_SHAPE:null;
            
            switch(this._type)
            {
                case this.CIRCLE_SHAPE:
                    console.log('shape: circle');
                    console.log('latlngs: ' + latlngs);
                    this._shape = L.circle(latlngs, latlngs.distanceTo(latlngs));
                break;
                
                case this.LINE_SHAPE:
                    console.log('shape: polyline');
                break;
                
                case this.POLYGON_SHAPE:
                    console.log('shape: polygon');
                break;
                
                case this.RECTANGLE_SHAPE:
                    console.log('shape: rectangle');
                break;
            }
            
            if(this._shape != null)
            {
                console.log('shape is created');
                this._id = BEGIN_NUMBER_SHAPE++;
                
                this._layer = L.featureGroup();
                this._map.addLayer(this._layer);
                this._layer.addLayer(this._shape);
            }
            
            this._map.on('click', this._onMouseClick);
            this._map.on('mousemove', this._onMouseMove);
            this._map.on('contextmenu', this._onMouseContextMenu);
        }
    },
    
    _onMouseClick: function(e)
    {
        console.log('_onMouseClick');
        console.log('current number shape: ' + this._id);
        console.log('type shape: ' + this._type);
    },
    
    _onMouseMove: function(e)
    {
        console.log('_onMouseMove');
    },
    
    _onMouseContextMenu: function(e)
    {
        console.log('_onMouseContextMenu');
    }
}

Вывод при клике мыши:

_onMouseClick
current number shape: undefined
type shape: undefined

Почему я не могу получить значения этих свойств?
Спасибо.

Это сообщение отредактировал(а) vlarry - 14.1.2016, 17:18

Cheloveck

Дата 14.1.2016, 12:33 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Завсегдатай
Сообщений: 1578
Регистрация: 26.7.2008
Где: Тула

Репутация: нет
Всего: 32

Кури, что есть this в JavaScript`е. У тебя оно везде неверно используется!

--------------------

ksnk

Дата 14.1.2016, 12:34 (ссылка)

(нет голосов)

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 84
Всего: 386

vlarry, Дело в том, что Javascript - СЛИШКОМ простой язык smile

Чтобы правильно установить значение this при вызове - его нужно указать явно! xxx.yyy() - вот так, например , при вызове метода yyy объекта xxx переменная this будет указывать в xxx. А вот в конструкции

Код


var f=xxx.yyy; f();

исполнитель javascript тупо потеряет значение переменной this, так как это значение не будет указано явно.

Решений может быть несколько. Например - "замкнуть" значение нужного нам this в теле функции.

Код


   var that=this;
   this._map.on('click', function(e){ return that._onMouseClick(e)});
   this._map.on('mousemove', function(e){ return that._onMouseMove(e)});
   this._map.on('contextmenu', function(e){ return that._onMouseContextMenu(e)});
...

Неочевидность замыкания в JS тоже является следствием простоты языка smile

--------------------

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

Cheloveck

Дата 14.1.2016, 12:35 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Завсегдатай
Сообщений: 1578
Регистрация: 26.7.2008
Где: Тула

Репутация: нет
Всего: 32

Hint: внутри метода используй Shape.* вместо this.*

--------------------

vlarry

Дата 14.1.2016, 13:00 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 153
Регистрация: 16.8.2009

Репутация: нет
Всего: нет

Спасибо. Я так и сделал, через Shape. Появился такой вопрос: при обработке движения в методе Shape._onMouseMove
другие обработки (левый и правый клик мышки) перестают работать. Где может быть ошибка?

Вот обработка движения:

Код


_onMouseMove: function(e)
{
        if(Shape._isDrawing && Shape._shape != null)
        {
            if(Shape._type === Shape.CIRCLE_SHAPE)
            {
                var center = Shape._shape.getLatLng();
                Shape._shape.setRadius(center.distanceTo(e.latlng));
            }
        }
},

Для рисования использую библиотеку leaflet.
Спасибо.

Добавлено через 1 минуту и 14 секунд
Если закомментировать строку

Код


Shape._shape.setRadius(center.distanceTo(e.latlng));

то все отрабатывается, а иначе нет.

vlarry

Дата 14.1.2016, 17:18 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 153
Регистрация: 16.8.2009

Репутация: нет
Всего: нет

Все решил. Оказалось я использовал группу слоев L.featureGroup, и здесь присутствуют свои обработчики мышки, поэтому использовал простейшую группу слоев L.layerGroup и тогда все работает.

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Общие вопросы \| Следующая тема »