Constructor Function in JavaScript

Any functions in JavaScript that is invoked by the new keyword is called a constructor function.

function People(name, country, language){
    this.name = name;
    this.country = country;
    this.language = language;
}

const tim = new People("Tim", "USA", "english")

console.log(tim.country);

Naming Convention: constructor function start with Capital letter. People

new keyword automatically returns the object for us it create the People constructor.

USA

By prototype, you can add more functionality.

function People(name, country, language) {
    this.name = name;
    this.country = country;
    this.language = language;
}

People.prototype.speak = function() {
    return this.name + " can speak " + this.language;
}

const tim = new People("Tim", "USA", "english");

tim.email = "tim@email.com";
console.log(tim.speak());
console.log(tim)
console.log(tim.__proto__);
console.log(tim.__proto__.__proto__);
Tim can speak english
People {
  name: 'Tim',
  country: 'USA',
  language: 'english',
  email: 'tim@email.com'
}
People { speak: [Function] }
{}

Again, as a rule all constructor functions should start with a capital letter to let other programmers know that you need to call this function using the new keyword.

You can also create People constructor with Native Function in JavaScript

const People = new Function("name", "country", "language", "this.name = name; this.country = country; this.language = language;");
const tim = new People("Tim", "USA", "english");
console.log(tim.country);
  • Last parameter is what the function is going to be doing.
  • Mostly, you are not going to use.
USA

Problem of function inside function with This Keyword

function People(name, country, language) {
    this.name = name;
    this.country = country;
    this.language = language;
}

People.prototype.speak = function () {
    function insideFunction() {
        return this.name + " can speak " + this.language;
    }
    return { insideFunction: insideFunction }
}

const tim = new People("Tim", "USA", "english");
console.log(tim.speak().insideFunction());
undefined can speak undefined

* this.name and this.language are undefined.

You can use solve with bind keyword or assign another variable.

Bind Keyword

function People(name, country, language) {
    this.name = name;
    this.country = country;
    this.language = language;
}

People.prototype.speak = function () {
    function insideFunction() {
        return this.name + " can speak " + this.language;
    }
    return { insideFunction: insideFunction.bind(this) }
}

const tim = new People("Tim", "USA", "english");
console.log(tim.speak().insideFunction());
Tim can speak english

assign another variable.

function People(name, country, language) {
    this.name = name;
    this.country = country;
    this.language = language;
}

People.prototype.speak = function () {
    const self = this;
    function insideFunction() {
        return self.name + " can speak " + self.language;
    }
    return { insideFunction: insideFunction }
}

const tim = new People("Tim", "USA", "english");
console.log(tim.speak().insideFunction());
Tim can speak english

Old code bases you might see a lot of prototype. This code there is no classes in here there is this weird thing where have to make sure to remember to have a Capital letter. That is why Object.create() was added the language in order to avoid the headache and just use pure prototypal Inheritance. The style of coding the idea of this code with new keyword is very much object-oriented programming is part especially when it comes to languages like Java.

Object.create() is technically less Object-Oriented than something like People.prototype.speak.

However, after ES6 JavaScript finally got the class keyword.

Leave a Reply

Your email address will not be published.

ANOTE.DEV