-2

I have tried the best resources, but can't understand a single thing. "this" is just so confusing, how does it connect with other variables outside. I have tried this source, everybody understands by that source but not me. Can anyone explain with superb examples. I am totally a begineer in Javascript.

This is the best source as they say.. How does "this" keyword work within a function?

Please help me understand "this". Really tired of searching all over the internet and books.

Community
  • 1
  • 1
Harshal Carpenter
  • 470
  • 1
  • 9
  • 24
  • 3
    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this – LcSalazar Oct 07 '14 at 21:57
  • 1
    The post you linked claims to offer "more than you ever wanted to know about *this*". Is there something specific you don't understand? Or a specific application with which you're having trouble? – showdev Oct 07 '14 at 21:57
  • 1
    Kinda feel like if you don't understand the answer you linked to, you wouldn't understand anything else we could add to it.. – Kevin B Oct 07 '14 at 21:58
  • @showdev I just dont understand why we need to use "this" ? .. Whats the purpose? – Harshal Carpenter Oct 07 '14 at 21:58
  • 1
    the purpose would be to access whatever `this` is bound to. It differs usecase by usecase. – Kevin B Oct 07 '14 at 21:59
  • @KevinB Yeah I knew this would be response. But I dont understand why we use "this"? – Harshal Carpenter Oct 07 '14 at 21:59
  • @KevinB .. Can give me examples of different uses ? – Harshal Carpenter Oct 07 '14 at 22:00
  • 2
    uhm... the answer you linked to gives 5. – Kevin B Oct 07 '14 at 22:00
  • No like what is importance? .. like this is where you would use "this" .. and this is where you would not ! .. or "this" makes it easy here for you and here not! – Harshal Carpenter Oct 07 '14 at 22:02
  • For example, in a click handler bound using addEventListener, `this` would be the element that was clicked (unless you used `Function.prototype.bind`). you can do stuff with said element, such as give it a class, add/remove events, change html, etc. – Kevin B Oct 07 '14 at 22:03
  • Oh ok . so we dont have to write .. document.getElementById("stuff") ? .. is this correct way i understood? – Harshal Carpenter Oct 07 '14 at 22:05
  • Correct. You would be able to skip that step because you already have access to the element. – Kevin B Oct 07 '14 at 22:05
  • Cool .. so is this the only use of "this" .. or it does hold some more powers? .. because it does seem a great keyword – Harshal Carpenter Oct 07 '14 at 22:07
  • In a nutshell, that is it's only purpose. however, how you apply that can differ widely, because event listeners are only one example of where you would have access to `this` defined to something useful. – Kevin B Oct 07 '14 at 22:08
  • Alright. Thank you @KevinB I got so mad that i was not able to understand "this" for so much long time. Today I wanted to get clear of this anyway! Thank you very much, I will dig deeper now with this knowledge – Harshal Carpenter Oct 07 '14 at 22:10
  • The first example in the answer you linked to. If `foo` had another method called `somethingElse`, you would be able to do `this.somethingElse()`, or if it had a property, such as `age`, you would be able to access it with `this.age` rather than going back to `foo.age` – Kevin B Oct 07 '14 at 22:10
  • but why ? .. we could have also written "foo.age".. is there any protection or security related things here? – Harshal Carpenter Oct 07 '14 at 22:13
  • `foo.age` is simpler in this case, but imagine if it was actually `foo.bar.baz.something.else.really.long.age` instead of `foo.age`. `this.age` would be far easier to use, and would work even if you moved it to another object entirely, as long as the properties were still there. using `foo.age` makes it far less reusable. – Kevin B Oct 07 '14 at 22:15
  • reusability .. yes indeed. I will have to practice using it only then i will be able to fully digest it. Thank you so much for this education. @KevinB – Harshal Carpenter Oct 07 '14 at 22:23

1 Answers1

0

Definition of the JavaScript this Keyword ? The object which called a function.

For example, you have an element that is a button. It has the value click me. When you click on that button it will call the javascript function doSomething();

<input type="button" value="clickme" onclick="doSomething(this)"/>

function doSomething(ele) {
  // What we want to do, is change the text of the button.
  // To point at the button we use ele, which was passed in.
  ele.value = "Changed";
  // What we get is the buttons text changing to the word Changed
}

Hope that helps.

Ben Temple-Heald
  • 708
  • 1
  • 6
  • 16