Joel Kelly

Joel Kelly

1573183740

Understanding JavaScript's Prototype-Based Inheritance

JavaScript uses prototype-based inheritance, which is slightly different than inheritance in other languages. Suppose you create a new vanilla JavaScript object:

const obj = new Object();

obj instanceof Object; // true
obj.constructor === Object; // true

The instanceof operator tells you whether a given object is an instance of a given JavaScript class. You can also use instanceof with your own custom class:

class MyClass {}

const obj = new MyClass();

obj instanceof MyClass; // true
obj instanceof Object; // true

obj.constructor === MyClass; // true

The prototype Property

In JavaScript, every class has a prototype property. A class’ prototype is an object. For example, MyClass.prototype is an object:

MyClass.prototype; // MyClass {}

JavaScript has a built-in Object.getPrototypeOf() function that lets you get the prototype of an object.

const obj = new MyClass();

Object.getPrototypeOf(obj) === MyClass.prototype; // true

In JavaScript, checking if an object obj is an instance of a given class C (excluding inheritance) is equivalent to checking if Obj.getPrototypeOf(obj) === C.prototype.

#javascript #programming #developer

What is GEEK

Buddha Community

Understanding JavaScript's Prototype-Based Inheritance

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

Niraj Kafle

1589255577

The essential JavaScript concepts that you should understand

As a JavaScript developer of any level, you need to understand its foundational concepts and some of the new ideas that help us developing code. In this article, we are going to review 16 basic concepts. So without further ado, let’s get to it.

#javascript-interview #javascript-development #javascript-fundamental #javascript #javascript-tips

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

1622207074

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!");
</script>

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"); */

</script>

Advantages and Disadvantages of JavaScript

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