this is simple

367 views
255 views

Published on

Yet another try to make you understand better JavaScript's -this- keyword

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
367
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

this is simple

  1. 1. this is simple Nir Elbaz, 2013 1
  2. 2. this is a JavaScript language immutable variable Nir Elbaz, 2013 2
  3. 3. Usually, this refers to the object which owns the method it was called from Nir Elbaz, 2013 3
  4. 4. this === window (global context) // no current object - window object owns it all: var strText = "Hello, world"; alert(strText); alert(window.strText); alert(this.strText); // -> "Hello, world" // -> again, "Hello, world" // -> and again, "Hello, world" Nir Elbaz, 2013 4
  5. 5. this === window (global context) // callingThis method is owned by window object: var strText = "Hello, world"; function callingThis () { alert(strText); alert(window.strText); alert(this.strText); } // -> "Hello, world" // -> again, "Hello, world" // -> and again, "Hello, world" callingThis(); Nir Elbaz, 2013 5
  6. 6. this === undefined // adding “use strict” to a function will cause this to be undefined: var strText = "Hello, world"; function callingThis () { "use strict"; alert(strText); alert(window.strText); alert(this.strText); } // -> "Hello, world" // -> again, "Hello, world" // -> nothing is shown since this === undefined callingThis(); Nir Elbaz, 2013 6
  7. 7. this === Object // callingThis, callingThat & callingThatAgain methods are now owned by // MainObject object: this.strText = "Hello, world"; function MainObject () { this.strText = "I belong to MainObject"; this.callingThis = function () { alert(this.strText); } } MainObject.prototype.callingThat = function () { alert(this.strText); } function alertText () { alert(this.strText); } var obj = new MainObject(); obj.callingThis(); // -> "I belong to mainObject" obj.callingThat(); // -> again, "I belong to mainObject" obj.callingThatAgain = alertText; obj.callingThatAgain(); // -> and Nir Elbaz, 2013 belong to mainObject" again, "I alert(this.strText); // -> "Hello, world" alertText(); // -> again, "Hello, world" 7
  8. 8. this === Object // using bind, apply & call to define this: var strText = "Hello, world"; function callingThis () { alert(this.strText); } function MyObject () { this.strText = "I belong to MainObject"; } CallingThis(); var myObject = new MyObject(); callingThis.apply(myObject); callingThis.call(myObject); callingThis.bind(myObject); // -> "Hello, world" // -> "I belong to mainObject" // -> again, "I belong to mainObject" // -> and again, "I belong to mainObject" Nir Elbaz, 2013 8
  9. 9. this === Object... and window! // in ECMA 3, -this- refers to the head object in nested functions: var MyObject = { func1: function () { console.log(this); // logs MyObject var func2 = function () { console.log(this); // logs window, and will do so from this point on var func3 = function () { console.log(this); // logs window, as it’s the head object }(); }(); } }; MyObject.func1(); Nir Elbaz, 2013 9
  10. 10. this === Object // ECMA 5 fixed this behavior, or - you can fix it by sending -this- as a param var MyObject = { func1: function () { console.log(this); // logs MyObject var func2 = function (self) { console.log(self); // logs MyObject var func3 = function (self) { console.log(self); // logs MyObject }(self); }(this); } }; MyObject.func1(); Nir Elbaz, 2013 10
  11. 11. this === DOM Element // when a function is used as an event handler, its -this- is set to the element // the event fired from, also in an inline event handler var paragraphs = document.getElementsByTagName('p'); for (var i = 0, j = paragraphs.length; i < j; i++) { paragraphs[i].addEventListener('click', function () { console.log(this); // logs the element the event fired from }, false) } <button onclick="console.log(this);">Log this</button> Nir Elbaz, 2013 11
  12. 12. Summary When not using call / apply or bind, the this value will always refer to the global context, except in the following instances: ✔ ✔ The function was called with the new operator, in which case this points to a new object The function is a member of an object, in which case this points to the object UNLESS function is being called asynchronously. - Yehuda Katz Nir Elbaz, 2013 12
  13. 13. Resources ● Fully Understanding the this Keyword ● What is ‘this’ in JavaScript? ● this ● Understanding “Prototypes” in JavaScript http://nirelbaz.tumblr.com Nir Elbaz, 2013 13

×