{"id":159,"date":"2023-12-03T19:39:12","date_gmt":"2023-12-04T00:39:12","guid":{"rendered":"https:\/\/wcet.waketech.edu\/abthomas3\/web250\/wordpress\/?p=159"},"modified":"2023-12-03T19:39:17","modified_gmt":"2023-12-04T00:39:17","slug":"whats-this-whats-this","status":"publish","type":"post","link":"https:\/\/wcet.waketech.edu\/abthomas3\/web250\/wordpress\/whats-this-whats-this\/","title":{"rendered":"What’s this? What’s… this?"},"content":{"rendered":"\n

The this<\/code> keyword is a notorious roadblock on the path to grasping JavaScript. Just referring to it sounds funny – “the this” – the what now? Understanding this<\/code> is key to becoming an adept JS programmer, though. So let’s break it down.<\/p>\n\n\n\n

Prereqs for understanding ‘this’<\/h2>\n\n\n\n

The this<\/code> keyword is primarily used in the context of Object Oriented Programming<\/em>, which is a whole thing in and of itself. If you\u2019re not yet familiar with what objects are and the general gist of OOP, this (pun intended) might be a good time to check out the link and orient yourself before proceeding.<\/p>\n\n\n\n

In order to fully understand all the possible meanings of this<\/code>, you\u2019ll also need to know what events<\/a><\/em>, object methods<\/a><\/em>, and scope<\/a><\/em> are, and to really really get it, what strict mode<\/a><\/em> is. I\u2019m actually going to save strict mode for another post, so for now just know that it\u2019s a thing, and changes what this<\/code> can mean.<\/p>\n\n\n\n

Lastly, you need to keep in mind that this<\/code> is a keyword<\/em>, not a variable. You can\u2019t change the meaning of this<\/code> in a direct way like you would a variable. Its meaning is all dependent on how<\/em>, aka the context<\/em> in which it\u2019s used.<\/p>\n\n\n\n

The definition<\/h2>\n\n\n\n

In JavaScript, in non-strict mode, the this<\/code> keyword refers to an object<\/strong>. Sounds simple, right?<\/p>\n\n\n\n

The tricky part is understanding which<\/em> object this<\/code> refers to, because which object this<\/code> refers to all depends on how<\/em> this<\/code> is being invoked.<\/p>\n\n\n\n

So, let\u2019s take a look at the different ways this<\/code> can be invoked, and we\u2019ll identify which objects it refers to based on each context. After we run through the different contexts, we\u2019ll look at a series of questions you can ask yourself to narrow down which context applies.<\/p>\n\n\n\n

All the Objects<\/h2>\n\n\n\n
    \n
  • In an object method<\/strong>, this<\/code> refers to the object<\/strong> the method belongs to.<\/li>\n\n\n\n
  • Alone, in the global scope, this<\/code> refers to the global object<\/strong>.<\/li>\n\n\n\n
  • In a function, this<\/code> refers to the global object<\/strong>.<\/li>\n\n\n\n
  • In an event<\/strong>, this<\/code> refers to the DOM element<\/strong> that received<\/em> the event.<\/li>\n\n\n\n
  • Methods like bind()<\/code>, call()<\/code>, and apply()<\/code> can make this<\/code> refer to any object<\/strong>.<\/li>\n\n\n\n
  • *In strict mode<\/strong>, this<\/code> can be any value<\/strong>. Woah! Don’t worry about strict mode for now, though. Just know that it’s the only context in which this<\/code> doesn’t stick to the basic rule of always referring to an object.<\/li>\n<\/ul>\n\n\n\n

    Okay, that’s a lot, and far too concise for practical understanding, so let’s dig in to each context a little more.<\/p>\n\n\n\n

    In an Object Method<\/h3>\n\n\n\n

    Whenever this<\/code> is used in a method that’s defined in an object, it refers to that object.<\/p>\n\n\n\n

    Take the classic example of defining a person<\/code> object literal:<\/p>\n\n\n\n

    const person = {\n  firstName: \"Jane\",\n  lastName: \"Doe\",\n  fullName() {\n    return this.firstName + \" \" + this.lastName;\n  }\n};\n\nperson.fullName(); \/\/ returns Jane Doe<\/code><\/pre>\n\n\n\n
    In the above, fullName()<\/code> is a method of the person<\/code> object. Because this<\/code> is being used inside of fullName()<\/code>, we know it refers to person<\/code>, and any properties we append this<\/code> with will be properties of person<\/code>.<\/p>\n\n\n\n
    *An important note about object methods and this<\/code> \u2013 the method has to be defined either using the function<\/code> keyword, or the concise syntax used above. If an =><\/code> arrow function is used, the value of this<\/code> is not bound to the containing object.<\/p>\n\n\n\n
    Alone<\/h3>\n\n\n\n
    When this<\/code> is used alone, meaning hangin\u2019 out there in the global scope, outside of any function, object or method, it refers to the global object<\/strong>. This is rare, but good to know about.<\/p>\n\n\n\n
    this.x = 2; \/\/ sets x property of global object\nconsole.log(x) \/\/ prints 2<\/code><\/pre>\n\n\n\n
    Now, what the global object actually is<\/em> depends on what environment we\u2019re in. In a browser environment, the global object is window<\/code>. In an environment like Node.js, the global object just means the global scope, which we shouldn\u2019t be polluting in the first place.<\/p>\n\n\n\n
    In a Global Function (non-strict mode)<\/h3>\n\n\n\n
    In similar fashion to when this<\/code> is used alone in the global scope, when this<\/code> is in a function in the global scope, the global object<\/strong> is also the default binding. That\u2019s because all<\/em> global variables, including global functions, are properties of an unnamed global object.<\/p>\n\n\n\n
    function f(x) {\n  this.y = x + 1;\n}\n\nf(2); \/\/ f is called as a global function\nconsole.log(y); \/\/ prints 3<\/code><\/pre>\n\n\n\n
    In the above, the f()<\/code> function is in the global scope, so this.y<\/code> sets a y property of the global object with a value equal to whatever argument is passed to f()<\/code> plus 1.<\/p>\n\n\n\n
    *Remember that invoking a function with the new<\/code> keyword is not the same as defining a global function. Functions invoked with new<\/code> create new objects, so any use of this<\/code> inside of them would refer to the object being created, just like with our first example on object methods.<\/p>\n\n\n\n
    In Events<\/h3>\n\n\n\n
    In event handlers, this<\/code> refers to the DOM element that receives the event.<\/p>\n\n\n\n
    Here’s an example of a button with a click event:<\/p>\n\n\n\n
    <button onclick=\"this.style.display='none'\">\n  Click to make me disappear\n<\/button><\/code><\/pre>\n\n\n\n
    The <button><\/code> element is what receives the click event, so when the button gets clicked, this<\/code> is referencing the <button><\/code> element, and sets its display<\/code> property to none<\/code>.<\/p>\n\n\n\n
    In apply(), call(), and bind()<\/h3>\n\n\n\n
    The predefined JavaScript methods apply()<\/code>, call()<\/code>, and bind()<\/code> let you explicitly<\/em> define the object you want to use as the value of this<\/code>. Doing so is called explicit function binding<\/em>.<\/p>\n\n\n\n
    Let’s try an example with the call()<\/code> method. Here’s the syntax for call()<\/code>:<\/p>\n\n\n\n
    function.call(thisArg, arg1, arg2, ...)<\/code><\/pre>\n\n\n\n
      \n
    • thisArg<\/code> is the object we want to make this<\/code> refer to.<\/li>\n\n\n\n
    • arg1<\/code>, arg2<\/code>, and so on are individual arguments that we want to pass to the function we’re invoking.<\/li>\n<\/ul>\n\n\n\n
      Now, here we have a greet()<\/code> function that uses the name<\/code> property of the object to which this<\/code> refers. It takes a message<\/code> parameter and logs a greeting using that message and a name value. We\u2019re going to use call()<\/code> to invoke greet()<\/code> and explicitly set the object that we want the name<\/code> property of.<\/p>\n\n\n\n
      function greet(message) {\n  console.log(message + ', ' + this.name);\n}\n\nconst person1 = { name: 'Jane' };\nconst person2 = { name: 'John' };\n\n\/\/ use call to set 'this' to the person object\ngreet.call(person1, 'Hello'); \/\/ Hello, Jane\ngreet.call(person2, 'Hey');   \/\/ Hey, John<\/code><\/pre>\n\n\n\n
      When call()<\/code> invokes greet()<\/code> the first time, it specifies person1<\/code> as the context, and passes \u2018Hello\u2019 as the message<\/code> argument. So, when greet()<\/code> is executed, this<\/code> refers to the person1<\/code> object where the name<\/code> value is Jane.<\/p>\n\n\n\n
      When call()<\/code> invokes greet()<\/code> again, it\u2019s in the context of person2<\/code>, and uses a different message. So we get \u201cHey, John\u201d logged to the console.<\/p>\n\n\n\n
      How do I know?<\/h2>\n\n\n\n
      If you\u2019re not totally sure which object this<\/code> refers to because more than one context might be influencing its meaning, we can use the following order of precedence:<\/p>\n\n\n\n
        \n
      1. bind()<\/code><\/li>\n\n\n\n
      2. apply()<\/code> and call()<\/code><\/li>\n\n\n\n
      3. Object method<\/li>\n\n\n\n
      4. Global scope<\/li>\n<\/ol>\n\n\n\n
        So, you can ask yourself the following questions in order, and the first one you answer \u201cyes\u201d to will tell you what context takes precedence:<\/p>\n\n\n\n
          \n
        1. Is this<\/code> in a function being invoked with bind()<\/code>?<\/li>\n\n\n\n
        2. Is this<\/code> in a function being invoked with apply()<\/code> or call()<\/code>?<\/li>\n\n\n\n
        3. Is this<\/code> in an object method?<\/li>\n\n\n\n
        4. Is this<\/code> in a function in the global scope?<\/li>\n<\/ol>\n\n\n\n
          And there you have it! Err… there you have this<\/code>!<\/p>\n","protected":false},"excerpt":{"rendered":"
          The this keyword is a notorious roadblock on the path to grasping JavaScript. Just referring to it sounds funny – “the this” – the what now? Understanding this is key to becoming an adept JS programmer, though. So let’s break it down. Prereqs for understanding ‘this’ The this keyword is primarily used in the context […]<\/p>\n","protected":false},"author":1,"featured_media":160,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[5,15,16],"class_list":["post-159","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-frontend","tag-guide","tag-programming"],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"https:\/\/wcet.waketech.edu\/abthomas3\/web250\/wordpress\/wp-content\/uploads\/2023\/12\/pexels-photo-1981863.jpeg","_links":{"self":[{"href":"https:\/\/wcet.waketech.edu\/abthomas3\/web250\/wordpress\/wp-json\/wp\/v2\/posts\/159","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wcet.waketech.edu\/abthomas3\/web250\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wcet.waketech.edu\/abthomas3\/web250\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wcet.waketech.edu\/abthomas3\/web250\/wordpress\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wcet.waketech.edu\/abthomas3\/web250\/wordpress\/wp-json\/wp\/v2\/comments?post=159"}],"version-history":[{"count":1,"href":"https:\/\/wcet.waketech.edu\/abthomas3\/web250\/wordpress\/wp-json\/wp\/v2\/posts\/159\/revisions"}],"predecessor-version":[{"id":161,"href":"https:\/\/wcet.waketech.edu\/abthomas3\/web250\/wordpress\/wp-json\/wp\/v2\/posts\/159\/revisions\/161"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wcet.waketech.edu\/abthomas3\/web250\/wordpress\/wp-json\/wp\/v2\/media\/160"}],"wp:attachment":[{"href":"https:\/\/wcet.waketech.edu\/abthomas3\/web250\/wordpress\/wp-json\/wp\/v2\/media?parent=159"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wcet.waketech.edu\/abthomas3\/web250\/wordpress\/wp-json\/wp\/v2\/categories?post=159"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wcet.waketech.edu\/abthomas3\/web250\/wordpress\/wp-json\/wp\/v2\/tags?post=159"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}