Question

你可以告诉我为什么按钮点击不会出现在打字稿中吗？

这是我的代码 https://jsfiddle.net/z4vo5u5d/238/

 class Nav {
        private config:object;
        constructor(){
            this.config = {
                $navigationPanel : $('#navigationPanel ul'),
                $addItems:$('#adItems')
            }
        }

        init(){
            this.attachHandlers();
        }
        addItems(){
            alert('===')
            this.config.$navigationPanel.append('<li>tens</li>')
        }
        attachHandlers(){
            this.config.$addItems.on('click' ,this.addItems)
        }
    }

    $(function(){
        var n =new Nav();
        n.init();
    })

当我复制我的代码并在此网站上运行时 http://www.typescriptlang.org/play/

它给出了错误

属性'$ navigationPanel'在'object'类型上不存在。

Answer 1

更新您的attachHandlers代码，如下所示： -

这称为function prototype binding

attachHandlers(){
  this.config.$addItems.on('click' ,this.addItems.bind(this)) /* bind(this) added */
}

注意： -

addItems是一个事件回调函数，它不会获得对Nav类的引用。通过在分配单击事件处理程序时绑定this类的Nav引用，addItems函数可以访问Nav类引用。

Answer 2

绑定事件处理程序时，您需要确保此符合 addItems 方法范围内的要求。在您当前的迭代中，此等于配置对象。

要更改此的含义，您可以按如下方式使用Function.prototype.bind：

attachHandlers(){
    this.config.$addItems.on('click' , this.addItems.bind(this));
}

在这种情况下，我们将类本身作为 this 的引用传递给函数，因此当触发处理程序时，它将执行预期的方法。

为什么按钮点击不会出现在打字稿？

2 个答案: