DEV Community

PUSHAN VERMA
PUSHAN VERMA

Posted on

 

Introduction to OOPS in Javascript (this keyword)

this behaves in two different modes i.e Strict and Non -Strict.
(Strict is basically used in react)

_this1 and this2 are in node environment _
this1.js
console.log(this);

// πŸ‘‰ans ->(returns window object (just like global object))
// Window
// index.html:42 Live reload enabled.

function f(){
console.log(this);
}

// πŸ‘‰ans ->{}

// let obj1={
// name :'Pushan',
// f:function f(){
// console.log(this);
// }
// }
// obj1.f();

// πŸ‘‰ans ->{name: 'Pushan', f: Ζ’}

let obj2={
name:'Pushan',
f:function f(){
function g(){
console.log(this);
}
g()
}
}

obj2.f();

// ans -> window object

this2.js
'use strict'

console.log(this);

//πŸ‘‰ ans ->{}

function f(){
console.log(this)
}

f();

//πŸ‘‰ ans -> undefined

let obj={
name:"Pushan",
f:function(){
console.log(this)
}
}

obj.f();

// ans -> { name: 'Pushan', f: [Function: f] }

let obj2={
name:"Pushan",
f:function f(){
function g(){
console.log(this);
}
g()
}
}

obj2.f()

//πŸ‘‰ ans ->undefined

_this3 and this4 are in Browser Environment _

index.html

<!DOCTYPE html>











Document

<div class="highlight"><pre class="highlight plaintext"><code>&lt;/script&gt;
</code></pre></div>
<p></head><br>
<body></p>

<p></body><br>
</html></p>

<p><strong>this3.js</strong></p>

<p>console.log(this);</p>

<p>// πŸ‘‰ans -&gt;(returns window object (just like global object))<br>
// Window<br>
// index.html:42 Live reload enabled.</p>

<p>function f(){<br>
console.log(this);<br>
}</p>

<p>// πŸ‘‰ans -&gt;{}</p>

<p>let obj1={<br>
name :&#39;Pushan&#39;,<br>
f:function f(){<br>
console.log(this);<br>
}<br>
} <br>
obj1.f();</p>

<p>// πŸ‘‰ans -&gt;{name: &#39;Pushan&#39;, f: Ζ’}</p>

<p>let obj2={<br>
name:&#39;Pushan&#39;,<br>
f:function f(){<br>
function g(){<br>
console.log(this);<br>
}<br>
g()<br>
}<br>
}</p>

<p>obj2.f();</p>

<p>// ans -&gt; window object</p>

<p><strong>this4.js</strong></p>

<p><strong>index1.html</strong><br>
&lt;!DOCTYPE html&gt;<br>
<html lang="en"><br>
<head><br>
<meta charset="UTF-8"><br>
<meta http-equiv="X-UA-Compatible" content="IE=edge"><br>
<meta name="viewport" content="width=device-width, initial-scale=1.0"><br>
<title>Document</title><br>
<script src="this4.js"></p>
<div class="highlight"><pre class="highlight plaintext"><code>&lt;/script&gt;
</code></pre></div>
<p></head><br>
<body></p>

<p></body><br>
</html></p>

<p><strong>this4.js</strong></p>

<p>&#39;use strict&#39;;</p>

<p>console.log(this);</p>

<p>// πŸ‘‰ans -&gt;(returns window object (just like global object))<br>
// Window<br>
// index.html:42 Live reload enabled.</p>

<p>function f(){<br>
console.log(this);<br>
}</p>

<p>// πŸ‘‰ans -&gt;undefined</p>

<p>// let obj1={<br>
// name :&#39;Pushan&#39;,<br>
// f:function f(){<br>
// console.log(this);<br>
// }<br>
// } <br>
// obj1.f();</p>

<p>// πŸ‘‰ans -&gt;{name: &#39;Pushan&#39;, f: Ζ’}</p>

<p>let obj2={<br>
name:&#39;Pushan&#39;,<br>
f:function f(){<br>
function g(){<br>
console.log(this);<br>
}<br>
g()<br>
}<br>
}</p>

<p>obj2.f();</p>

<p>// ans -&gt; window object </p>

<p>Link for handwritten notes:<br>
<a href="https://github.com/pushanverma/notes/blob/main/webd/OOPs%20in%20Js%20.pdf"&gt;https://github.com/pushanverma/notes/blob/main/webd/OOPs%20in%20Js%20.pdf&lt;/a&gt;&lt;/p>

Top comments (0)

Visualizing Promises and Async/Await 🀯

async await

☝️ Check out this all-time classic DEV post