Archive for January 21st, 2022|Daily archive page
ECMAScript 6 Classes
Leave a commentECMAScript 6 introduces “class” keyword in JavaScript. It will work in almost all browsers except IE. Everything one can do using class to create JavaScript classes can also be done with JavaScript constructor functions (the classic way). It just looks cleaner and less typing.
Here is how to create a JavaScript class using the class keyword:
'use strict';
(function() {
class Person {
constructor (firstName, lastName, age) {
this.firstName = firstName;
this.lastName = lastName;
this.age = age;
}
get fullName() {
return this.firstName + ' ' + this.lastName;
}
set fullName(fullName) {
var nameArray = fullName.split(' ');
this.firstName = nameArray[0];
this.lastName = nameArray[1];
}
isAdult() {
return this.age >= 18;
}
};
})();
Here is the classic way using a constructor function:
'use strict';
(function() {
function Person (firstName, lastName, age) {
this.firstName = firstName;
this.lastName = lastName;
this.age = age;
this.isAdult = function() {
return this.age >= 18;
}
Object.defineProperty(this, 'fullName', {
get: function() {
return this.firstName + ' ' + this.lastName
},
set: function(fullName) {
var nameArray = fullName.split(' ');
this.firstName = nameArray[0];
this.lastName = nameArray[1];
},
enumerable: true
});
}
})();
One thing to note: If we were to display any Person using the class example, we would not be seeing the fullName property. That is because it is not enumerable using the “class” keyword. To iterate over the properties (or keys) in the class, we would have to use the Object.defineProperty() method to make fullName enumerable.
The other interesting thing about JavaScript classes is the fullName property (defined using getter and setters) reside on the prototype. Therefore, if we were to modify the fullName property to be enumerable, we would pass the prototype object in Object.defineProperty() method:
'use strict';
(function() {
class Person {
constructor (firstName, lastName, age) {
this.firstName = firstName;
this.lastName = lastName;
this.age = age;
}
get fullName() {
return this.firstName + ' ' + this.lastName;
}
set fullName(fullName) {
var nameArray = fullName.split(' ');
this.firstName = nameArray[0];
this.lastName = nameArray[1];
}
isAdult() {
return this.age >= 18;
}
};
Object.defineProperty(Person.prototype, 'fullName', {enumerable: true});
})();
The firstName, lastName, and age properties are instance properties.
Inheritance in JavaScript Classes
Use the “extends” and “super” keywords when inheriting other classes.
'use strict';
(function() {
class Person {
constructor (firstName, lastName, age) {
this.firstName = firstName;
this.lastName = lastName;
this.age = age;
}
get fullName() {
return this.firstName + ' ' + this.lastName;
}
set fullName(fullName) {
var nameArray = fullName.split(' ');
this.firstName = nameArray[0];
this.lastName = nameArray[1];
}
isAdult() {
return this.age >= 18;
}
};
Object.defineProperty(Person.prototype, 'fullName', {enumerable: true});
class Student extends Person {
constructor (firstName, lastName, age) {
super(firstName, lastName, age); //Calls the Person constructor!
this._enrolledCourses = [];
}
enroll(courseId) {
this._enrolledCourses.push(courseId);
}
getCourses() {
return this.fullName + ' is enrolled in courses: ' +
this._enrolledCourses.join(', ');
}
}
let john = new Student('John', 'Doe', 44);
john.enroll('CS101');
john.enroll('EN101');
display(john);
display(john.getCourses());
})();
In the above example, the Student class inherits from Person.
Student {
firstName: John
lastName: Doe
age: 44
_enrolledCourses: CS101,EN101
fullName: John Doe
}
John Doe is enrolled in courses: CS101, EN101
The Student instance “john” has inherited all the Person properties (firstName, lastName, age, fullName).
Make a one-time donation
Make a monthly donation
Make a yearly donation
Choose an amount
Or enter a custom amount
Your contribution is appreciated.
Your contribution is appreciated.
Your contribution is appreciated.
DonateDonate monthlyDonate yearlyJavaScript Prototypes and Inheritance
Function Prototypes and Object Prototypes.
A function’s prototype is the object instance that will become the prototype for all objects created using this function as a constructor.
When a function is created, there is an object created in memory and is connected to the function behind the scenes. Each time an object instance is created using that constructor function, the “.__proto__” prototype for each of the objects point to the same object in memory for the constructor function prototype.
Let’s update the Dog prototype and add an age property:
The “patchy” instance age automatically updates. To further demonstrate that the function prototype object is the same across all instances, let us update the .__proto__ age value on the patchy instance:
So far, these are the prototype properties. What would happen if we updated the age property (not the __proto__.age) on the patchy instance?
“patchy.age” is an instance property, not a prototype property. JavaScript will examine the object and see if it has an age property. In the first display(patchy.age), the instance does not have an age property. JavaScript then examines the object prototype for an age property. In this case patchy.__proto__ has an age property with a value of 8. After we updated the patchy.age property to 10, what really happened, is we added an instance property of age, to the patchy object. In the second display(patchy.age), JavaScript checks the object instance for an age property. It finds one and displays its value of 10. We can see, the patchy instance has access to both its own “age” property, and it’s __proto__ “age” property.
Using the “hasOwnProperty” we can further look into this.
An object’s prototype is the object instance from which the object is inherited.
In the previous examples, the “patchy” has been inheriting from the Dog prototype object. The prototype is also inheriting from the Object prototype. There are multiple levels of inheritance at work. The inheritance chains can be shown as follows:
The following code demonstrates how to put inheritance chains to work so our objects can inherit prototype properties from other objects:
'use strict';
(function() {
function Person (firstName, lastName, age) {
this.firstName = firstName;
this.lastName = lastName;
this.age = age;
Object.defineProperty(this, 'fullName', {
get: function() {
return this.firstName + ' ' + this.lastName
},
enumerable: true
});
}
function Student(firstName, lastName, age) {
Person.call(this, firstName, lastName, age);
this._enrolledCourses = [];
this.enroll = function(courseId) {
this._enrolledCourses.push(courseId);
};
this.getCourses = function() {
return this.fullName + ' is enrolled in: ' +
this._enrolledCourses.join(', ');
};
}
Student.prototype = Object.create(Person.prototype);
Student.prototype.constructor = Student;
let homer = new Student('Homer', 'Simpson', 45);
homer.enroll('CS301');
homer.enroll('EN101');
homer.enroll('CH101');
display(homer.getCourses());
display(Student.prototype.constructor);
})();
JavaScriptShadow 