陷入一段JavaScript有限状态机代码

时间:2018-02-16 14:12:14

标签: javascript this fsm

N = report.Sheets(sheetname).Cells(Rows.Count, "C").End(xlUp).row + 1

我用上面这段代码了解FSM模式,现在我陷入了改变状态的困境。任何人都可以教我,这是我的问题:

1,构造函数var c = console,d = document; window.onload = function(){ var Light = function() { this.currentState = State.off; this.lightSwitch = null; }; Light.prototype.run = function() { var _self = this; var lightSwitch = d.createElement('button'); var cvs = d.createElement('canvas'); cvs.width = '200'; cvs.height = '200'; cvs.style.backgroundColor = 'lightblue'; cvs.style.borderRadius = '50%'; cvs.style.display = 'block'; lightSwitch.innerHTML = 'turn on'; this.lightSwitch = d.body.appendChild(lightSwitch); this.cvs = d.body.appendChild(cvs); this.lightSwitch.onclick = function() { _self.currentState.btnPress.call(_self); }; }; var State = { off: { btnPress: function() { this.lightSwitch.innerHTML = 'turn off'; this.cvs.style.display = 'none'; this.currentState = State.on; } }, on: { btnPress: function() { this.lightSwitch.innerHTML = 'turn on'; this.cvs.style.display = 'block'; this.currentState = State.off; } } }; var light = new Light(); light.run(); }; 中的this关键字是否指向与Light中的this相同的上下文?

2,

时会发生什么
var _self = this;

执行,当时哪个上下文是_self的阀门?为什么不this.lightSwitch.onclick = function() { _self.currentState.btnPress.call(_self); }; ,因为self.btnPress.currentState.call(_self)似乎是currentState的属性(或者可能不是btnPress)?

1 个答案:

答案 0 :(得分:2)

  

构造函数this中的Light关键字是否指向与this中的var _self = this;相同的上下文?

常见用法,是的。与许多其他语言不同,Javascript中的this非常动态。但是当你像这样做OO时(或使用ES2015 class语法)this可以正常工作。引入_self的原因在于此函数内部:

this.lightSwitch.onclick = function() {
    _self.currentState.btnPress.call(_self);
};

this会引用DOM元素lightSwitch,您想要引用Light实例。在_self中保存对它的引用是一种常见的技术。

  

为什么不用self.btnPress.currentState.call(_self),因为看起来currentState是btnPress的属性(或者可能不是“属性”)?

当您开始时,在构造函数中,currentState设置为State.offState.off有一个btnPress属性链接到一个函数。调用currentState.call(_self)this属性设置为_self,这是Light对象本身。这样,btnPress函数就像Light对象的方法一样。

您的建议没有意义,因为_selfLight对象)没有btnPress属性。它具有currentState属性,该属性是具有btnPress属性的对象。