How to override this object in JavaScript

This how-to article will guide you how to assign the special object - this in the JavaScript programming language. This article will show you the reason that we can not use the normal method (= operator) to assign this this object, and the solutions for this problem. Generally, this article is worth to read if you want to understand more about object-oriented programming in JavaScript.


Sampled by © JavaScriptBank.com

Have you ever experience a time when the calling object ‘this’ needed to be override and somehow you just couldn’t do that? You tried left hand assignment but it just won’t work? wondering how can ‘this’ object be overridden in JavaScript but can’t find the correct answer on Google? This article will explain how this can be done.

Left hand assignment

Ever tried left hand assignment to override ‘this’ object?

var obj = document.getElementById("button");
this = obj

It will fail and gives you ‘invalid assignment left-hand side‘.

Using Call() to override ‘this’ object

There is a function in JavaScript, Call() which can help you override ‘this’ object or specify the ‘this’ object. Let’s consider the following example,

function example(a,b)
{
	this.value == 'button'?alert(a):alert(b);
}
var textobj = document.getElementById('input_relink');
example.call(textobj, 'It is a button!', 'It is not a button');

We look at a text box and check whether the user key in ‘button’. But we uses ‘this’ object to verify the input text in the function example which takes in two parameter as shown above. The Call() method is used whenever you wish to override ‘this’ object which is placed at the first parameter and the rest of the parameter will be exactly the same as the method parameter. Hence, we used the function in this way for the above example because it has two parameter.

//override 'this' with object 'textobj'
example.call(textobj, 'It is a button!', 'It is not a button');

If we have another function which takes in 3 parameter, we will do this.

function example(a,b, c)
{
	this.value == 'button'?alert(a):alert(b);
	alert(c);
}
var textobj = document.getElementById('input_relink');
example.call(textobj, 'It is a button!', 'It is not a button', 'Completed');

You can also used it without parameter like the one illustrated below,

var o = { x: 15 };
function f()
{
    alert(this.x);
}
f.call(o);

Using Call() method restrict your variable given on the method. On the other hand, we can use another method Apply() which override the ‘this’ object giving the second parameter as an array.

Using Apply() method to override ‘this’ object

The difference between call and apply method is the parameter needed to use them. For Call() method it depends on the parameter of the function as shown above. But for Apply() method it can have more than the amount of parameter in the function (since it takes in an array). Similarly, the first parameter of both methods are used to override ‘this’ object. Let’s consider the following example,

var o = { x: 8 };
function example()
{
    // arguments[0] == object
	var sum = 0;
    for(var i = 1; i < arguments.length; i++)
    {
       sum+=arguments[i]
    }
	alert(sum+ this.x);
}
example.apply(o, 1, 2, 3, 4)

I am using the depreciated argument array to look through the argument being passed into the function, sum them up, alert to the user. Similarly, i can do this using an array.

var o = { x: 8 };
function example(a, b, c)
{
	alert(this.x+a+b+c);
}
example.apply(o, [1,2,3])

Pretty simple isn’t it?

Language
Translate this page to English Translate this page to French Translate this page to Vietnamese

Recent articles
The Possible Working Methods of Python Ideology
JavaScript Research Paper: 6 Writing Tips to Craft a Masterpiece
Learning How to Make Use of New Marketing Trends
5 Important Elements of an E-commerce Website
How To Create A Successful Prototype For Your PCB
WordPress Landing Page Conversion Essentials to Convert More
4 Development Hacks To Make Your Website Launch A Success
Why Data Recovery Software and Services are Important
Why Engineers Specializing in DevOps Are the Wave of the Future
The Ultimate Checklist for HTTP to HTTPS Migration


Top view articles
65 Free JavaScript Photo Gallery Solutions
Top 10 Beautiful Christmas Countdown Timers
Best Free Linux Web Programming Editors
Top 50 Most Addictive and Popular Facebook mini games
Top 10 Free Web Chat box Plug-ins and Add-ons
50+ Beautiful Resources of HTML Form using CSS and JavaScript
Top 10 Best JavaScript eBooks that Beginners should Learn
The Ultimate JavaScript Tutorial in Web Design
HTML5 Web Workers Multithreading in JavaScript
Learn more about JavaScript Inheritance with Tiny JavaScript Example Codes


Free JavaScript Tutorials & Articles
at www.JavaScriptBank.com