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></script>
</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 ->(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 ->{}</p>
<p>let obj1={<br>
name :'Pushan',<br>
f:function f(){<br>
console.log(this);<br>
}<br>
} <br>
obj1.f();</p>
<p>// ๐ans ->{name: 'Pushan', f: ฦ}</p>
<p>let obj2={<br>
name:'Pushan',<br>
f:function f(){<br>
function g(){<br>
console.log(this);<br>
}<br>
g()<br>
}<br>
}</p>
<p>obj2.f();</p>
<p>// ans -> window object</p>
<p><strong>this4.js</strong></p>
<p><strong>index1.html</strong><br>
<!DOCTYPE html><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></script>
</code></pre></div>
<p></head><br>
<body></p>
<p></body><br>
</html></p>
<p><strong>this4.js</strong></p>
<p>'use strict';</p>
<p>console.log(this);</p>
<p>// ๐ans ->(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 ->undefined</p>
<p>// let obj1={<br>
// name :'Pushan',<br>
// f:function f(){<br>
// console.log(this);<br>
// }<br>
// } <br>
// obj1.f();</p>
<p>// ๐ans ->{name: 'Pushan', f: ฦ}</p>
<p>let obj2={<br>
name:'Pushan',<br>
f:function f(){<br>
function g(){<br>
console.log(this);<br>
}<br>
g()<br>
}<br>
}</p>
<p>obj2.f();</p>
<p>// ans -> window object </p>
<p>Link for handwritten notes:<br>
<a href="https://github.com/pushanverma/notes/blob/main/webd/OOPs%20in%20Js%20.pdf">https://github.com/pushanverma/notes/blob/main/webd/OOPs%20in%20Js%20.pdf</a></p>
Top comments (0)