What does "return this" do within a javascript function?

Question

i wonder, what does "return this" do within a javascript function, what's its purpose? supposing we have the following code:

Function.prototype.method = function (name, func) {
  this.prototype[name] = func;
  return this;
};

What does "return this" do inside of a function?

I know what code above does, and what is the use of "this" keyword. I just don't know what "return this" does inside of a function.

@user722756: Because `method` is added to `Function.prototype`, `this` will refer to a function against which `method` was called. That function is presumably meant to be used as a "constructor", because `method` is extending the `prototype` object of the function. — RightSaidFred, Nov 28 '11 at 19:19
i know the use of "this" keyword i just don't know what is the use of "return this" inside of a function . — user722756, Nov 28 '11 at 19:23
`return this` is used to create a [fluent interface](http://en.wikipedia.org/wiki/Fluent_interface). See the answers posted by @marcioAlmada and @AdamRackis below. — Robert Harvey, Nov 28 '11 at 19:26
I guess you didn't understand my question. I know what code above does, i just don't know what "return this" does. — user722756, Nov 28 '11 at 19:27
possible duplicate of [Javascript: What's global object and where does "this" refer to?](http://stackoverflow.com/questions/3758452/javascript-whats-global-object-and-where-does-this-refer-to) — user7116, Nov 28 '11 at 19:29

Alex Turpin · Accepted Answer · 2011-11-28T19:45:27.523

It refers to the object instance on which the method is currently being called. It's used for chaining. For example, you could do something like this:

myObject.foo().bar();

Since foo returns this (a reference to myObject), bar will be called on the object too. This is the same thing as doing

myObject.foo();
myObject.bar();

But requires less typing.

Here is a more complete example:

function AnimalSounds() {}

AnimalSounds.prototype.cow = function() {
    alert("moo");
    return this;
}

AnimalSounds.prototype.pig = function() {
    alert("oink");
    return this;
}

AnimalSounds.prototype.dog = function() {
    alert("woof");
    return this;
}

var sounds = new AnimalSounds();

sounds.cow();
sounds.pig();
sounds.dog();

sounds.cow().pig().dog();

http://jsfiddle.net/jUfdr/

Why not illustrate using the actual code since extending the `prototype` is what it does? `AnimalSounds.method( 'cow', func... ).method( 'pig', func... ).method( 'dog', func... );` — RightSaidFred, Nov 28 '11 at 21:38

score 14 · Answer 2 · answered Nov 28 '11 at 19:07

14

It means the method will return the object it belongs to. This can be useful if you want to chain instructions like so:

MyObject.method1().method2().method3();

Real world example: jQuery

$(this).addClass('myClass').hide();

answered Nov 28 '11 at 19:07

marcio

10,002
11
54
83

score 11 · Answer 3 · edited Nov 28 '11 at 19:41

tl;dr returning this from a method is a common way to allow "chaining" of methods together.

this refers to the current context, and changes meaning depending on the manner in which you're invoking a function.

With function invocation, this refers to the global object, even if the function is being invoked from a method, and the function belongs to the same class as the method invoking it. Douglas Crockford has described this as "mistake in the design of the language" [Crockford 28]

With method invocation, this refers to the object on which the method is being invoked.

With apply invocation, this refers to whatever you set it to when calling apply.

With constructor invocation, this refers to the object that is created for you behind the scenes, which is returned when the constructor exits (provided you don't misguidedly return your own object from a constructor).

In your example above, you're creating a new method called method that allows you to add functions dynamically, and returns this, thereby allowing chaining.

So you could do something like:

Car.method("vroom", function(){ alert("vroom"); })
   .method("errrk", function() { alert("errrk"); });

and so on.

score 2 · Answer 4 · answered Nov 28 '11 at 19:03

2

It returns this, usually meaning the html element that called it, but "this" can have various meanings http://www.quirksmode.org/js/this.html

answered Nov 28 '11 at 19:03

Jeff Lauder

1,247
8
14

What does "return this" do within a javascript function?

4 Answers4

Linked

Related