{"id":1081,"date":"2018-01-03T13:51:36","date_gmt":"2018-01-03T13:51:36","guid":{"rendered":"http:\/\/frowningbear.com\/blog\/?p=1081"},"modified":"2019-01-30T13:39:15","modified_gmt":"2019-01-30T13:39:15","slug":"understanding-the-this-keyword-in-javascript","status":"publish","type":"post","link":"https:\/\/frowningbear.com\/codebase\/2018\/01\/03\/understanding-the-this-keyword-in-javascript\/","title":{"rendered":"Understanding the “this” keyword in Javascript"},"content":{"rendered":"

The this<\/code> keyword always refers to an object.<\/p>\n

We can use it outside of any function in the global scope but most often it is used inside a function (otherwise known as a method, when the function is defined inside an object).<\/p>\n

When it is used within a method, it refers to the object on which the method is being invoked.<\/p>\n

<\/p>\n

This is also true of a global function because a global function is actually just a method of the window object, which is the default global object in a web browser.<\/p>\n

All functions are also objects, and just like any other objects they can have properties.<\/p>\n

When a function is called (or it executes), it receives a special property called this<\/code>, which is a variable with the value of the object that invokes the function.<\/p>\n

Until the introduction of Javascript’s newer Arrow functions (which we will cover later), it was common to think that the value of this<\/code> depends on the object where the function is defined. But this is not the case. The value of this<\/code>, when inside a function, is not determined until the function actually executes. The value assigned to this<\/code>, in most cases, depends on the object which invokes that function.<\/p>\n

The value of this<\/code> is determined using a simple series of steps:<\/p>\n

If the function is invoked using Function.call or Function.apply, this<\/code> will be set to the first argument passed to call\/apply. If the first argument passed to call\/apply is null or undefined, this<\/code> will refer to the global object (which is the window object in Web browsers).<\/p>\n

If the function being invoked was created using Function.bind, this<\/code> will be the first argument that was passed to bind at the time the function was created.<\/p>\n

If the function is being invoked as a method of an object, this<\/code> will refer to that object.<\/p>\n

Otherwise, the function is being invoked as a standalone function not attached to any object, and this<\/code> will refer to the global object.<\/p>\n

The object that the function is bound to, attached to, or is invoked by, is what is regarded as the execution context.????<\/p>\n

Lets start with the ECMAScript definition of this:
\nThe this<\/code> keyword evaluates to the value of the ThisBinding of the current execution context.<\/p>\n

this refers to execution context and the execution context refers to the object which is bound to the current scope????<\/p>\n","protected":false},"excerpt":{"rendered":"

The this keyword always refers to an object. We can use it outside of any function in the global scope but most often it is used inside a function (otherwise known as a method, when the function is defined inside an object). When it is used within a method, it refers to the object on … Continue reading “Understanding the “this” keyword in Javascript”<\/span><\/a><\/p>\n","protected":false},"author":2,"featured_media":1099,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3],"tags":[],"class_list":["post-1081","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript"],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/frowningbear.com\/codebase\/wp-json\/wp\/v2\/posts\/1081","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/frowningbear.com\/codebase\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/frowningbear.com\/codebase\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/frowningbear.com\/codebase\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/frowningbear.com\/codebase\/wp-json\/wp\/v2\/comments?post=1081"}],"version-history":[{"count":3,"href":"https:\/\/frowningbear.com\/codebase\/wp-json\/wp\/v2\/posts\/1081\/revisions"}],"predecessor-version":[{"id":1345,"href":"https:\/\/frowningbear.com\/codebase\/wp-json\/wp\/v2\/posts\/1081\/revisions\/1345"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/frowningbear.com\/codebase\/wp-json\/"}],"wp:attachment":[{"href":"https:\/\/frowningbear.com\/codebase\/wp-json\/wp\/v2\/media?parent=1081"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/frowningbear.com\/codebase\/wp-json\/wp\/v2\/categories?post=1081"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/frowningbear.com\/codebase\/wp-json\/wp\/v2\/tags?post=1081"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}