Call Method from Constructor: Error: Uncaught TypeError: undefined is not a function

问题

Task: I need to build a class in Typescript that calls some of it's own methods in it's own Constructor.

Problem: The Actual Code that the following Sample Code represents will Compile Successfully, but upon testing in the Javascript Console, it does not.

Sample:

export class volumeEQ
{
    constructor(ctx:any) 
    {
        this.ctx = ctx;         // Audio context saved into member variable of class
        this.setupAudioNodes(); // Sets up nodes made out of audio
    }

    setupAudioNodes()
    {
        this.sourceNode.connect(this.ctx.destination); // Connect to destination
    }
}

Technical: The Typescript Compiler does not have a problem with this.setupAudioNodes() but once called as Javascript within the Browser's Javascript Console I receive an error Uncaught TypeError: undefined is not a function. Effectively, this is an issue with Javascript's this. syntax and how it's easy to get confused with it. But because I'm developing in Typescript, I want a more Typescript style solution.

Question: How can I call a Class's Methods from it's Constructor in Typescript?

回答1:

Here's how to call a method from the constructor:

class Thing {
    constructor(name: string) {
        this.greet(name);
    }

    greet(whatToGreet: string) {
        console.log('Hello, ' + whatToGreet + '!')
    }
}

var x = new Thing('world'); // Prints "Hello, world!"

回答2:

The following is what I was looking for.

Solution Source:
How can I preserve lexical scope in TypeScript with a callback function

How to preserve Lexical Scope of this. in Typescript:

if the following declaration for methods isn't working:

export class myClass
{
    constructor()
    {
        var myString:string = this.myMethod(true);
    }

    public myMethod(useBigString:boolean) : string
    {
        if(useBigString)
        {
            return "bigString";
        }
        return "smlStr";
    }
}

which produces a method in javascript like the following:

myClass.prototype.myMethod = function (useBigString) {

Instead, Try declaring your methods this way:

export class myClass
{
    constructor()
    {
        var initString:string = this.myMethod(true);
    }

    public myMethod = (useBigString:boolean) : string => {
        if(useBigString)
        {
            return "bigString";
        }
        return "smlStr";
    }
}

which declares the method in javascript from within the constructor:

this.myMethod = function(useBigString) {

A drawback is that Method Syntax highlighting will not recognize this sort of definition, but it definitely Compiles and Works! This situation doesn't apply for Class Variables like it does for Class Methods.

回答3:

Research:

• TypeScript class function not available
• Typescript: private member is suddenly undefined
• How can I preserve lexical scope in TypeScript with a callback function

A Temporary Hack:

• Create one class that has the methods you wish to call, but leave the constructor as basic as possible.
  
• Next Create a second class that extends the first one.
  
• Call the methods from within the Super Class. Example: super.myFunction();

Sample:

export class basicEQ
{
    constructor(ctx:any)
    {
        this.ctx = ctx;         // Audio context saved into member variable of class
    }
    setupAudioNodes()
    {
        this.sourceNode = this.context.createBufferSource(); // Create Buffer Source Node
        this.sourceNode.connect(this.ctx.destination); // Connect to destination
    }
}

export class volumeEQ extends basicEQ
{
    constructor(ctx:any)
    {
        super(ctx);
        super.setupAudioNodes(); // Use super, Not this
    }

}

Hack Explaination:
Use super. instead of this. for Method Calls inside the Constructor. Do it by Extending your Class so you may call super in the first place. Example: export class myUsableClass extends myBaseClass. Now, myBaseClass has all the Methods, and myUsableClass can call them from the Constructor.

My solution is a workaround to the actual problem, but it's good to know there is a way around the issue at all. If anyone else has another means to overcome the problem, do post! :)

来源：https://stackoverflow.com/questions/23791513/call-method-from-constructor-error-uncaught-typeerror-undefined-is-not-a-func