Question

我试图在我的类中执行由另一个函数触发的函数。

这里是一个例子。 Foo是一个类，在构造时会调用函数Bar()。动画制作完成后，我想doSomething，但这不起作用，并引发错误。

下面是代码，或者您可以在此处测试JSFiddle。

class Foo
{
    Bar(){
        $("#element").animate({ width : "100%" }, {
            duration : 1000,
            complete : function(){
            	console.log("test");
                this.doSomething();
            }
        });
    }

    doSomething()
    {
        // Do something
    }
    
    constructor(){
    	this.Bar();
    }
}

var example = new Foo();

#cont {
  width: 100%;
}
#element {
  width: 0;
  height: 20px;
  background: black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="cont"><div id="element"></div></div>

错误：

未捕获的TypeError：this.doSomething不是函数

如何在该函数中的类中调用doSomething()函数？

Answer 1

您正在丢失“此”上下文。您可以使用箭头函数“ complete：（）=> {”或为其指定= this并针对较旧版本的JS运行that.doSomething（）。

Answer 2

在您调用this时，它在回调函数complete的范围内。此时，this引用了回调函数，而不是类。或者，知道jQuery的this可能指向#element元素。您需要进行重组。最懒惰的方法是在类方法中创建一个新变量，将this分配给它，然后在函数中使用它。我也在这里使用let而不是var，因为我们希望此变量受块范围限制（whatever that means）

class Foo
{
    Bar(){
        let self = this;
        $("#element").animate({ width : "100%" }, {
            duration : 1000,
            complete : function(){
                console.log("test");
                self.doSomething();
            }
        });
    }

    doSomething()
    {
        // Do something
    }

    constructor(){
        this.Bar();
    }
}

var example = new Foo();

您还可以使用箭头功能和using关键字或bind来使用，但我不是一个好的程序员，并且上述概念到目前为止对我来说还行得通。

如何使用Javascript从同一类的另一个函数中访问类函数

2 个答案: