PUSHAN VERMA

Posted on Feb 15, 2022

Introduction to OOPS in Javascript (this keyword)

#javascript #webdev #beginners #programming

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

</body> 
</html>

this3.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

this4.js

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

</body> 
</html>

this4.js

'use strict';

console.log(this);

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

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

// 👉ans ->undefined

// 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

Link for handwritten notes: 
<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>

DEV Community

Introduction to OOPS in Javascript (this keyword)

Top comments (0)

Read next

100x Faster Diffusion Planning with DiffuserLite's Refinement Approach

How to create an image authentication system with python streamlit and canva!

A Complete Guide to React useEffect vs useLayoutEffect for Beginners

2641. Cousins in Binary Tree II