Javascript 在另一个属性内创建对变量的引用

我正在将vars对象中的变量evtID传递到createEvent方法中的click事件中。我必须使用cal.vars.evtID来引用它，我想知道是否还有其他方法可以将它作为引用传递给另一个变量，以缩短键入量

基本上，我不想为我在vars对象中创建的每个变量键入cal.vars.variable name

var cal = {    

    vars: {
        evtID: 0 // here
    },

    createEvent: function(){

        $('.square').on('click',function(){     
            var array = [
                '<div class="event" id="event' + cal.vars.evtID + '">', // and here
                    '<div class="close"></div>',
                '</div>'
            ];

            $('.event-container').append(array.join(""));
        cal.vars.id++;

        });
    },

    init: function(){
        this.createEvent();
    }
}

window.onload = function(){
    cal.init();
}

var-cal={
变量：{
evtID:0//此处
},
createEvent:function（）{
$（'.square'）。在（'click'，function（）{
变量数组=[
''，//这里呢
'',
''
];
$（'.event container'）.append（array.join（“”））；
cal.vars.id++；
});
},
init:function（）{
这个.createEvent（）；
}
}
window.onload=函数（）{
cal.init（）；
}

你不能把它缩短

在您的代码

中，单击处理程序会重新分配此
，但您可以使用它访问当前对象：

var cal = {    
    vars: {
        evtID: 0 // here
    },
    createEvent: function(){
        this.vars.evtID;
    }
}

如果要在处理程序中使用它，则必须存储对它的引用：

createEvent: function(){
    var that = this;
    $('.square').on('click',function(){     
         that.vars.evtID;
    }  
}

或者直接存储对
变量的引用
：

createEvent: function(){
    var vars = this.vars;
    var evtID = vars.evtID;
    $('.square').on('click',function(){     
         vars.evtID;
         evtID;
    }  
}

在第二种情况下，
evtID
变量将包含数字的值，因此，如果更改它，则cal.vars.evtID的值不会更改。
这似乎已经是最小值了。如果需要，您可以将
cal.vars
或
cal.vars.evtID
分配给本地变量。虽然使用
不会使其变短，但为了可读性和可维护性，更好的解决方案通常是：不将匿名函数传递给click处理程序，而是在外部定义它，并使用例如
.on（'click'，$.proxy）传递它（this.createElement，this））
或使用polyfill for
bind
来支持较旧的浏览器，并使用
.on（'click'，this.createElement.bind（this））
。