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.