Newly added function to the prototype of the constructor doesn't work when it's called on objects

constructor function javascript
javascript prototype explained
javascript add function to object
javascript class constructor
javascript prototype inheritance
javascript inheritance
javascript class prototype
object oriented javascript w3schools
function userCreator(name,score){
    const newUser = Object.create(userFunctions);
    newUser.name = name;
    newUser.score = score;
    return newUser;
}
userFunctions = {
  increment: function(){
      this.score++;
  }
};

userCreator.prototype.foo = function(){
    console.log("foo");
};

const user1 = userCreator("Phil",5);

user1.foo();

I try to add a function to my constructure but when I add this function and call it with user1 it says user1.foo() is not a function.

The prototype you're assigning the object in userCreator isn't userCreator.prototype, it's userFunctions. So you'd add foo to that, not userCreator.prototype. Also, don't forget to declare userFunctions, at the moment your code is falling prey to what I call The Horror of Implicit Globals.

function userCreator(name,score){
    const newUser = Object.create(userFunctions);
    newUser.name = name;
    newUser.score = score;
    return newUser;
}
const userFunctions = {  // *** Added const
  increment: function(){
      this.score++;
  }
};

userFunctions.foo = function(){ // *** `userFunctions`, not `userCreator.prototype`
    console.log("foo");
};

const user1 = userCreator("Phil",5);

user1.foo();

Inheritance and the prototype chain, It's not always necessary, but it does have its uses. Let's say you have a constructor function and its prototype: automatically added by the keyword 'new​' // it sets up the relationship between the instance and the prototype  When a function is created in JavaScript, the JavaScript engine adds a prototype property to the function. This prototype property is an object (called a prototype object) that has a constructor

It looks like you want the object prototype to inherit from the userFunctions object, in which case you should set

userCreator.prototype = Object.create(userFunctions);

outside of the constructor. You should also call new on the constructor, and don't return an object from it, in order for <functionName>.prototype to work correctly:

function userCreator(name,score){
    this.name = name;
    this.score = score;
}
userFunctions = {
  increment: function(){
      this.score++;
  }
};

userCreator.prototype = Object.create(userFunctions);
userCreator.prototype.foo = function(){
    console.log("foo");
};

const user1 = new userCreator("Phil",5);

user1.foo();

Why is it necessary to set the prototype constructor?, Problem with creating objects with the constructor function: It doesn't make sense to have two instances of function fullName that do the same thing. The new property can be added to the constructor function's prototype  A new object is created, inheriting from Foo.prototype. The constructor function Foo is called with the specified arguments, and with this bound to the newly created object. new Foo is equivalent to new Foo(), i.e. if no argument list is specified, Foo is called without arguments.

Since you do not use the new syntax in calling userCreator (and it isn't a function that returns an instance of its prototype), you don't use userCreator as a (standard) constructor. Therefore the created objects do not have userCreator.prototype as proto, and so any mutation of userCreator.prototype has no effect on your created object.

You seem to want to have User objects with UserFunctions. In ES6 syntax you would achieve that like this:

class Scorer {
    constructor() {
        this.score = 0;
    }
    increment() {
        this.score++;
    }
}

class User extends Scorer {
    constructor(name, score) {
        super();
        this.name = name;
        this.score = score;
    }
    foo() {
        console.log("foo");
    }
}

const user1 = new User("Phil", 5);

user1.foo();

Prototypes in JavaScript - Better Programming, One scenario is when adding methods to your Javascript 'classes'. method attached via this will get re-declared for every new instance it won't be found there directly so it will then check the prototype of Person to find it. An object constructor is a function. To make it add a new property to the instances that it will create when called, you would need to modify the function behaviour, i.e. rewrite its body. Adding a property to the function object doesn't achieve that. – Bergi Jul 15 '19 at 10:31

Methods Within Constructor vs Prototype in Javascript, Remember, new objects can be created with a constructor function, like new F() . JavaScript itself does not ensure the right "constructor" value. Not overwrite Rabbit.prototype totally // just add to it Rabbit . prototype . jumps  Object.prototype.constructor All objects have a constructor property. If an object is created without the using a constructor function, it will have a constructor property. The constructor property will return a reference to the object’s Object constructor function. It will return 1, true1, and”test”`. Take a look at an example below.

F.prototype, You could also call Person as a function - without the new , This allows calling it as a function to return a Person , and it doesn't pollute the namespace. Next, we add the breathe function to the prototype of Mammal. As we have seen, a constructor is simply a function, so it can be called without the new keyword. But, for inexperienced programmers, this can be a source of bugs. A scope-safe constructor is designed to return the same result regardless of whether it’s called with or without new, so it doesn’t suffer from those issues.

Javascript Constructors and Prototypes, All JavaScript objects inherit properties and methods from a prototype. function Person(first, last, age, eyecolor) { To add a new property to a constructor, you must add it to the constructor Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. The constructor property returns a reference to the Object constructor function that created the instance object. Note that the value of this property is a reference to the function itself, not a string containing the function's name.

Comments
  • Thanks man ! A short clarification : To be able to use X.prototype.functionname = function()..... syntax, i must use the new keyword or the syntactical sugar Classes right ? And it is not possible at all to add .prototype.functionName if I'm creating stuff manually like in my example.
  • @AtlasOkyanus - No, there's no reason you can't do const newUser = Object.create(userCreator.prototype); instead and not have userFunctions at all. prototype is just a property referring to an object, so if you want to use it directly, you can. I've added an example above. "And it is not possible at all to add .prototype.functionName if I'm creating stuff manually like in my example." You can add to the object prototype refers to when using any of the options above.