правильное использование JavaScript в этом

Question

Каким из следующих двух способов лучше назвать свойство Color и почему?Или это имеет значение?

lineSymbolizer:{strokeColor: this.Color, strokeWidth: 2, strokeOpacity: 0.7},

ИЛИ

lineSymbolizer:{strokeColor: LatLongLines.Color, strokeWidth: 2, strokeOpacity: 0.7},

Контекстный код:

var LatLongLines = {
    Graticule: null,
    Color: "#000000",
    Show: function () {
        this.Graticule.activate();
    },
    Hide: function () {
        this.Graticule.deactivate()
    },
    Initialize: function () {
        this.Graticule = new OpenLayers.Control.Graticule({
            numPoints: 2,
            labelled: true,
            lineSymbolizer:{strokeColor: this.Color, strokeWidth: 2, strokeOpacity: 0.7},
            labelSymbolizer:{strokeColor: this.Color, strokeWidth: 2, strokeOpacity: 0.7}
        });

        map.addControl(this.Graticule);
    }
};

Answer 1

Лично я бы, наверное, придерживался this.Color. Если вы сделаете это, то все будет работать, если вы когда-нибудь решите клонировать объект "LatLongLines".

Дао в this довольно сложное, но в этом случае это будет контекстный объект, связанный с вызовом функции "через" ссылку "LatLongLines". Если эти функции могут отклоняться от исходного объекта, то необходимо будет предпринять шаги для сохранения памяти объекта контекста, чтобы он был корректным при вызове, но это усложнение, не очевидное ни в одном из опубликованных вами сообщений.

Answer 2

В Javascript this всегда относится к элементу слева от точки. В этом примере вы можете увидеть одну и ту же функцию в двух разных this объектах.

myObject = {
    myFunction: function() {
        console.log(this); // in FF or WebKit
    }
};

myObject.myFunction(); // this = myObject

// Now we'll store a reference to our function and call
// it without the dot notation.
myFunc = myObject.myFunction;

myFunc(); // this = window

Я бы посоветовал использовать LatLongLines.Color, если вы не уверены в контексте this, чтобы обеспечить доступ к свойству Color LatlongLines.

Answer 3

Этот код не будет работать так, как вы ожидаете.

Ваш LatLongLines является простым объектом, но this только работает на instances.

 obj.method()
    ^----- DOT determines the value of this inside the called function
           If obj is an instance it will be used as 'this' otherwise
           'this' will default to the global 'window' object

Так что либо:

• Вы избавляетесь от всех this и вместо этого используете LatLongLines, чтобы получить один глобальный объект
• Или вы создаете LatLongLines экземпляр, таким образом, this будет работать, вы все равно можете выбрать синглтон (но вы знаете, что синглтон все еще является глобальным состоянием, а глобальное состояние - злом)

Если вам нужно создать новый экземпляр, сделайте что-то вроде этого:

function LatLongLines() {
    this.Graticule = null;
    this.Color = "#000000";
};


// Let's use prototypical inheritance, these functions are shared between all 
// LatLongLines instances, of course the this always refers the specific instance that was called
LatLongLines.prototype = {
    Show: function () {
        this.Graticule.activate();
    },

    Hide; function () {
        this.Graticule.deactivate()
    },

    Initialize: function () {
        this.Graticule = new OpenLayers.Control.Graticule({
            numPoints: 2,
            labelled: true,
            lineSymbolizer:{strokeColor: this.Color, strokeWidth: 2, strokeOpacity: 0.7},
            labelSymbolizer:{strokeColor: this.Color, strokeWidth: 2, strokeOpacity: 0.7}
        });

        // Maybe you want to pass map in? :)
        map.addControl(this.Graticule);
    }
};

var someLines = new LatLongLines();