The concept of Class in object-oriented programming languages like Class in Javascript is used a lot but in JavaScript under ES6 there is no concept of Class . JavaScript uses the Prototype property of its Objects for object-oriented purposes. We will learn these concepts in the article Deeply Understand Classes in JavaScript
1. What is object-oriented programming?
Object Oriented Programming (OOP) is one of the most important and widely used programming techniques today. Most of today’s programming languages such as Java, PHP, .NET, Ruby, Python… all support OOP.
Specifically: Object-oriented programming (OOP) is a programming technique that allows programmers to create objects in code that abstracts away objects. There are two concepts to grasp here:
- Class(class): this is the basis, the so-called abstraction of the object. For example, the Nam object is created from the Person class.
- Object: the opposite is the materialization of the class.
- Attributes: properties of the object such as the object Nam whose property name is Nam. When you don’t understand, reading these 2 sentences sounds like a crazy train. What is abstraction and concretization? Here is an example.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | 'use strict' class Person { constructor(firstName, birthYear) { this.name = firstName this.birthYear = birthYear } get age() { return 2023 - this.birthYear } } let Nam = new Person('Nam', 1999) let Nam2 = new Person('Nam2', 1999) console.log(Nam.name) |
The example above creates a Person class , which is an abstraction. A class as a blueprint can create multiple copies with specific properties such as the names of two Nam and Nam2 objects created from the same blueprint, the Person class.
2. Object Oriented Programming in JavaScript
- Most JavaScript elements are Objects .
- You can see simple variable declarations: let a=1. Why does variable a have a.toString() function when we don’t define a function for that variable at all. Actually let a=1 is a shortcut declaration, explicitly declared variable a will be written as follows:
- So the variable or function declarations you are using are actually short declarations of the variable or function creation. They are in fact an object created by a Class and using the new operator.
- You can view the properties inherited by the a object from the Number class via the prototype via the __ proto property. All JavaScript objects have this property
3. Constructor Function and operator new
A constructor is a function used to initialize properties for objects (Object). The constructor will have the same name as the class when you declare the class in ES6. Eg:
1 2 3 4 5 6 7 8 9 10 11 12 | const Persion=function(firstName, lastName){ this.firstName=firstName; this.lastName=lastName console.log(this) } //tạo 1 đối tượng từ hàm tạo Persion let harry=new Person('Harry','Kane') // khi toán tử new được sử dụng sẽ có 4 bước được thực hiện: //1. tạo 1 object rỗng {} //2. hàm được thực thi, ở đây là gán các thuộc tính cho this //3. liên kết object này với prototype //4. trả về this và gán cho biến harry |