JavaScript 'this' keyword
The 'this' keyword is one of the most confusing and misunderstood parts of JavaScript. The 'this' keyword behaves differently in JavaScript compared to other language. In Object Oriented languages , the 'this' keyword refers to the current instance of the class. In JavaScript the value of this is determined mostly by the invocation context of function and where it is called. In most cases, the value of this is determined by how a function is called. It can't be set by assignment during execution, and it may be different each time the function is called.Global Scope
When you use 'this' keyword in global context, it is bound to global object (window in browser)
document.write(this); //[object Window]
When you use this inside a function defined in the global context , this is still bound to global object since the function is actually made a method of global context.
function foo(){
return this;
}
document.write(foo()); //[object Window]
Above foo is made a method of global object.
Calling a Function
The 'this' keyword remains the global object if you're calling a function.
window.meGlobal = "I'm the window object";
function foo() {
alert(this.meGlobal); // I'm the window object
alert(window === this); // true
}
foo();
Inside constructor function
When the function is used as a constructor (that is when it is called with new keyword), this inside function body points to the new object being constructed.
var globalVar = "I am Global";
function callMe()
{
this.globalVar = "inside function";
}
var obj1 = new callMe(); //adds globalVar to obj1
document.write(obj1.globalVar); //call me
Related Topics
- JavaScript Interview Questions (Part2)
- JavaScript Interview Questions (Part3)
- Is JavaScript a true OOP language?
- Advantages and Disadvantages of JavaScript
- Difference Between JavaScript and ECMAScript?
- What is noscript tag?
- Escaping Special Characters in JavaScript
- What is undefined x 1 in JavaScript?
- JavaScript : Logical Operators
- Difference between '=', '==' and '===' operators?
- How to reload a page using JavaScript?
- How to write html code dynamically using JavaScript?
- How to add html elements dynamically with JavaScript?
- How to load another html page from javascript?
- What Is The Disadvantages Using InnerHTML In JavaScript?
- What is Browser Object Model
- How to detect the OS on the client machine in JavaScript?
- Difference between window, document, and screen in Javascript?
- Difference between the substr() and substring() in JavaScript?
- How to replace all occurrences of a string in JavaScript?
- How to test a string as a literal and as an object ?
- What is Associative Array? How do we use it?
- What is an anonymous function in JavaScript?
- What is the use of 'bind' method in JavaScript?
- Pure functions Vs. Impure functions in javascript
- Is Javascript a Functional Programming Language?
- What's the Difference Between Class and Prototypal Inheritance?
- Javascript, Pass by Value or Pass by Reference?
- How to prevent modification of an object in Javascript?
- How Does Function Hoisting Work in JavaScript?
- What do mean by NULL in Javascript?
- What does the delete operator do in JavaScript?
- What is the Infinity property used for in Javascript?
- Event bubbling and Event Capturing in JavScript?
- What is "strict mode" and how is it used in JavaScript?
- What is the difference between .call() and .apply()?
- Entire content of a JavaScript source file in a function block?
- What is an immediately-invoked function expression?
- What is escape & unescape String functions in JavaScript?
- What is the instanceof operator in JavaScript?
- What Are RESTful (REpresentational State Transfer)Web Services?
- What is Unobtrusive JavaScript & Why it's Important?
- What Does JavaScript Void(0) Mean?
- What are JavaScript Cookies?
- Difference between Client side JavaScript and Server side JavaScript
- TypeError: document.getelementbyid(...) is null
- Uncaught TypeError: Cannot read property of undefined In JavaScript
- What's the difference between Null and Undefined?