google+javascriptbanktwitter@js_bankfacebook@jsbankrss@jsbank
Guest, register






JavaScript this Object: Tutorials and Examples This JavaScript article tutorial guides you a full completed instructions and JavaScript code examples to use this JavaScript object. You can learn many basic JavaScript knowledges such as scope, call a function/method, etc.

Please go to the full post page for all details or read other related JavaScript tutorials:
- JavaScript Objects: Compare and Clone
- Let Get Started Object-Oriented Programming JavaScript
- Object JavaScript Test Quiz
- Simple Concepts about Types and Objects in JavaScript OOP
- Object Oriented JavaScript Techniques


Label: JavaScript this Object, this JavaScript object, JavaScript knowledge

Free iPage Web Hosting for First Year NOW



If you're still looking for a reliable web host provider with affordable rates, why you don't take a little of time to try iPage, only with $1.89/month, included $500+ Free Extra Credits for the payment of 24 months ($45)?

Over 1,000,000+ existisng customers can not be wrong, definitely you're not, too! More important, when you register the web hosting at iPage through our link, we're going to be happy for resending a full refund to you. That's awesome! You should try iPage web hosting for FREE now! And contact us for anything you need to know about iPage.
Try iPage for FREE First Year NOW

JavaScript is a great programming language. That would have been a controversial statement a few years ago, but developers have rediscovered its beauty and elegance. If you dislike JavaScript, it’s probably because:

  • You’ve encountered browser API differences or problems — which isn’t really JavaScript’s fault.
  • You’re comparing it to a class-based language such as C++, C# or Java — and JavaScript doesn’t behave in the way you expect.

One of the most confusing concepts is the ‘this’ keyword. In most languages, ‘this’ is a reference to the current object instantiated by the class. In JavaScript, ‘this’ normally refers to the object which ‘owns’ the method, but it depends on how a function is called.

Global Scope

If there’s no current object, ‘this’ refers to the global object. In a web browser, that’s ‘window’ — the top-level object which represents the document, location, history and a few other useful properties and methods.



window.WhoAmI = "I'm the window object";
alert(window.WhoAmI);
alert(this.WhoAmI); // I'm the window object
alert(window === this); // true

Calling a Function

‘this’ remains the global object if you’re calling a function:


window.WhoAmI = "I'm the window object";
function TestThis() {
	alert(this.WhoAmI); // I'm the window object
	alert(window === this); // true
}
TestThis();

Calling Object Methods

When calling an object constructor or any of its methods, ‘this’ refers to the instance of the object — much like any class-based language:


window.WhoAmI = "I'm the window object";
function Test() {
	this.WhoAmI = "I'm the Test object";
	this.Check1 = function() {
		alert(this.WhoAmI); // I'm the Test object
	};
}
Test.prototype.Check2 = function() {
	alert(this.WhoAmI); // I'm the Test object
};
var t = new Test();
t.Check1();
t.Check2();

Using Call or Apply

In essence, call and apply run JavaScript functions as if they were methods of another object. A simple example demonstrates it further:


function SetType(type) {
	this.WhoAmI = "I'm the "+type+" object";
}
var newObject = {};
SetType.call(newObject, "newObject");
alert(newObject.WhoAmI); // I'm the newObject object
var new2 = {};
SetType.apply(new2, ["new2"]);
alert(new2.WhoAmI); // I'm the new2 object

The only difference is that ‘call’ expects a discrete number of parameters while ‘apply’ can be passed an array of parameters.

That’s ‘this’ in a nutshell! However, there are several gotchas which may catch you out. We’ll discuss those in my next chapter

In above chapter, we looked at JavaScript’s this statement and how it can change depending on the context of the function call. Today, we’ll examine several situations where this could catch you out…

1. Forgetting ‘new’

Consider the following code:



window.WhoAmI = "I'm the window object";
function Test() {
  this.WhoAmI = "I'm the Test object";
}
var t = Test();
alert(window.WhoAmI); // I'm the Test object
alert(t.WhoAmI); // t is undefined

What we really meant is:


var t = new Test();

The omission of the new statement gave us undesirable results. Other languages would throw an error when faced with a direct call to a constructor but JavaScript simply treats it like any other function call. this is taken to be the global window object and no value is returned from Test() so t becomes undefined.

This situation can be fixed if you’re writing a JavaScript library for third-party developers. Refer to Fixing Object Instances in JavaScript.

JavaScript by day


Google Safe Browsing McAfee SiteAdvisor Norton SafeWeb Dr.Web