Madilyn  Kihn

Madilyn Kihn


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

What is GEEK

Buddha Community

Prototypal Inheritance — The second pillar of Javascript
Madilyn  Kihn

Madilyn Kihn


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

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

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

Rahul Jangid


What is JavaScript - Stackfindover - Blog

Who invented JavaScript, how it works, as we have given information about Programming language in our previous article ( What is PHP ), but today we will talk about what is JavaScript, why JavaScript is used The Answers to all such questions and much other information about JavaScript, you are going to get here today. Hope this information will work for you.

Who invented JavaScript?

JavaScript language was invented by Brendan Eich in 1995. JavaScript is inspired by Java Programming Language. The first name of JavaScript was Mocha which was named by Marc Andreessen, Marc Andreessen is the founder of Netscape and in the same year Mocha was renamed LiveScript, and later in December 1995, it was renamed JavaScript which is still in trend.

What is JavaScript?

JavaScript is a client-side scripting language used with HTML (Hypertext Markup Language). JavaScript is an Interpreted / Oriented language called JS in programming language JavaScript code can be run on any normal web browser. To run the code of JavaScript, we have to enable JavaScript of Web Browser. But some web browsers already have JavaScript enabled.

Today almost all websites are using it as web technology, mind is that there is maximum scope in JavaScript in the coming time, so if you want to become a programmer, then you can be very beneficial to learn JavaScript.

JavaScript Hello World Program

In JavaScript, ‘document.write‘ is used to represent a string on a browser.

<script type="text/javascript">
	document.write("Hello World!");

How to comment JavaScript code?

  • For single line comment in JavaScript we have to use // (double slashes)
  • For multiple line comments we have to use / * – – * /
<script type="text/javascript">

//single line comment

/* document.write("Hello"); */


Advantages and Disadvantages of JavaScript

#javascript #javascript code #javascript hello world #what is javascript #who invented javascript

Coy  Roberts

Coy Roberts


Objects, [[Prototype]] and Prototypal Inheritance in JavaScript

Prototypal inheritance is one of the topics in programming every developer should know. This tutorial will help you learn what prototypal inheritance is, how it works and how to use it. You will learn about [[Prototype]]__proto__, how to change prototypes and much much more.

Creating, inheriting and re-usability

Knowing how to create objects is useful. It can help you do more things, often in better way. However, creating objects from scratch may not always be the best thing to do. The problem is that this practice can lead to repeated code. What you can do instead is create a base object.

This base object will contain universal properties and methods you may want in other objects. Later, let’s say you want to create an object that will use any of these properties or methods. You don’t have to write all those properties and methods from scratch. Instead, you can let that new object inherit from the base object.

When you do this, that new object will be able to use any property and method that exists in the base object. This is not everything you can do, yet. You can also add additional properties and methods only to that new object. After this, the base object will still be the same.

That new object, however, will not only be able to use anything from the base object. It will also be able to use anything new you’ve just added. This degree of re-usability can help you make your code much shorter, clearer and cleaner. This is how prototypal inheritance can help you.

The [[Prototype]] property

The fundamental part of prototypal inheritance is the [[Prototype]] property. This is a special hidden property that exists on every object in JavaScript. The value of this property is always either null or name of another object. When the value of [[Prototype]] is null it means that the object doesn’t inherit from any other object.

When the value is a name of another object it means that the object’s prototype references another object. Put simply, that object inherits from another object, whose name is specified in [[Prototype]]. When this happens, the inheriting object can use any property and method from the object it inherits from.

#javascript #prototypal inheritance