Learned about call(), apply() and bind() method, some common mistakes…

… also
sohail019 · Jul 29, 2024 · 4392cf9 · 4392cf9
1 parent af52e4d
commit 4392cf9
Show file tree

Hide file tree

Showing 4 changed files with 131 additions and 0 deletions.
diff --git a/03 - Chai aur Javascript/14 - this Keyword/03_binding_this.js b/03 - Chai aur Javascript/14 - this Keyword/03_binding_this.js
@@ -0,0 +1,21 @@
+// Binding this with call, apply and bind
+
+// JavaScript mein aap this ka value manually set kar sakte hain
+
+// call method
+
+function greet(){
+    console.log(`Hello ${this.name}`);
+}
+
+const person = {name: 'Sohail'}
+greet.call(person) // Hello Sohail
+
+
+// apply method
+greet.apply(person) // Hello Sohail
+
+
+// bind method
+const boundGreet = greet.bind(person)
+boundGreet() // // Hello Sohail
diff --git a/03 - Chai aur Javascript/14 - this Keyword/04_classes_and_methods.js b/03 - Chai aur Javascript/14 - this Keyword/04_classes_and_methods.js
@@ -0,0 +1,17 @@
+// Classes and Methods
+
+class Person{
+    constructor(username){
+        this.username = username
+    }
+
+    greet(){
+        console.log(`Hello ${this.username}`);
+    }
+}
+
+
+const person1 = new Person("Sohail")
+person1.greet() // Hello Sohail
+
+// Is mein greet method 'this.username' ko refer karta hai jo Person class ke instance ki property hai.
diff --git a/03 - Chai aur Javascript/14 - this Keyword/05_common_mistakes.js b/03 - Chai aur Javascript/14 - this Keyword/05_common_mistakes.js
@@ -0,0 +1,63 @@
+// Common mistakes with 'this'
+
+// Loosing Context
+
+const person = {
+    name: 'Sohail',
+    greet: function(){
+
+        setTimeout(function() {
+            console.log(`Hello ${this.name}`);
+        }, 1000);
+    }
+}
+
+person.greet() // Hello undefined
+
+// Solution
+
+const person2 = {
+    name: 'Sohail',
+    greet: function(){
+
+        setTimeout(() => {
+            console.log(`Hello ${this.name}`);
+        }, 1000);
+    }
+}
+
+person2.greet()
+
+
+// Using this in Event listeners
+
+class Button{
+    constructor(element){
+        this.element = element
+        this.element.addEventListener('click', this.handleClick.bind(this))
+    }
+
+    handleClick(){
+        console.log("Button Clicked: ", this.element.id)
+    }
+}
+
+const button = new Button(document.getElementById("myButton")); 
+// Is example mein, handleClick method ko this ke correct context ke saath bind kiya gaya hai using bind method, taaki this.element event ke waqt correct button element ko refer kare.
+
+
+// Using this in Nested functions
+
+const obj = {
+    value: 42,
+    showValue: function(){
+        function innerFunction(){
+            console.log(this.value);
+        }
+        innerFunction.call(this) // 42
+    }
+}
+
+obj.showValue()
+
+// Yahan innerFunction.call(this) ka use context ko explicitly set karne ke liye kiya gaya hai, taaki this obj ko refer kare.
diff --git a/03 - Chai aur Javascript/14 - this Keyword/index.html b/03 - Chai aur Javascript/14 - this Keyword/index.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>this Keyword</title>
+    <link rel="stylesheet" href="../style.css">
+</head>
+<body style="background-color: #212121; color: white">
+    <nav>
+      <a href="../index.html">Home Page</a>
+      <a
+        href="https://github.com/sohail019/Complete-Javascript/tree/main/03%20-%20Chai%20aur%20Javascript/04%20-%20Projects%20for%20DOM"
+        >Github</a
+      >
+    </nav>
+
+    <h1>this Keyword</h1>
+
+    <!-- Event Handler -->
+    <button id="myBtn">Click Me!</button>
+
+    <!-- Common Mistakes -->
+    <button id="myButton">Clicckkkkkkk</button>
+
+    <script src="./01_this.js"></script>
+    <script src="./05_common_mistakes.js"></script>
+</body>
+</html>