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

nxowjjhe 于 2021-09-13 发布在 Java

关注(0)|答案(1)|浏览(481)

我有一个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();
    });
}

jquery JavaScript Function Class

来源：https://stackoverflow.com/questions/68513457/onclick-cant-call-nested-function-inside-javascript-class

1条答案

按热度按时间

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>

展开查看全部

赞(0）回复(0）举报 2021-09-13

我来回答

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

1条答案

1.使用箭头功能

2.使用function.prototype.bind

相关问题

热门标签

最新问答