It’s time to talk about JavaScript object orientation! (When do we need it more?)

Front-end technologies, especially JavaScript, are often perceived by the back end as not a serious programming language, mostly because JavaScript is a function-based language, potentially limiting its use and development.

I remember in the late 90s and early 2000s, JavaScript was primarily used to make HTML pages more dynamic. For example, some pop-ups, running lights and other visual effects.

Today, we have frameworks, libraries, and even back-end systems that use JavaScript. Developing a mobile application and desktop application in JavaScript was unheard of before, but these days, we hear about it all the time and even use it. Now we can also use JavaScript for cross-platform development!

JavaScript is everywhere and you can easily do a lot of interesting things with JavaScript. But there are potential long-term problems. Many JavaScript developers are not as comfortable with or trained in object-oriented programming as Java developers are. This is normal, because we often try to catch up on what we’re working on and ignore things we don’t know yet

What is object-oriented programming?

Object-oriented programming is an idea, a state of mind. The idea behind it is that you create a blueprint for your imaginary object and then call it again and again to perform various functions. Every time you want to use an object, you must first create it so that it will exist, and then set its properties in order to use the functionality attached to it. These functions are called “methods”.

For example, a CustomerOrder object might have a GET: Order Details function (aka method) attached.

Constructor (customerId,orderId){this.customerId = customerId; // Constructor (customerId,orderId){this.customerId = customerId; this.orderId = orderId } getorderDetails() {return this.pullOrderDetails();
  }
  pullOrderDetails(){// Some operationsreturn 
  }
}
const order_1 = new CustomerOrder(87873,"Cus-001")

console.log(order_1.orderDetails)
Copy the code

Let’s look at another function-based approach:

// Based on the function const customerId = 8787 const orderId ="Cus-001"
functionPullOrderDetails (customerId,orderId){// Some operationsreturn
}
console.log(pullOrderDetails(87873,"Cus-001"))
Copy the code

The problem with the above is that when you have a large number of functions, it quickly becomes confusing. While it may be convenient at first to write everything as a function and then call it as needed, over time, the relationships between functions are so complex that you may need to modify many of them once changes are made, and many unknown problems arise.

If it’s a little hard to understand, let’s look at the following diagram (using classes) :

Constructor is where variables are set, and getters and setters are the entry points for a class to do things. What functions are used and how they are used are hidden. Each time a new object is created, the entire class and its methods are “cloned” and have access to what is needed. When changes occur, we only need to change the class once before they take effect globally.

Let’s look at the following diagram (using functions)

When we write code with a loose set of functions, its scope for change is often undefined. Dependency injection is necessary to make functions work properly, and one function often needs another function to work properly. On the surface, function-based programming may seem simple at first, but in the long run, maintaining it is a logical nightmare.

With object-oriented programming, you only need to call getter and setter methods to access the black box functionality. As a consumer of a class, you don’t need to know how it works. You just need to know it works.

Why do we want object-oriented programming in JavaScript

As the two figures above show, relying too much on function-based programming may get things done quickly, but in the long run it is very risky.

As the volume of code grows, you need to change the way you think about organizing your code and consider adopting object orientation. Objects are much easier to track and master than functions strung together through a series of dependency injection.

The following code is based on the function:

The problem with function-based programming is that a break in the chain can cause the whole process to fail. For objects, a broken method does not (and should not) affect the rest of the class.

The following code is class-based (object-oriented) :

This way, the code might not be much less, but you can reuse it without having to write a long chain of calls.

When you think about problems in terms of classes, rather than a series of interrelated functions, the code naturally reduces the risk of problems. Because each dependency injection increases the possibility of a potential error, it also takes more time and effort to find the error. ,

The last

Object-oriented programming is an active activity that you may or may not use. As the front-end system becomes larger, the amount of code and application scenarios are far greater than before, we need to think more about the importance of object-oriented programming.

Object-oriented Programming materials:

Developer.mozilla.org/zh-CN/docs/…

— — — — — — — — — — — — — — — — — — — — — — — — — –

Don’t leave after school! Long press the TWO-DIMENSIONAL code to pay attention to [technology life], free access to front-end learning advanced information, training combat video, employment guidance and many other benefits oh. I believe we all love learning and progress!