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

Designing and Implementing Ant Design Global App Tour for React Apps.

Lessons Learned Migrating from React CRA & Jest to Vite & Vitest

👻 Scary Ghost Cursor with Smoke Trail! 💀 code using html5,css3 and javascript

BLA ! BLA! BLA! DECEMBER...!