Arch  Hessel

Arch Hessel

1615233600

Prototypal inheritance: The Big Secret Behind Classes In JavaScript

People sometimes find it easier to believe a little lie than to spend time trying to understand a complex truth (have you ever seen the matrix movie?). In JavaScript, classes, as we know them from other languages ​​like Java, don’t exist. So how does class inheritance work in JS? In this article, we will find the answers by analyzing what happens behind the scenes.

What is a class?JavaScript is a multi-paradigm language, which means you can write code following different programming styles. Still, the most prominent and used is the Object-Oriented paradigm or OO to friends.In this paradigm, we represent real-world problems through the concepts of objects and classes.

Image for post

#coding #programming #javascript

What is GEEK

Buddha Community

Prototypal inheritance: The Big Secret Behind Classes In JavaScript

JavaScript Prototypes. It Doesn't Have to Be Complicated.

It’s hard to skip prototypes (or the prototype chain or prototypal inheritance) if you want to dive deeper into JS development (Not only pure JS, but also Node.js, Frameworks like Vue.js, React.js, Angular,…).

If you are like me a few years ago and get some serious headache each time you have to deal with prototypes in JavaScript, this will probably be THE article you were looking for to get your head wrapped around the principle of prototypes in JS.

From the  MDN documentation (don’t be scared, we’ll clarify everything below):

When it comes to inheritance, JavaScript only has one construct: objects. Each object has a private property (referred to as [[Prototype]]) which holds a link to another object called its prototype. That prototype object has a prototype of its own, and so on until an object is reached with null as its prototype. By definition, null has no prototype, and acts as the final link in this prototype chain.

Private [[Prototype]] property

Refer back to the below illustration whenever you feel the need, it might help you to wrap your head around this concept easier.

Prototype chain

So let’s start from the base. Every object in JavaScript has a private [[Prototype]] prototype, which holds a reference to another object (or null). This means, that our new object will have access to methods and properties of that referenced object.

#javascript #prototypes #prototypal inheritance #prototype chain

Madilyn  Kihn

Madilyn Kihn

1591242495

Prototypal Inheritance — The second pillar of Javascript

All you need to know about Prototypal Inheritance — The second pillar of Javascript
What we will learn here will help us understand Object-oriented programming(OOP).

#javascript #prototyping #prototype #prototype-chain #js

Private Class Fields and Methods in JavaScript Classes

JavaScript private class fields and methods are new features for JavaScript classes. In this tutorial, you will learn all you need to know about this feature. You will learn about what private methods and class fields are and how they work. You will also learn how to use them in your projects.

Introduction

When you want to add some data to JavaScript class you can do so through class properties. These properties are by default always public. This also means that they are publicly accessible and modifiable. The same also applies to class methods. They are also public by default.

This might often be okay. However, sometimes, you may want to keep some properties or methods private. You may want to make them inaccessible from the outside of the class they are defined in. This is where private methods and class fields can be handy.

Keeping it private

The idea of keeping some things private is simple and straightforward. When you want to keep something private, be it a property or method, it should be accessible only from one place. This place is the class in which you defined that property or method.

If you try to access private class field or method from elsewhere JavaScript should not allow it. This includes outside the class in which the class field or method is defined. Also any instance of that class. However, it is possible to access private class field from a method inside the same class.

#javascript #javascript classes #javascript private class

Brief prototypical inheritance vs classical inheritance in Javascript

You have probably heard of the terms prototypical inheritance and classical inheritance a lot. But what do they actually mean?

Before digging into these inheritance definitions, you need to understand what are prototypes and classes are in javascript.

A Prototype is an object that contains a list of methods and fields that are accessible by default.

Let’s take indexOf method from string for example. We never defined it but yet anytime we want to access this method from any string, we can do it.

#javascript #prototype #es5 #es6 #class

Prototype and Inheritance in JavaScript

In brushing up on my foundational JavaScript knowledge, I realized that I had never done a deep-dive on prototype. In the early days of my learning JavaScript, I had come across the __proto__ object property in the console. I clicked on it, saw a whole bunch of properties that I was not immediately concerned with, and made a mental note to someday investigate. Today is that day, and it turns out that I really should have investigated sooner as prototype is key to understanding how object properties are passed down to other instances of that object. Having learned JavaScript after becoming comfortable with the class-based nature of Ruby, an understanding of prototype would have cleared up some confusion around the differences between inheritance in the two languages.

While ES6 saw the introduction of the class keyword in an attempt to make JavaScript appear more object-oriented, it is merely syntactic sugar. JavaScript at its heart is a prototype-based language. In my experience, I think this made it easy to take this syntactic sugar at face value, draw parallels to Ruby classes, and not delve deeper into the differences. And while this may make JavaScript more accessible to those familiar with class-based languages, it may mask the true nature of how inheritance in JavaScript occurs.

Introduction to Inheritance in JavaScript

When we discuss inheritance in JavaScript we are talking about objects. Each object has a private property that connects it to its prototype (another object). Each prototype has its own prototype and the chain continues until we come to an object containing null as its prototype. As null represents nothing, it has no prototype and is the end of the prototype chain. All objects created in JavaScript are themselves instance of Object and therefore have their own prototype chains descending from Object.

Inheriting Properties with Prototype

JavaScript objects are dynamic and include a set of properties (termed own properties). They also are linked to a prototype object, which is linked to a prototype object and so on. When we attempt to access an object’s property, the property will be searched for on the object, then the prototype of the object and all the way along the prototype chain until the property is found or we reach null on the chain. To illustrate:

let f = function() {
    this.a = 1;
    this.b = 2;
}
let o = new f();
f.prototype.b = 3;
f.prototype.c = 4;
console.log(o.a); // 1
console.log(o.b); // 2
console.log(o.c); // 4
console.log(o.d); // undefined

To begin, we create a function, f, with properties of a=1 and b=2. We then create an object, o, from f. Next, we add properties to the prototype of f, creating a new property c=4 and updating b to equal 3. When we log the properties of our object, o, we are presented with the commented out results. The property of a is 1, as expected. The property of b is 2 because we look first on o to see if there is a b property. There is and its value is 2. We therefore never make it up the prototype chain to f where the value of b is 3. This is known as Property Shadowing. For the case of c, we look to o for a c property and do not find one, leading us up to f where the property of c is found to equal 4. Finally, we are searching for the property of d which is not a property of o and neither is it a property of f. We go all the way along the prototype chain to null without finding d and thus undefined is the result.

#inheritance #web-development #prototype #javascript