Javascript 为什么此代码出现错误“；Hi不是一个函数；

当用户单击.step时，jquery将执行hello函数，该函数工作正常。hello函数将调用hi function=>我在这里遇到错误：hi不是一个函数

jQuery(document).ready(function( $ ) {
    const form = {

        init: function() {
            $('.step').on('click', this.hello)
        },

        hello: function() {
          console.log('Index: ', $(this).index()); // I can get the right index
          this.hi(); // ERROR: Hi is not a function!
        },

        hi: function() {
            console.log('HI')
        },
    }

    form.init()
})

当我像这样编写代码时，效果很好

jQuery(document).ready(function( $ ) {
    const form = {

        init: function() {
            $('.step').on('click', this.hi) // Look here
        },

        hi: function() {
            console.log('HI')
        },
    }

    form.init()
})

你们能解释一下为什么吗

Hi不是一个函数

jQuery(document).ready(function( $ ) {
    const form = {

        init: function() {
            $('.step').on('click', this.hello)
        },

        hello: function() {
          console.log('Index: ', $(this).index()); // I can get the right index
          this.hi(); // ERROR: Hi is not a function!
        },

        hi: function() {
            console.log('HI')
        },
    }

    form.init()
})

有人能解释为什么吗

在此代码中

    init: function() {
        $('.step').on('click', this.hello)
    },

    hello: function() {
      console.log('Index: ', $(this).index()); // I can get the right index
      this.hi(); // ERROR: Hi is not a function!
    },

您可以将

form.hello

设置为单击事件的事件处理程序。在事件处理程序中，

这是单击的元素，如中所示：

  $("button").click(function() { console.log(this.id); }

按钮将（给定此代码）没有
.hi
方法

如何使用Es6或arrow函数避免绑定

如果不需要知道单击了哪个按钮，可以在定义事件处理程序时使用箭头函数：

    init: function() { 
        $('.step').on('click', () => this.hello())
    },

例如：

理想情况下，您希望同时访问button和form类，这有两种可能，第一种是更改您定义类的方式，但根据您的操作方式，我们可以添加一个新属性
self
，以存储对其的引用……嗯。。。自我


jQuery（文档）.ready（函数（$）{
常数形式={
self:{}，
init:function（）{
self=这个；
$（'.step'）。on（'click'，self.hello）
},
您好：函数（）{
log（'Index:'，$（this.Index（））；
self.hi（）；
},
嗨：函数（）{
console.log（'HI'）
},
}
form.init（）
})

第一步
步骤2
除非绑定它们，否则此
将在事件处理程序中重置。在jquery中，当您单击dom时，该注释只会让您知道代码仍然在那里工作。我会更新。谢谢，因为您在控制台中定义了它，所以它在控制台语句之外没有作用域，所以不要在没有它的情况下调用hi。这是否回答了您的问题@SaadSohail你说得很有道理！当我移除这个时，它就工作了。你能添加一个单独的评论以便我们讨论吗？嗨，谢谢。我误解了在this.hi中，这指的是表单类，而实际上它指的是被单击的元素。我怎样才能使它引用到表格中（我们这里有什么与装订有关的吗？）你能解释一下装订吗？如果我把this.hi=this.hi.bind（this）放进去会发生什么；在init函数中。有很多关于绑定的博客，但我发现很难理解（大部分是用非常古老的Javascript解释的）。我认为这个简单的例子是最好的解释