diff --git a/_content/BL-1005.md b/_content/BL-1005.md index e168b34..2416bc7 100644 --- a/_content/BL-1005.md +++ b/_content/BL-1005.md @@ -75,7 +75,7 @@ Async/await are special syntax to work with promises in a more comfortable fashi - **async makes a function return a Promise** - **await makes a function wait for a Promise** -### Async +### Async {#Async} ``` Example @@ -89,7 +89,7 @@ async function myFunction() { } ``` -### Await +### Await {#Await} The keyword await makes JavaScript wait until that promise settles and returns its result. The `await keyword` can only be used inside an `async` function. @@ -109,6 +109,33 @@ async function f() { The function execution "pauses" at the line (\*) and resumes when the promise settles, with result becoming its result. +## Implement Promise {#Implement-Promise} + +``` +const pr1 = new Promise((resolve, reject) => { + setTimeout(() => { + resolve("hello"); + }, 4000); +}); + +const pr2 = new Promise((resolve, reject) => { + setTimeout(() => { + resolve("world"); + }, 0); +}); + +const fun = async () => { + try { + const res = await Promise.all([pr1, pr2]); + console.log(res); + } catch (err) { + console.log(err); + } +}; + +fun(); +``` + **References:** - JavaScript Promise Tutorial:- https://www.freecodecamp.org/news/javascript-promise-tutorial-how-to-resolve-or-reject-promises-in-js/ diff --git a/_content/BL-1009.md b/_content/BL-1009.md new file mode 100644 index 0000000..b72621f --- /dev/null +++ b/_content/BL-1009.md @@ -0,0 +1,106 @@ +--- +Id: 1009 +Title: Prototype and Prototypical Inheritance +Author: Soumyajit +Tags: Javascript Interview +Abstract: Understanding And Using Prototype and Prototypical Inheritance in JavaScript +HeaderImage: /BL-1009/header.jpg +isPublished: true +--- + +## Prototype {#Prototype} + +![Prototype](/BL-1009/object-prototype-empty.svg) + +**The prototype is an object that is associated with every functions and objects by default in JavaScript.** + +Whenever we create a function , object or array javacript by default attaches a prototype object to it which contains some additional methods inside it. + +![Prototype](/BL-1009/proto.png) +All JavaScript objects inherit properties and methods from a prototype: + +- Date objects inherit from Date.prototype. +- Array objects inherit from Array.prototype. +- Player objects inherit from Player.prototype. + +- The Object.prototype is on top of the prototype inheritance chain. Date objects, Array objects, and Player objects all inherit from Object.prototype. + +## The Prototype Chain {#The-Prototype-Chain} + +Prototypal inheritance uses the concept of prototype chaining. + +Every object created contains [[Prototype]], which points either to another object or null. + +Example:- +An object C with a [[Prototype]] property that points to object B. Object B’s [[Prototype]] property points to prototype object A. This continues onward, forming a kind of chain called the prototype chain. + +## Prototypal Inheritance {#Prototypal-Inheritance} + +``` +let animal = { + eats: true + walk() { + console.log("Animal walk"); + } +}; + +let rabbit = { + jumps: true + __proto__ = animal; +}; + + +// we can find both properties in rabbit now: +console.log(rabbit.eats ); // true + +rabbit.walk(); // Animal walk + +``` + +![Prototype](/BL-1009/rabbit-animal-object.svg) + +``` +const obj = { + firstName: "sds", + lastName: "bh", + getFullName: function () { + return this.firstName + " " + this.lastName; + } +}; + +const obj2 = { + firstName: "ab", + __proto__: obj +}; + +console.log(obj2.getFullName()); //ab bh +``` + +## Creating own prototype {#Creating-own-prototype} + +Creating Ployfill for bind method + +``` +const obj = { + firstName: "sds", + lastName: "bh" +}; + +function getFullName(state) { + return this.firstName + " " + this.lastName + " " + state; +} + +const fName = getFullName.bind(obj, "rnc"); +console.log(fName()); //sds bh rnc + +Function.prototype.myBind = function (...args) { + const func = this; + const params = args.slice(1); + return function () { + return func.apply(args[0], params); + }; +}; + +const fName2 = getFullName.myBind(obj, "bsh"); +console.log(fName2()); //sds bh bsh +``` diff --git a/public/BL-1009/header.jpg b/public/BL-1009/header.jpg new file mode 100644 index 0000000..7466788 Binary files /dev/null and b/public/BL-1009/header.jpg differ diff --git a/public/BL-1009/object-prototype-empty.svg b/public/BL-1009/object-prototype-empty.svg new file mode 100644 index 0000000..eb79c19 --- /dev/null +++ b/public/BL-1009/object-prototype-empty.svg @@ -0,0 +1 @@ +prototype objectobject[[Prototype]] \ No newline at end of file diff --git a/public/BL-1009/proto.png b/public/BL-1009/proto.png new file mode 100644 index 0000000..3e5b1c0 Binary files /dev/null and b/public/BL-1009/proto.png differ diff --git a/public/BL-1009/rabbit-animal-object.svg b/public/BL-1009/rabbit-animal-object.svg new file mode 100644 index 0000000..32a9858 --- /dev/null +++ b/public/BL-1009/rabbit-animal-object.svg @@ -0,0 +1 @@ +toString: function hasOwnProperty: function ...Object.prototypeanimal[[Prototype]][[Prototype]][[Prototype]]nulleats: truerabbitjumps: true \ No newline at end of file