JavaScript Object Constructors
Notes
It's a good idea to use a capital letter as the first letter when naming constructor functions.
About this
In a constructor function, the placeholder this doesn't have a specific value initially. Instead, it serves as a stand-in for the new object being created. Only when a new object is formed, the value of this transforms into that newly created object.
Object Types (Blueprints) (Classes)
The earlier examples have some restrictions. They only make individual objects.
Occasionally, we require a"blueprint" to produce numerous objects of the identical "type".
To make a type of "object," you can use a special function called an object constructor function.
In the provided example, the code function Person() represents a function used to construct objects.
We make things of the same kind by using the constructor function and the new keyword.
What is this?
In JavaScript, when we use the this keyword, it points to an object.
Which outcome is determined by the way this is utilized or called.
The word this in programming can mean different things based on how it's used.
In a method related to an object, the term this points to the specific object. |
By itself, the term this indicates the global object. |
In a function, the term this points to the overall object known as the global object. |
In a function under strict mode, the keyword this has no defined value and is set to undefined. |
In a situation, the term this points to the element that has encountered the event. |
Functions such as call(), apply(), andbind() enable the reference of this to be associated with any object. |
Note
this is not like a variable; it's a keyword. You can't alter the value of this.
Adding a Property to an Object
It's simple to add a new feature to an object that already exists.
The new attribute will be assigned to myFather, not myMother or any other person's objects.
Adding a Method to an Object
It's simple to add a new method to an object that already exists.
A new function will be included in myFather, not in myMother or any other person's objects.
Adding a Property to a Constructor
Adding a new feature to an object constructor is different from adding it to an existing object.
To include a new feature in a constructor, simply add it to the constructor function.
This allows default values for object properties.
Adding a Method to a Constructor
Your constructor function can also create methods.
You can't add a new function to an object creator in the same manner you add a new function to an already existing object.
Methods need to be added within the constructor function when working with object construction.
Example
function Person(firstName, lastName, age, eyeColor) {
this.firstName = firstName;
this.lastName = lastName;
this.age = age;
this.eyeColor = eyeColor;
this.changeName = function (name) {
this.lastName = name;
};
}
The function changeName() sets the person's lastName property to the value of the name.
JavaScript can figure out who you're referring to by replacing the word this with myMother.
Built-in JavaScript Constructors
JavaScript comes with predefined creators for basic objects.
The Math() object is not part of the list. Math is a global object. You cannot apply the new keyword to the Math object.
Did You Know?
Above, notice that JavaScript provides object versions for basic data types such as String, Number, and Boolean. However, it's unnecessary to create intricate objects. Primitive values are significantly faster.
Instead of using new String(), opt for string literals "".
Replace the usage of new Number() with the number literal 50.
Instead of using new Boolean(), use the simple words true / false.
Replace new Object() with {} in your code.
Replace new Array() with [] when creating arrays.
Instead of using new RegExp(), use pattern literals /()/.
Instead of using new Function(), use function expressions like () {}.
String Objects
Typically, strings are made as basic elements like this: firstName = "John".
Strings can also be made as objects using the new keyword:
firstName = new String("John")
Discover why it's not advisable to create strings as objects in the chapter on JavaScript Strings.
Number Objects
Typically, we make numbers in a basic way. For example: x = 30.
Numbers can be made as objects too by using the new keyword:
x = new Number(30)
Discover the reasons for not creating numbers as objects in the chapter JS Numbers.
Boolean Objects
Typically, booleans are made as basic values like this: x = false.
But you can also make booleans as objects using the new keyword:
x = new Boolean(false)
Understand the reason not to create booleans as objects in the JS Booleans chapter.
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Object Constructors</h2>
<p id="demo"></p>
<script>
// Constructor function for Person objects
function Person(first, last, age, eye) {
this.firstName = first;
this.lastName = last;
this.age = age;
this.eyeColor = eye;
}
// Create a Person object
const myFather = new Person("John", "Doe", 50, "blue");
// Display age
document.getElementById("demo").innerHTML = "My father is " + myFather.age + ".";
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Object Constructors</h2>
<p id="demo"></p>
<script>
// Constructor function for Person objects
function Person(first, last, age, eye) {
this.firstName = first;
this.lastName = last;
this.age = age;
this.eyeColor = eye;
}
// Create two Person objects
const myFather = new Person("John", "Doe", 50, "blue");
const myMother = new Person("Sally", "Rally", 48, "green");
// Display age
document.getElementById("demo").innerHTML = "My father is " + myFather.age + ". My mother is " + myMother.age + ".";
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Object Constructors</h2>
<p id="demo"></p>
<script>
// Constructor function for Person objects
function Person(first, last, age, eye) {
this.firstName = first;
this.lastName = last;
this.age = age;
this.eyeColor = eye;
}
// Create 2 Person objects
const myFather = new Person("John", "Doe", 50, "blue");
const myMother = new Person("Sally", "Rally", 48, "green");
// Add nationality to first object
myFather.nationality = "English";
// Display nationality
document.getElementById("demo").innerHTML = "My father is " + myFather.nationality;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Object Constructors</h2>
<p id="demo"></p>
<script>
// Constructor function for Person objects
function Person(first, last, age, eye) {
this.firstName = first;
this.lastName = last;
this.age = age;
this.eyeColor = eye;
}
// Create 2 Person objects
const myFather = new Person("John", "Doe", 50, "blue");
const myMother = new Person("Sally", "Rally", 48, "green");
// Add a name method to first object
myFather.name = function() {
return this.firstName + " " + this.lastName;
};
// Display full name
document.getElementById("demo").innerHTML = "My father is " + myFather.name();
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Object Constructors</h2>
<p>You cannot add a new property to a constructor function.</p>
<p id="demo"></p>
<script>
// Constructor function for Person objects
function Person(first, last, age, eye) {
this.firstName = first;
this.lastName = last;
this.age = age;
this.eyeColor = eye;
}
// You can NOT add a new property to a constructor function
Person.nationality = "English";
// Create 2 Person objects
const myFather = new Person("John", "Doe", 50, "blue");
const myMother = new Person("Sally", "Rally", 48, "green");
// Display nationality
document.getElementById("demo").innerHTML = "The nationality of my father is " + myFather.nationality;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Object Constructors</h2>
<p id="demo"></p>
<script>
// Constructor function for Person objects
function Person(first, last, age, eye) {
this.firstName = first;
this.lastName = last;
this.age = age;
this.eyeColor = eye;
this.nationality = "English";
}
// Create 2 Person objects
const myFather = new Person("John", "Doe", 50, "blue");
const myMother = new Person("Sally", "Rally", 48, "green");
// Display nationality
document.getElementById("demo").innerHTML = "My father is " + myFather.nationality + ". My mother is " + myMother.nationality;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Object Constructors</h2>
<p id="demo"></p>
<script>
// Constructor function for Person objects
function Person(first, last, age, eye) {
this.firstName = first;
this.lastName = last;
this.age = age;
this.eyeColor = eye;
this.name = function() {
return this.firstName + " " + this.lastName
};
}
// Create a Person object
const myFather = new Person("John", "Doe", 50, "blue");
// Display full name
document.getElementById("demo").innerHTML = "My father is " + myFather.name();
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Object Constructors</h2>
<p id="demo"></p>
<script>
// Constructor function for Person objects
function Person(firstName, lastName, age, eyeColor) {
this.firstName = firstName;
this.lastName = lastName;
this.age = age;
this.eyeColor = eyeColor;
this.changeName = function(name) {
this.lastName = name;
}
}
// Create a Person object
const myMother = new Person("Sally", "Rally", 48, "green");
// Change last name
myMother.changeName("Doe");
// Display last name
document.getElementById("demo").innerHTML = "My mother's last name is " + myMother.lastName;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Object Constructors</h2>
<p id="demo"></p>
<script>
const x1 = new String(); // A new String object
const x2 = new Number(); // A new Number object
const x3 = new Boolean(); // A new Boolean object
const x4 = new Object(); // A new Object object
const x5 = new Array(); // A new Array object
const x6 = new RegExp(); // A new RegExp object
const x7 = new Function(); // A new Function object
const x8 = new Date(); // A new Date object
// Display the type of all objects
document.getElementById("demo").innerHTML = "x1: " + typeof x1 + " <br> " +
"x2: " + typeof x2 + " <br> " +
"x3: " + typeof x3 + " <br> " +
"x4: " + typeof x4 + " <br> " +
"x5: " + typeof x5 + " <br> " +
"x6: " + typeof x6 + " <br> " +
"x7: " + typeof x7 + " <br> " +
"x8: " + typeof x8 + " <br> ";
</script>
<p>There is no need to use new String(), new Number(), new Boolean(), new Array(), and new RegExp()</p>
<p>Use literals instead like: myArray = []</p>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
let x1 = ""; // string
let x2 = 0; // number
let x3 = false; // boolean
const x4 = {}; // Object object
const x5 = []; // Array object
const x6 = /()/; // RegExp object
const x7 = function() {}; // function
// Display the type of all
document.getElementById("demo").innerHTML = "x1: " + typeof x1 + " <br> " +
"x2: " + typeof x2 + " <br> " +
"x3: " + typeof x3 + " <br> " +
"x4: " + typeof x4 + " <br> " +
"x5: " + typeof x5 + " <br> " +
"x6: " + typeof x6 + " <br> " +
"x7: " + typeof x7 + " <br> ";
</script>
</body>
</html>
HTML
CSS
Javascript
Jquery