DONATE  
MENU
PHP
HTML
CSS
MYSQL
JAVASCRIPT
JSON
AJAX

JavaScript Tutorials

INTRODUCTION

» Introduction to JavaScript

» Practice IT Editor

» JavaScript Example

» JavaScript Placement

» JavaScript Syntax

» JavaScript Statements

» JavaScript Input

» JavaScript Output

» JavaScript Comments

» JavaScript Variables

» Variables' Scope

» JavaScript Operators

» JS Expressions & Concatenation

» JavaScript Data Type

» JavaScript Numbers

» Number Object

» JavaScript Strings

» String Object

» JavaScript Booleans

» Boolean Object

» JavaScript Functions

» JavaScript Arrays

» Array Object - Properties

» Array Object - Methods

» JavaScript Objects

» JavaScript Undefined

» JavaScript Nulls

CONDITIONAL TESTING

» If Statement

» If Else Statement

» JavaScript Ternary Operator

» Switch Statement

LOOPS

» For Loops

» While Loops

» Break & Continue

» For...In Loops

» do...while Loop

FUNCTIONS

» JavaScript Functions

» Creating Functions

» Functions' Parameters

» Functions' Arguments

» Function Invocation

» The Return Keyword

» The Arguments Object

» Callback Functions

» Arrow Functions

ARRAYS

» JavaScript Arrays

» Creating Arrays

» Accessing Arrays

» Looping Arrays

» Multi - dimensional Arrays

OBJECTS

» JavaScript Objects

» Creating Objects

» Prototype Definition

» Accessing Objects

» The this Keyword

AJAX

» Introduction to AJAX

JSON

» Introduction to JSON

JAVASCRIPT DATES

» The Date Object

» Date Methods

» Timing (SetInterval & SetTimeout)

MATH OBJECT

» Math Object

» Math Methods

HTML / JS DOM

» DOM Introduction

» Accessing HTML Elements in DOM

» Get And Change Elements' Contents & Values

» Change Styling - DOM CSS

» DOM Attributes

» JavaScript Event Listeners

» DOM Event Listeners

» JS Events

MISCELLANEOUS

» JS Strict Mode

» JavaScript Hoisting

» JavaScript let keyword

» Reserved Keywords

» JS Best Practices

» JavaScript vs ECMAScript

JAVASCRIPT EXAMPLES

» JavaScript Calculator

.. » JavaScript » Objects » The this Keyword
Share Tweet WhatsApp

The this Keyword

You must have come across the use of the this keyword in certain JavaScript programs especially when prototypes are being defined or objects being created explicitly.
<input type='text' onkeyup='getText(this.value)'/>
var obj = {
height : 45,
changeHeight : function(newHeight) {
this.height = newHeight;
}
};
function Product(name){
this.name = name;
}
The this keyword simply refers to the object itself. That is, the object or object of the element it is being use with. In the second example above, we can therefore conclude that the usage of the this.height simply means that "the height property of this object should be newHeight". Therefore, the this is referring to the object where the height property exists. You may also view the this keyword from this angle which is, while objects are access by their name outside the object definition, individual objects are access by the this keyword inside the object definition. For example, to access an object property outside the object definition will look like,
objectName.propertyName; //accessing the propertyName property of an object named objectName
An object is access inside its definition as shown below,
var obj = {
this.propertyName = 3; //accessing the propertyName property of an object inside the object
}
EXAMPLES this In Explicit Objects
<script>
    var obj = {
name : "Omamode",
myFunc : function(){
alert(this.name);
alert(name);
}
};

obj.myFunc();
</script>

Copy PRACTICE IT

Above, we created an object which had a property (name) and a method(myFunc). When the method is invoke, it alerts the name property of the object. First, we alerted the property with the this keyword and as you can see, it returns the name property but when we alerted the property name without the this keyword, nothing was returned. This goes to show that you can't access the properties and methods of an object inside the object with just the property or method name alone but rather, with the this keyword. this In Objects' Prototype
<script>
function myObj(name){

this.name = name;

this.myFunc = function(){
alert(this.name);
};

}

var name1 = new myObj("Omamode");
name1.myFunc();
var name2 = new myObj("Joseph");
name2.myFunc();
</script>

Copy PRACTICE IT

The this keyword is always empty when an object prototype is defined but then, immediately, an object is created using the prototype, the this keyword then refers to the new object. this In Event Listeners Event Listeners helps us to listen to various events that can take place on a webpage and assign functions to execute when such events finally happen. For example, when the webpage loads or when a user clicks on a button. When we assign the this keyword as an argument to functions to execute when events take, the value of the this keyword will be the object of the HTML element upon which the event is happening. For example,
<button onclick='myClick(this)'>Click Me</button>

<script>
    
function myClick(myEl){
alert(myEl);
}

</script>

Copy PRACTICE IT

The this keyword in the above click event's function argument will be the DOM/object of the button element. You will learn about HTML DOM in later chapters.
<script>
window.addEventListener("load", function(){
doSomeThing(this);
});

function doSomeThing(myVar){
alert(myVar);
}
</script>

Copy PRACTICE IT

In the above, the window refers to the window or browser object. We are assigning an event listener to the browser object so that it will execute a function immediately the webpage loads on it(the browser). We also passed the this keyword as an argument to the function and you can see in the result, the this contains the object of the window(browser). SUMMARY
  1. The this keyword is usually used with the properties and methods of an object during creation.
  2. Whenever it is used, it simply refers to the object in view.
  3. When used when creating explicit objects. The this refers to the object itself.
  4. When used in defining prototypes, it refers to the individual objects that will be created from that prototype.
  5. When used in assigning function callbacks to event handlers, it refers to the DOM/object of the element the event handler is being assigned to.
Take a short quiz on The this Keyword.
Ask a question or tell us if The this Keyword is easy or not.
cent?

Join our 1,090 subscribers to receive tutorials' updates!

  We won't spam your mail box. We hate it.





StackBeginner 2021 © Joseph Omamode