create account

JavaScript ~ This by harps116

View this thread on: hive.blogpeakd.comecency.com
· @harps116 · (edited)
$0.11
JavaScript ~ This
![101.png](https://steemitimages.com/DQmV6Dk47k4kDxARk8x8YTJ8fo6axFqZgDJXrFFBQuH5iSx/101.png)

If you have spent some time reading or writing JavaScript, you will have no doubt came across the `this` keyword. In other object orientated languages, the `this` keyword refers to the current instance of the class. In JavaScript the value of this depends on the context of the function and where it is called.Not knowing this or rather `this` can be confusing. 
 
JavaScript functions get  two arguments passed silently `arguments` and `this`, the second being the more widely used of these implicit arguments. 
 
In this post I'm going to be looking at `this` in four different situations: 
* In a regular function. 
* When a function is called as a method. 
* In a function that's being called as a constructor. 
* When you explicitly set the value of `this` manually using `bind`, `apply`, or `call`. 
 
Let's get started... 
 
#### In a regular function 
![1.png](https://steemitimages.com/DQmWWkbUCMBUWjP4ibt3Nc9vRe1eEk7WRmuKPyD5zAn2dmQ/1.png)
[View on JSFiddle](https://jsfiddle.net/harps116/d9zpz8dx/)
 
In a regular function ( or anywhere outside of a function ) when in _non strict mode_`this` refers to the window object, or the root of the [DOM](https://en.wikipedia.org/wiki/Document_Object_Model). In _strict mode_ i.e.. when `"use strict";` is at the top of the JavaScript file, `this` is undefined, which is probably more desirable and will reduce any unwanted side effects. 
 
#### When a function is called as a method 
![2.png](https://steemitimages.com/DQmQH4nQTZdLd8Uqj2epH739qhQifDAtEmvMA8orbUPXf7D/2.png)
[View on JSFiddle](https://jsfiddle.net/harps116/o5y9oLyu/7/)
 
`this` inside of an object refers to the object on which the method is being called on. In the above example this refers to the anObject..object. Gordon Zhu founder of [Watch and Code](https://watchandcode.com/p/practical-javascript), uses the term "the left of the dot rule", which I think is a great way to identifying what `this` will refer to. 
 
For example if we had something that looked like `object.innerObject.oneMoreObj.doSomething()` using the "left of the dot rule", We can quickly see that doSomething is a method of the oneMoreObj object. 
 
#### In a function that's being called as a constructor 
![3.png](https://steemitimages.com/DQmVZAcACXuwirJSkRvNX8Kw6pWasNdFXzKPpVsb9daswVE/3.png)
[View on JSFiddle](https://jsfiddle.net/harps116/tzt2ys7x/8/)
 
In a function that's being used as a constructor, `this` points object that has been created from the constructor. 
 
#### When you explicitly set the value of `this` manually using `bind`, `apply`, or `call`. 
![4.png](https://steemitimages.com/DQmbcWJZeFezeUwWvb3LdNe3657YvAZs64y8R4wJMeY59K2/4.png)

![4-res.png](https://steemitimages.com/DQmUhvSSpwTdUy2LzF5qdzbXuwR4nDZ8JiqKxw18VAR8BGy/4-res.png)
[View on JSFiddle](https://jsfiddle.net/harps116/m7k88ujv/1)

 
Bind sets the 'this' of the function, call and apply execute the function and set the `this`. Call and apply are very similar except apply takes arguments as an array and call takes its arguments as a comma separated list. I look at the first letter to remember the difference, apply: array, call: commas. It is worth noting once bind is set, it is bound once and cannot be changed. 

The most important thing to remember when trying to figure out what `this` equals is the context in which the function is being called.

That was `this`. 

Thanks for reading!
 
Some additional resources: 
* [Watch and Code: Practical JavaScript](https://watchandcode.com/p/practical-javascript) 
* [This on Stack Overflow](https://stackoverflow.com/questions/3127429/how-does-the-this-keyword-work)
👍  , , , , , , , ,
properties (23)
authorharps116
permlinkjavascript-this
categoryjavascript
json_metadata{"tags":["javascript","programming","code","this"],"image":["https://steemitimages.com/DQmV6Dk47k4kDxARk8x8YTJ8fo6axFqZgDJXrFFBQuH5iSx/101.png","https://steemitimages.com/DQmWWkbUCMBUWjP4ibt3Nc9vRe1eEk7WRmuKPyD5zAn2dmQ/1.png","https://steemitimages.com/DQmQH4nQTZdLd8Uqj2epH739qhQifDAtEmvMA8orbUPXf7D/2.png","https://steemitimages.com/DQmVZAcACXuwirJSkRvNX8Kw6pWasNdFXzKPpVsb9daswVE/3.png","https://steemitimages.com/DQmbcWJZeFezeUwWvb3LdNe3657YvAZs64y8R4wJMeY59K2/4.png","https://steemitimages.com/DQmUhvSSpwTdUy2LzF5qdzbXuwR4nDZ8JiqKxw18VAR8BGy/4-res.png"],"links":["https://jsfiddle.net/harps116/d9zpz8dx/","https://en.wikipedia.org/wiki/Document_Object_Model","https://jsfiddle.net/harps116/o5y9oLyu/7/","https://watchandcode.com/p/practical-javascript","https://jsfiddle.net/harps116/tzt2ys7x/8/","https://jsfiddle.net/harps116/m7k88ujv/1","https://stackoverflow.com/questions/3127429/how-does-the-this-keyword-work"],"app":"steemit/0.1","format":"markdown"}
created2017-09-21 16:04:09
last_update2017-09-21 16:18:21
depth0
children2
last_payout2017-09-28 16:04:09
cashout_time1969-12-31 23:59:59
total_payout_value0.082 HBD
curator_payout_value0.024 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length3,703
author_reputation31,145,258,360
root_title"JavaScript ~ This"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id15,535,826
net_rshares41,085,242,764
author_curate_reward""
vote details (9)
@matthewdavid ·
Good post Adam. I learned a lot from [Watch and Code: Practical JavaScript](https://watchandcode.com/p/practical-javascript). Good to see you mention it here.
properties (22)
authormatthewdavid
permlinkre-harps116-javascript-this-20170924t183617097z
categoryjavascript
json_metadata{"tags":["javascript"],"links":["https://watchandcode.com/p/practical-javascript"],"app":"steemit/0.1"}
created2017-09-24 18:36:18
last_update2017-09-24 18:36:18
depth1
children0
last_payout2017-10-01 18:36:18
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length158
author_reputation2,155,255,892,877
root_title"JavaScript ~ This"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id15,819,149
net_rshares0
@raycoms ·
Just ran over that today, when I got back to coding a bit in javascript after a while of absence =D
properties (22)
authorraycoms
permlinkre-harps116-javascript-this-20170921t205642395z
categoryjavascript
json_metadata{"tags":["javascript"],"app":"steemit/0.1"}
created2017-09-21 20:56:42
last_update2017-09-21 20:56:42
depth1
children0
last_payout2017-09-28 20:56:42
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length99
author_reputation115,046,969,395,583
root_title"JavaScript ~ This"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id15,558,336
net_rshares0