正确的javascript用法“this”

时间:2010-12-14 15:25:43

标签: javascript json

以下两种方法中的哪一种更适合调用Color属性?为什么?或者它有所作为?

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

OR

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);
    }
};

3 个答案:

答案 0 :(得分:1)

就我个人而言,我可能会坚持使用this.Color。如果你这样做,那么如果你有一天决定克隆“LatLongLines”对象,事情就会继续发挥作用。

this的道是非常复杂的,但在这种情况下,它将成为从“通过”“LatLongLines”引用调用函数的上下文对象。如果这些函数可能偏离原始对象,则必须采取步骤来保留上下文对象的内存,以便在调用时它是正确的,但这是一个在您发布的任何内容中都不明显的复杂情况。

答案 1 :(得分:0)

此代码无法按预期工作。

您的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();

答案 2 :(得分:0)

在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的{​​{1}}属性。