Difference between revisions of "JavaScript/C4/this-Keyword-in-JS/English"
Pravin1389 (Talk | contribs) |
Nancyvarkey (Talk | contribs) |
||
(One intermediate revision by the same user not shown) | |||
Line 3: | Line 3: | ||
Author: Jayesh Katta Ramalingaiah | Author: Jayesh Katta Ramalingaiah | ||
− | Domain Reviewer: | + | Domain Reviewer: Ankita Maske |
− | Novice Reviewer: | + | Novice Reviewer: Praveeen S. |
Keywords: JavaScript, HTML, this, binding, implicit, explicit, window | Keywords: JavaScript, HTML, this, binding, implicit, explicit, window |
Latest revision as of 11:05, 21 June 2021
Title of the script: this keyword
Author: Jayesh Katta Ramalingaiah
Domain Reviewer: Ankita Maske
Novice Reviewer: Praveeen S.
Keywords: JavaScript, HTML, this, binding, implicit, explicit, window
|
|
Slide: Title | Hello and welcome to the spoken tutorial on “this keyword in JS”. |
Slide:
Learning Objectives |
In this tutorial, we will learn about:
|
Slide: System Specifications | This tutorial is recorded using:
However, you may use any other browser of your choice. |
Slide: Pre-requisites | To practice this tutorial,
|
Slide: Code files |
|
Slide: ‘this’ keyword in JS |
|
Slide: ‘this’ keyword in JS
|
this keyword depends upon binding.
|
Slide: ‘this’ keyword in JS
|
Explicit Binding has 3 methods:
Now, let us take an example for each of those and understand them better. |
Show VS editor | Open Visual Studio Code editor |
[Editor] Welcome Page -> Open Folder -> Practice-JS -> index.html & main.js
|
Then open the files index.html and main.js as explained in the earlier tutorials.
|
[Editor] Type:
<html lang="en"> <head> <title>'this' Keyword</title> </head> <body> <script src="main.js"></script> </body> </html> |
In the index.html file, replace the code as shown.
|
Press: Ctrl + S
|
Save the file and Start the Live server. |
[Firefox] Press Ctrl + Shift + I
|
In the web browser, open the Browser developer tools panel and go to the console tab. |
Switch to Editor | Switch back to the editor. |
[Editor] Type:
console.log(this); |
In the main.js file, replace the code as shown. |
[Editor] Highlight:
|
Here, this refers to a global object.
|
Press: Ctrl + S
Switch to Browser |
Save the file and switch back to the browser. |
[Browser] [Console Tab]:
Highlight:
|
If you see here, ‘this’ keyword refers to a Window object.
|
Switch to Editor | Switch back to the editor. |
[Editor] Type:
console.log(this.name); |
In the main.js file, replace the code as shown. |
[Editor] Highlight:
|
Here, I have declared a variable with the var keyword.
|
[Editor] Highlight:
|
Here, with log this.name I’m logging the value on the console. |
Press: Ctrl + S
Switch to Browser |
Save the file and switch back to the browser. |
[Browser] [Console Tab]:
Highlight:
|
In the console, we see Spoken Tutorials being displayed.
|
Only Narration | Next, let's learn about implicit binding.
|
[Editor] Type:
name: "Jayesh", designation: "Instructor", displayName: function () { console.log(this.name); }, };
|
In the main.js file, replace the code as shown. |
[Editor] Highlight:
name: "Jayesh", designation: "Instructor", displayName: function () { console.log(this.name); }, }; |
Here, I have declared a variable empDetails and assigned an object to it.
|
[Editor] Highlight:
displayName: function () |
The displayName property has an anonymous function. |
[Editor] Highlight:
console.log(this.name); |
I log this.name inside the function.
|
[Editor] Highlight:
|
Here, I’m making a normal function call to execute the anonymous function. |
Press: Ctrl + S
Switch to Browser |
Save the file and switch back to the browser. |
[Browser] [Console Tab]:
Highlight:
|
In the console, we can see that this.name value is Jayesh.
|
Switch to Editor | Switch back to the editor. |
[Editor] Highlight:
empDetails.displayName(); |
Observe this carefully.
In implicit binding, this refers to the variable before the period(.) in the function call.
|
Only Narration | Next, let’s learn about explicit binding. |
[Editor] Type:
name: "Jayesh", };
}
display.call(empDetails, lang[0], lang[1], lang[2]); |
In the main.js file, replace the code as shown. |
[Editor] Highlight:
|
A variable named lang is declared and assigned a string array. |
[Editor] Highlight:
name: "Jayesh", }; |
Then I have declared a variable empDetails and assigned an object to it.
|
[Editor] Highlight:
console.log(`${this.name} knows ${languages}`); } |
Here, I’m declaring a function called display which accepts one parameter that is languages.
|
Only Narration | The scenario here is to execute the display function having empDetails as a context.
|
[Editor] Highlight:
|
To achieve this, we will learn about the call method in explicit binding.
|
[Editor] Highlight:
|
Here, I’m using the same call method and passing the array elements separately.
|
Press: Ctrl + S
Switch to Browser |
Save the file and switch back to the browser.' |
[Browser] [Console Tab]:
Highlight:
|
Here, observe the log carefully.
|
[Browser] [Console Tab]:
Highlight:
|
Similarly, observe here that only the first parameter is taken as languages.
This is because the display function accepts only one parameter. |
Only Narration | Next let’s learn about the ‘bind’ method. |
[Editor] Type:
name: "Jayesh", };
console.log(`${this.name} knows ${languages}`); }
console.log(returnedFn); returnedFn(); |
In the main.js file, replace the code as shown. |
Only Narration | Bind is similar to the call method, with a small change. |
[Editor] Highlight:
name: "Jayesh", };
console.log(`${this.name} knows ${languages}`); } |
I’m using the same variables and the function which were used while explaining the call method.
|
[Editor] Highlight:
|
Here, in the bind method, the first parameter is the context, which this refers to.
|
[Editor] Highlight:
console.log(returnedFn); |
Just to verify what is being returned, I have put a log here. |
[Editor] Highlight:
returnedFn(); |
Then, I’m just executing the returnedFn.
|
Press: Ctrl + S
Switch to Browser |
Save the file and switch to the browser. |
[Browser] [Console Tab]:
function display() |
Here, we can verify that the bind method returns the function which can be executed anywhere. |
[Browser] [Console Tab]:
Highlight:
|
On execution of the returned function, we get a similar output that the call method displays. |
Only Narration | By now, we have understood call and bind methods in explicit binding.
|
[Editor] Type:
name: "Jayesh!", };
console.log(`${this.name} knows ${lan1}, ${lan2} and ${lan3}`); }
|
In the main.js file, replace the code as shown. |
[Editor] Highlight:
name: "Jayesh", }; |
Similar to the previous example, I have declared two variables, lang and empDetails. |
[Editor] Highlight:
console.log(`${this.name} knows ${lan1}, ${lan2} and ${lan3}`); } |
Here, in the display function, I’m passing 3 parameters and logging their values.
|
[Editor] Highlight:
|
Here, I’m using the apply method and the scenario is the same.
|
Press: Ctrl + S
Switch to Browser |
Save the file and switch to the browser. |
[Browser] [Console Tab]:
Highlight:
|
Here, observe the log carefully.
|
Switch to Editor | Switch back to the editor. |
[Editor] Highlight:
console.log(`${this.name} knows ${lan1}, ${lan2} and ${lan3}`); } |
If you notice this closely, the display function has multiple parameters.
|
Only Narration | This is the main difference between call and apply.
|
[Editor] Type:
this.stuName = name; }
|
In the main.js file, replace the code as shown. |
[Editor] Highlight:
this.stuName = name; } |
When you see this, you might be able to recollect the constructor function.
|
[Editor] Highlight:
|
Inside the function, I’ve created a property with the name stuName.
|
[Editor] Highlight:
|
Here, I’m making the function call using new keyword, passing Jayesh as a parameter.
|
[Editor] Highlight:
|
To verify, I’m logging s1 in the console.
|
Press: Ctrl + S
Switch to Browser |
Save the file and switch back to the browser. |
[Browser] [Console Tab]:
Highlight:
|
In the console, we can see that the function has created a new object with property stuName.
|
Only Narration | With this, we have come to the end of this tutorial.
|
Slide: Summary | In this tutorial, we have learnt:
|
Slide: Assignment | As an assignment:
|
Slide: Assignment |
|
Slide: Assignment |
|
Slide: About Spoken Tutorial Project |
|
Slide: Spoken tutorial workshops |
|
Slide: Forum questions | Pls post your timed queries in this forum |
Slide: Acknowledgement | Spoken Tutorial Project is funded by the Ministry of Education (MoE), Government of India |
Slide: Thanks | The script for this tutorial is contributed by Jayesh and this is Praveen signing off. Thank you for joining |