Objects nature in JavaScript (1) | for beginners
This is the first article I wrote in my newsletter "Intro to JavaScript" and I want to point out that having a strong background in programming is essential for understanding those articles, and for this article especially understanding object-oriented programming is a prerequisite.
Many developers who tried coding or dealing with JavaScript agree that JavaScript is a weird language. Some of them hate it so much. And this made me so curious about it. I dealt with JavaScript many times and wrote so much code in it, but I was not satisfied with my understanding of this vital programming language. That was the reason for me to start diving deeper into it.
The first thing that caught my attention was JavaScript’s object model which is prototype-based rather than class-based, it was a surprise that an object can inherit from another object! Look at this example:
parent is an object, and child is an object too! Interesting, right? let’s break this block of code into smaller parts and demonstrate it:
This appearance reminds me of associative arrays in PHP, or dictionaries in Python, but neither associative arrays nor dictionaries can contain functions, so what’s going on there? If this was an object, so what is its class??
Understanding JavaScript’s Prototype-Based Inheritance
In many traditional OOP languages like Java or C++, objects are instances of classes. A class defines a blueprint for objects, specifying their structure and behavior. JavaScript, however, uses a different model: prototype-based inheritance.
No Classes, Only Prototypes
In JavaScript, objects can inherit directly from other objects. This means there are no “classes” in the traditional sense. Instead, JavaScript uses prototypes.
Here’s how the code works:
Creating the parent Object:
The object parent has property value, and a method called getValue().
Creating the Child Object:
领英推荐
The child object is created with parent as its prototype. This means child inherits all properties and methods from parent
When child.method() is called, JavaScript looks up the prototype chain to find method in parent and executes it in the context of child.
The Prototype Chain
When you access a property or method on an object, JavaScript first looks for that property or method on the object itself. If it doesn’t find it, JavaScript looks at the object’s prototype, and so on, up the prototype chain until it finds the property or reaches the end of the chain.
How is This Different from Class-Based Inheritance?
Here’s an example from a class-based language “Java” that clarifies the difference:
In Java:
In JavaScript:
To sum up
JavaScript’s prototype-based inheritance model provides a powerful and flexible way to create and manage objects. It allows objects to directly inherit from other objects, offering a more dynamic and less rigid approach compared to traditional class-based inheritance. This difference can initially be surprising or confusing for developers coming from other languages, but it also opens up unique possibilities and patterns for structuring code. In the next articles, we'll be discussing other various aspects of objects in JavaScript, stay tuned!
References
FCAI-CU Senior student majored in AI.
9 个月Although I'm still not convinced why this is so flexible and less rigid as you stated, I still see other languages like Java, which is pretty powerful language and OOP based, getting the job done with less messy enviroment and code base; and that's in my opinion the reason why they released the class syntax in ES6. But you did a really good job explaining it, thank you.