JavaScript Event

JavaScript “this” Keyword

In JavaScript “this” Keyword, as in most object-oriented programming languages, this is a special keyword that is used within methods to refer to the object on which a method is being invoked. The value of this is determined using a simple series of steps:

  • If the function is invoked using Function.call or Function.apply, this will be set to the first argument passed to call/apply. If the first argument passed to call/apply is null or undefined, this will refer to the global object (which is the window object in Web browsers).
  • If the JavaScript function being invoked was created using Function.bind, this will be the first argument that was passed to bind at the time the function was created.
  • If the function is being invoked as a method of an object, this will refer to that object.
  • Otherwise, the function is being invoked as a standalone function not attached to any object, and this will refer to the global object.

JavaScript function invoked using Function.call

var my Object = {
say Hello : function () {
console. log ( ’ Hi ! My name is ’ + this . my Name );
} ,
my Name : ’ Yaso ’
};
var second Object = {
my Name : ’ Technsaop ’
};
my Object. say Hello (); // logs ’ Hi ! My name is Yaso ’
my Object. say Hello. call ( second Object ); // logs ’ Hi ! My name is Technosap ’

A function created using Function.bind


JavaScript this Keyword

var my Name = ’ the global object ’ ,
say Hello = function () {
console. log ( ’ Hi ! My name is ’ + this . my Name );
} ,
my Object = {
my Name : ’ Technosap ’
};
var my Object Hello = say Hello . bind ( my Object );
say Hello (); // logs ’ Hi ! My name is the global object ’
my Object Hello (); // logs ’ Hi ! My name is Technosap ’

function being attached to an object at runtime

var my Name = ’ the global object ’ ,
say Hello = function () {
console. log ( ’ Hi ! My name is ’ + this . my Name );
} ,
my Object = {
my Name : ’ Yaso ’
} ,
second Object = {
my Name : ’ Technosap ’
};
my Object. say Hello = say Hello ;
second Object . say Hello = say Hello ;
say Hello (); // logs ’ Hi ! My name is the global object ’
my Object . say Hello (); // logs ’ Hi ! My name is Yaso ’
second Object. say Hello (); // logs ’ Hi ! My name is Technosap ’

When invoking function deep within a long namespace, it is often tempting to reduce the amount of code you need to type by storing a reference to the actual function as a single, shorter variable. It is important not to do this with instance methods as this will cause the value of this within the function to change, leading to incorrect code operation.

var my Namespace = {
my Object : {
say Hello : function () {
console. log ( ’ Hi ! My name is ’ + this . my Name );
} ,
my Name : ’ Technosap ’
}
};
var hello = my Namespace. my Object. say Hello ;
hello (); // logs ’ Hi ! My name is undefined ’

You can, however, safely reduce everything up to the object on which the method is invoked:

var my Namespace = {
my Object : {
say Hello : function () {
console. log ( ’ Hi ! My name is ’ + this . my Name );
} ,
my Name : ’ Technosap ’
}
};
var obj = my Namespace. my Object ;
obj . say Hello (); // logs ’ Hi ! My name is Technosap’

In Javascript, property of an object can be method or simple value. When an Object’s method is invoked then JavaScript “this” refers to the object which contains the method being invoked.

Online Training Tutorials

  • JavaScript EventJavaScript EventJavaScript Event : Imagine an interface where the only way to find out whether a key on the keyboard is being pressed is to read the current state of that key. To be able to react to […]
  • JavaScript Node.jsJavaScript Node.jsJavaScript Node.js, a program that allows you to apply your JavaScript skills outside of the browser. With it, you can build anything from small command line tools to HTTP servers that […]
  • JavaScript ScopeJavaScript ScopeJavaScript Scope refers to the variables that are available to a piece of code at a given time. A lack of understanding of scope can lead to frustrating debugging experiences. When a […]
  • JavaScript FunctionJavaScript FunctionThe definition expression defines a JavaScript function, and the value of such an expression is the newly defined function. In a sense, a function definition expression is a “function […]
  • JavaScript User InputJavaScript User InputJavaScript User Input : Clicks are powerful and easy and you can add an on Click event to pretty much any HTML element, but sometimes you need to be able to ask for input from the user and […]
  • JavaScript BooleanJavaScript BooleanJavaScript Boolean, It is often useful to have a value that distinguishes between only two possibilities, like “yes” and “no” or “on” and “off”. For this purpose, JavaScript has Boolean […]
  • JavaScript Interview Questions and AnswersJavaScript Interview Questions and AnswersJavascript is an interpreted language with a C like syntax. While many people brush the language off as nothing more than a browser scripting language, it actually supports many advanced […]
  • JavaScript Comments with ExamplesJavaScript Comments with ExamplesJavascript supports two types of comments (JavaScript Comments). Double-slashes (//) tell javascript to ignore everything to the end of the line. You will see them used most often to […]