链式类方法抛出“不是函数”错误

Question

I was trying to do an exercise for chaining function in JS classes. I ran into some issues where the name of the function is producing some weird error.

Basically,

const user = User.init();
user.name().first_name("Alice").last_name("Bob");

with function

class User
{

static init()
{
    return new User();
}

constructor()
{
    this.firstname = "";
    this.lastname = "";
    this.dob = "";
    this.unit = "";
    this.street = "";
    this.suburb = "";
    this.state = "";
    this.postcode = "";
}

name()
{
    console.log("lol this is name");
    return this;
}

first_name(firstname)
{
    console.log("Setting firstname");
    return this;
}

last_name(lastname)
{
    console.log("Setting lastname");
    return this;
}
}

produces an error, however,

const user = User.init();
user.name().firstname("Alice").lastname("Bob");

with function

class User
{

static init()
{
    return new User();
}

constructor()
{
    this.firstname = "";
    this.lastname = "";
    this.dob = "";
    this.unit = "";
    this.street = "";
    this.suburb = "";
    this.state = "";
    this.postcode = "";
}

name()
{
    console.log("lol this is name");
    return this;
}

firstname(firstname)
{
    console.log("Setting firstname");
    return this;
}

lastname(lastname)
{
    console.log("Setting lastname");
    return this;
}
}

does not.

Error message

user.name().firstname("Alice").lastname("Bob");
        ^

TypeError: user.name(...).firstname is not a function

Both of these method is the same except for the underscore on the function name. Is someone out there kindly tell me what is the error. Thanks !

Answer 1

Your User.init() calls new User() . This will create a new User object, whose firstname is inherited from the class prototype as your "Setting firstname" function, and then promptly overshadow it by setting this.firstname = "" .

In the second example you don't do this.first_name = "" , and the object remains functional.

In general, you should decide which properties are methods and which properties are data - you can't use one property for both.

(Note that this also illustrates the importance of proper context - there was near-zero chance of diagnosing this from the code snippet you first posted :) )