Americas
Europe
Delve into the intricate world of Javascript with a focus on the crucial 'This' keyword. Grasp its definition, role, and importance in computer programming. Acquaint yourself with its application, its interaction with Javascript arrow functions, and its use in Javascript classes. Engage with practical examples, learn about the distinct syntax, and understand the application of call and apply methods. Embark on this comprehensive journey to demystify the fundamental concept of 'Javascript This Keyword'.
Explore our app and discover over 50 million learning materials for free.
Lerne mit deinen Freunden und bleibe auf dem richtigen Kurs mit deinen persönlichen Lernstatistiken
Jetzt kostenlos anmeldenDelve into the intricate world of Javascript with a focus on the crucial 'This' keyword. Grasp its definition, role, and importance in computer programming. Acquaint yourself with its application, its interaction with Javascript arrow functions, and its use in Javascript classes. Engage with practical examples, learn about the distinct syntax, and understand the application of call and apply methods. Embark on this comprehensive journey to demystify the fundamental concept of 'Javascript This Keyword'.
When exploring the fascinating world of computer science, particularly JavaScript, you will invariably come across the This keyword. Essentially a reference variable, 'This' is a pivotal part of Javascript function scope and object-oriented programming.
The 'This' keyword is a fundamental part of Javascript, which, in the context of an execution scope, refers to the object that the function is a property of. In simpler terms, 'This' under Javascript usually means the 'owner' of the function, or the object that a function is a method of, or the current context.
The value of 'This' is always determined by its execution context. It can't be set manually, it will always point to an object, and that object might not always be what you expect. Here's a simple example:
Explanations 
Exams 
Magazine 
let object = {
greeting: 'Hello, ',
speak() {
return this.greeting + 'world!';
}
}
console.log(object.speak()); // returns 'Hello, world!'.
In this example, 'This' inside the speak() method refers to the object. Hence, 'this.greeting' retrieves the greeting property of the object.
In JavaScript, 'This' plays a crucial role by providing a function with a dynamic way to access the context in which it's currently being executed. This is very beneficial when you're working with object-oriented programming or when you wish to access the properties within a method of an object.
Let’s consider another example to illustrate the role of this keyword:
let student = {
firstName: 'John',
lastName: 'Doe',
getFullName: function(){
return this.firstName + " " + this.lastName;
}
}
console.log(student.getFullName()); // returns 'John Doe'.
Here, 'this.firstName' retrieves the firstName property of the student object and 'this.lastName' fetches the lastName property of the student object.
The This keyword is a fundamental aspect of many programming languages, not just JavaScript. 'This' enables methods to access the objects they belong to, providing us with capabilities to write more flexible and re-usable code.
Unknown to many, 'This' keyword is a key player in event handling in JavaScript. The power of 'This' keyword comes to light when handling events where it represents the element that fired an event, providing useful information about the event context.
Employing the 'this' keyword can often lead to more concise and readable code, as you can refer to properties and methods of the current object without needing to know its name:
let car = {
speed: 0,
accelerate: function(amount) {
this.speed += amount;
}
}
car.accelerate(10);
console.log(car.speed); // returns 10.
Here, 'this.speed' refers to the speed property of the car object, allowing flexible manipulation without directly referring to the car by name.
Having understood what 'This' keyword is in the world of JavaScript, it's now time to delve deeper into its applications. How do you use this incredibly versatile tool to maximise your coding potential? Let's explore!
The 'This' keyword's main applications lie in object constructors, prototype methods, and object methods. The value of 'This' remains initially undefined until a function where it is defined executes. Here's a basic summary:
The context in which the code is running determines the value of 'This'. Think of it as the subject of the context - very similar to how 'I' is used in English. Here's a practical example to describe the behaviour:
function globalCheck(){
return this;
}
console.log(globalCheck()); //returns the global Window object.
In this case, the function is executed in a global context, hence 'This' refers to the window object.
To effectively use the 'This' keyword in your JavaScript undertakings, here's a detailed guide to three specific scenarios where 'This' shows its true potential: Object Methods, Constructor Functions, and Prototypal Inheritance.
| Scenario | Description with Example |
| Object Methods |
let person = {
name: 'Alice',
greet: function() {
console.log('Hi, ' + this.name);
}
}
person.greet(); //returns 'Hi, Alice'.
In this scenario, 'This' within the method greet refers to the object person. Therefore, 'this.name' corresponds to the name property of the person object. |
| Constructor Functions |
function Person(name) {
this.name = name;
this.greet = function() {
console.log('Hi, ' + this.name);
}
}
let bob = new Person('Bob');
bob.greet(); //returns 'Hi, Bob'.
Under this case, 'This' within the function Person holds a link to the object created by the new keyword. Therefore 'this.name' defines a name property on the new object. |
| Prototypal Inheritance |
function Person(name) {
this.name = name;
}
Person.prototype.greet = function() {
console.log('Hi, ' + this.name);
}
let charlie = new Person('Charlie');
charlie.greet(); //returns 'Hi, Charlie'.
In this instance, 'This' within the prototype method greet is linked to the object it's called upon, leading to 'this.name' corresponding to the name property of the calling object. |
In conclusion, the semantics of 'This' in Javascript cater to the various scopes and contexts that a function can execute within, providing a versatile and robust tool for programming any task.
An innovative concept introduced with ES6, arrow functions are a concise syntax for writing function expressions in JavaScript. They are anonymous and change the way 'This' binds in functions. Arrow functions are syntactically similar to regular ones, but the key difference lies in the context-specific behaviour of 'This' keyword.
In regular JavaScript functions, every new function defines its own 'This' value based on how the function is called. However, arrow functions are designed to behave differently. Rather than establishing their own 'This' context, arrow functions instead capture the 'This' context of the enclosing lexical context; in other words, they 'inherit' the 'This' context from their parent.
let car = {
speed: 0,
accelerate: function (amount) {
setTimeout(() => {
this.speed += amount;
console.log(this.speed);
}, 1000);
}
};
car.accelerate(10); // prints 10.
In this example, 'This' inside the arrow function used for the setTimeout callback refers to the car object, which is enclosing the scope of this function. Unlike regular functions, the 'This' context does not change because of the setTimeout. Please note again, arrow function does not create its own 'This', it captures the 'This' context from its parent scope.
This context inheritance discussed above is actually a very useful feature of arrow function, as it saves from dealing with unexpected 'This' value in callbacks and reduces the use of 'bind()' or 'self = this' phrases.
A key thing to remember is that
Therefore, you should keep in mind that if you’re trying to apply '.call()', '.apply()', '.bind()' to an Arrow function and pass a new 'This' context, it simply won’t work.
let speed = function () {
return this.isFast ? 'fast' : 'slow';
};
console.log(speed.call({isFast: true})); // prints 'fast'.
In this example, 'This' inside the speed function refers to the object passed in by using call. However, if speed is an arrow function, the following will occur:
let speed = () => this.isFast ? 'fast' : 'slow';
console.log(speed.call({isFast: true})); // ReferenceError: isFast is not defined.
Here, 'This' inside speed function remains at its Lexical scope and is not influenced by call method, resulting in an error message because 'isFast' is not defined in the global context.
Below is a detailed exploration of how 'This' behaves differently in Arrow Functions as compared to regular function expressions when it comes to various scenarios:
In conclusion, while Arrow functions offer more concise syntax and fix some JavaScript quirks, they also have distinct characteristics pertaining to 'This' keyword, which you need to be mindful of when designing your JavaScript applications.
Familiarity with 'This' keyword can be a major game-changer when working with classes in JavaScript. It is a special keyword that represents the context in which current code is executing, for example, it can represent an object that invoked the current method or a new instance of a class among other things.
In JavaScript classes, 'This' keyword is fundamentally used to access and manipulate properties of an instance of the class within the class methods. In other words, it represents an instance of the class where it’s currently being used.
'This' essentially provides class methods with a way to refer to the object for which the method is called, even though it is unknown at the time the class or method is defined. 'This' is automatically set when a new instance of the class is created and a method is called on it.
Typically, when using the class to create objects, 'This' is assigned the new object being made. By using 'This' keyword you’re able to set or change properties on the object, as well as access them for some computation or processing.
To illustrate, consider a simple 'Person' class:
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
greet() {
console.log(`Hello, my name is ${this.name}.`);
}
}
In the Person class, the constructor function assigns the name and age arguments to the 'This' keyword so that these properties are set on objects created from the Person class. 'This' inside class methods refers to the instance that the method has been called on.
In the greet method, 'This' is once again used, this time to refer to the name of the person object being greeted. So if we create a new person and call greet:
let john = new Person('John', 25);
john.greet(); // prints 'Hello, my name is John.'
'This' keyword is referring to the 'john' instance of the 'Person' class, and retrieves the 'name' property of 'john'.
Here are some more concrete examples of how the 'This' keyword can be used in JavaScript Classes:
class Car {
constructor(brand) {
this.carName = brand;
}
present() {
return 'I have a ' + this.carName;
}
}
let myCar = new Car("Ford");
console.log(myCar.present()); // prints 'I have a Ford'
class Animal {
constructor(type, name) {
this.type = type;
this.name = name;
}
introduce() {
console.log(`Hello, I am a ${this.type} and my name is ${this.name}.`);
}
}
let myPet = new Animal('Dog', 'Bruno');
myPet.introduce(); // prints 'Hello, I am a Dog and my name is Bruno.'
In both examples, 'This' keyword is used within class methods to reference properties of the class instances (myCar and myPet). The methods then manipulate the referenced properties for some computation; in this case, generating a descriptive message.
Working with JavaScript classes, understanding and mastering 'This' keyword is absolutely crucial. However, understanding 'This' doesn't stop at classes. It’s useful when dealing with regular functions, event handlers and even array methods. It offers a more flexible and effective way to access properties and methods of objects, enhancing the potential of your code.
The 'This' keyword in JavaScript possesses critical value in the realm of object-oriented programming. It enables methods to access the objects that invoked them, and consequently increases the efficiency and readability of the code. Let's look at 'This' keyword in more detail, exploring prime examples and understanding its syntax.
'This' keyword finds its main use in accessing properties of an object within its method. When 'This' is used inside an object method, it references the 'owner' of the method.
For illustrating this, let's consider an object representing a person, with properties 'firstName' and 'lastName' and a method 'fullName' that combines these properties:
let person = {
firstName: "John",
lastName: "Doe",
fullName: function() {
return this.firstName + " " + this.lastName;
}
}
In the above example, 'This' inside the 'fullName' function refers to the 'person' object. It accesses the 'firstName' and 'lastName' properties of the 'person' object and concatenates them to generate a string representing the full name.
Additionally, 'This' keyword can be used with the new keyword to create new objects:
function Person(first, last) {
this.firstName = first;
this.lastName = last;
}
let myFather = new Person("John", "Doe");
In this case, 'This' refers to the newly created object. Thus, when the function 'Person' is invoked with 'new', the 'This' inside 'Person' is bound to the newborn object. As a result, 'myFather' becomes an instance of 'Person' with 'first' and 'last' properties.
'This' keyword is not declared. It is automatically defined by the JavaScript runtime environment and is accessible inside all functions (though how it behaves in arrow functions differs from standard functions). The syntax is as simple as invoking it using "this" in your code.
You can access an object's property using the "this" keyword followed by a dot (.) and the property name:
let dog = {
name: "Max",
getDescription: function() {
return "The dog's name is " + this.name;
}
};
Both 'call' and 'apply' are pre-defined JavaScript methods that fundamentally allow you to write a method that can be used on different objects, without needing to write the entire method for each object individually.
These functions can be used to set the value of 'This' explicitly and call a function with an owner object as an argument (parameter).
Here are some basic utilisations:
let person1 = {fullName: function() {return this.firstName + " " + this.lastName}};
let person2 = {firstName:"John", lastName: "Doe"};
person1.fullName.call(person2); // Returns "John Doe"
The call() method is a predefined JavaScript method. It can be used to invoke a function with a given 'This' value and arguments provided explicitly.
It takes arguments as follows:
call([thisArg[, arg1, arg2, ...argN]] )
The 'thisArg' is an argument that will replace 'This' inside the called function, whereas 'arg1, arg2, ...argN' will be arguments for the function being executed.
An example:
function Product(name, price) {
this.name = name;
this.price = price;
}
function Toy(name, price) {
Product.call(this, name, price);
this.category = 'toy';
}
let jumper = new Toy('jumper', 29.99);
console.log(jumper); // Outputs: {name: "jumper", price: 29.99, category: "toy"}
The apply() method is quite similar to call(), with a noteworthy difference that apply() accepts a single array of arguments, unlike call() which takes a list of arguments.
This method calls a function with a given 'This' value, and arguments provided as an array (or an array-like object).
Here is its general syntax:
apply([thisArg[, argsArray]] )
An example would be:
let numbers = [5, 6, 2, 3, 7]; let max = Math.max.apply(null, numbers); console.log(max); // Outputs: 7
In this example, apply() is used with 'This' keyword set to null and 'numbers' array as arguments to find the maximum number in the 'numbers' array.
YOUR SCORE
Your score:
Already have an account? Log in
SIGNUP SIGNUPFlashcards in Javascript This Keyword15
Start learningWhat is the 'This' keyword in Javascript?
In Javascript, the 'This' keyword refers to the object that a function is a property of. It is the 'owner' of the function or the object that a function is a method of, or the current context. It's a dynamic way to access the context in which a function is executed.
How does the 'This' keyword work in Javascript?
The value of 'This' keyword in Javascript is determined by its execution context. It always points to an object in this context, enabling access to its properties. For instance, 'this.greeting' retrieves the 'greeting' property of the object being referred to.
What is the role of the 'This' keyword in computer programming more generally?
The 'This' keyword is a fundamental aspect of many programming languages, not just in Javascript. It enables methods to access the objects they belong to, aiding in writing flexible, re-usable code and making code concise and readable.
What does the 'This' keyword refer to when a function operates globally in JavaScript?
When a function operates globally, 'This' refers to the global object.
In JavaScript, what does 'This' refer to when it's used inside an object method?
In an object method, 'This' refers to the object it is part of. 'This' corresponds to the property of the object it is referenced within.
What does 'This' refer to within a constructor function in JavaScript?
Within a constructor function, 'This' holds a link to the object created by the 'new' keyword.
Already have an account? Log in
Open in AppHow would you like to learn this content?
How would you like to learn this content?
Free computer-science cheat sheet!
Everything you need to know on . A perfect summary so you can easily remember everything.
The first learning app that truly has everything you need to ace your exams in one place
Sign up to highlight and take notes. It’s 100% free.
Save explanations to your personalised space and access them anytime, anywhere!
Sign up with Email Sign up with AppleBy signing up, you agree to the Terms and Conditions and the Privacy Policy of StudySmarter.
Already have an account? Log in
