onclick无法在javascript类内调用嵌套函数

nxowjjhe  于 2021-09-13  发布在  Java
关注(0)|答案(1)|浏览(291)

我有一个javascript类,其中至少有3个函数。我有一个链接,但是我想给这个链接的onclick事件添加一些逻辑。
不幸的是,它无法识别嵌套函数,可能是因为 this 还不够清楚。

class MyJsClass {
    dummyFunc1() {
        $('#my-link').click(function() {
            console.log('test');
            this.dummyFunc2();
        });
    }

    dummyFunc2() {
        console.log('dummyfunc2');
        this.dummyFunc3();
    }

    dummyFunc3() {
        console.log('dummyfunc3');
    }
}

这不起作用,所以我对它做了一点这样的修改,但仍然不起作用 Cannot read property 'dummyFunc3' of undefined :

dummyFunc1() {
    var dummyfunc2 = this.dummyFunc2();
    $('#my-link').click(function() {
        console.log('test');
        dummyfunc2();
    });
}
gmxoilav

gmxoilav1#

jquery方法/函数内部(如 .click() 等) this 有自己的背景 jQuery 对象示例,其中 this 是返回的dom元素。
改用箭头函数 => 因为它没有自己的绑定到 this -因此制造 this 请参阅所需的类示例:

1.使用箭头功能

class MyJsClass {
  dummyFunc1() {
    $('#my-link').on("click", (evt) => {
      // If needed use evt.currentTarget instead of this
      // console.dir(evt.currentTarget);   // {}<div id="my-link" />
      this.dummyFunc2(); // this == MyJsClass instance
    });
  }

  dummyFunc2() {
    console.log('dummyfunc2');
    this.dummyFunc3();
  }

  dummyFunc3() {
    console.log('dummyfunc3');
  }
}

const MJSC = new MyJsClass();
MJSC.dummyFunc1();
<a id="my-link">CLICK ME</a>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

2.使用function.prototype.bind

如果需要,还有不推荐的$.proxy:

$('#my-link').on("click", $.proxy(this.dummyFunc2, this));

jQuery3.3中的哪个可以更好地与js的function.prototype.bind结合使用

class MyJsClass {
  dummyFunc1() {
    $('#my-link').on("click", this.dummyFunc2.bind(this));
  }

  dummyFunc2() {
    console.log('dummyfunc2');
    this.dummyFunc3();
  }

  dummyFunc3() {
    console.log('dummyfunc3');
  }
}

const MJSC = new MyJsClass();
MJSC.dummyFunc1();
<a id="my-link">CLICK ME</a>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

相关问题