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
How to open a car sharing service
Vue developer as a vital part of every software team
Vue.js developers: hire them, use them and get ahead of the competition
3 Reasons Why Java is so Popular
Migrate to Angular: why and how you should do it
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


Top view articles
Top 10 Beautiful Christmas Countdown Timers
65 Free JavaScript Photo Gallery Solutions
Adding JavaScript to WordPress Effectively with JavaScript Localization feature
Best Free Linux Web Programming Editors
16 Free Code Syntax Highlighters by Javascript For Better Programming
Top 10 Best JavaScript eBooks that Beginners should Learn
Top 50 Most Addictive and Popular Facebook mini games
More 30 Excellent JavaScript/AJAX based Photo Galleries to Boost your Sites
Top 10 Free Web Chat box Plug-ins and Add-ons
The Ultimate JavaScript Tutorial in Web Design


Free JavaScript Tutorials & Articles
at www.JavaScriptBank.com