JavaScript- this value

Question

I see some code like this from jqplot library:

$.jqplot.Dragable = function(options) {
    // a bunch of code here.
    $.extend(true, this, options);
};

This is a routine to add new plugin to the library.

What does this refer to here in $.extend(true, this, options)? Is it the function itself or window, or it will only be specified when called?

Thanks!

Update:

This question was meant to be a general one because I don't understand this value in js. After some research, apparently:
1. If called using func(), then this will be window or undefined (strict mode)
2. If called like foo.funct(), this refers to foo.

As for this specific jqplot library, when it's called it's actually called on $.jqplot, where jqplot was added to jquery. So this should refer to $.jqplot

Whatever the jqplot library chooses to set it to before calling extension functions. It's not necessarily anything automatic in JS. — Barmar, Jun 11 '13 at 06:20
@ArunPJohny I'm very new to js oop... Are you saying that Dragable is a constructor? Why? Or are all functions in js can be constructor? — Boyang, Jun 11 '13 at 06:21
@Barmar If it's called like this $.jqplot.Dragable(optionObj), then this == $.jqplot.Dragable? — Boyang, Jun 11 '13 at 06:23
You can try `console.log(this)`, it should tell you what it is... — elclanrs, Jun 11 '13 at 06:23
Given the way it's being used with `$.extend`, it looks like `this` is an object containing the options for the `jqplot` instance. — Barmar, Jun 11 '13 at 06:26
@CharlesW. if you call it like `$.jqplot.Dragable(optionObj)` then `this` will be global object ie window — Arun P Johny, Jun 11 '13 at 06:26
That's probably not how you call it, though. It's probably something like `$("selector").jqplot.Dragable(optionObj)`. — Barmar, Jun 11 '13 at 06:28
@CharlesW It depends on how you call it. If you call it like `$.jqplot.Dragable(optionObj)` then `this === $.jqplot`. — basilikum, Jun 11 '13 at 06:40
Also, see here: http://stackoverflow.com/questions/16832062/the-scope-of-this/ — basilikum, Jun 11 '13 at 06:50

Robert Hurst · Accepted Answer · 2013-06-11T10:52:14.463

In your example $.jqplot.Dragable is a constructor. this refers to the object created when

new $.jqplot.Dragable(options)

is called. As for $.extend, It simply copies every method and property from options onto this.

But nevermind that. First you should understand what this is. After that you can read the links I've posted at the bottom of my aswer to learn about constructors and OOP in JavaScript.

In javascript this refers to the context of a method or function. The value of this can be of three things.

Global Context

When simply executing a function by name or by a direct variable reference (not an object property), this points to the global scope. In the browser this is the window object.

Note that in strict mode this is undefined

function setFoo(val) {
    this.foo = val;
}

Above we have a function setFoo. This function simply takes a value and sets it on this. Lets execute the function to find out what will happen...

setFoo(10);

In this case, this refers to the global scope. For this reason, window.foo or foo should equal 10.

window.foo == 10 //true
foo == 10 //true

Object Context

When a function is stored as a property of an object it is called a method. When a method is executed this becomes the object the method is attached to. This allows the method to modify and use data on the object.

Now lets take setFoo and attach it to an object.

var myObject = {};
myObject.setFoo = setFoo;

If we execute with now myObject will have a new property called foo and it will equal what ever we pass into myObject.setFoo.

myObject.setFoo(34);

As it should myObject.foo equals 34 because this refers to the object myObject.

myObject.foo == 34; //true

Call Context

The last way this can be set is with to methods of the Function prototype. This means that all functions and methods in JavaScript have these to methods. They are call and apply. These functions allow the programmer to set a custom context while executing a function or method. The two are nearly identical except that apply takes an array as its second argument. Each item in the array is passed to the function/method as an argument in order.

call

var x = {};
setFoo.call(x, 20);
x.foo == 20; // true

apply

var x = {};
var args = [20];
setFoo.apply(x, args);
x.foo == 20; // true

You should read the article for this on MDN. It will help you better understand when to use this, and why its an important part of function scope.

MDN - this

You should also read because the main purpose of this is to enable OOP (Object Orientated Programming) in JavaScript.

MDN - Inheritance and the prototype chain

Thanks, very helpful. :) In strict mode, isn't it `undefined`? https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this — Boyang, Jun 11 '13 at 10:39

JavaScript- this value

1 Answers1

Global Context

Object Context

Call Context