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

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

Post date February 15, 2022
Post categories In beginners, JavaScript, programming, webdev

This content originally appeared on DEV Community and was authored by PUSHAN VERMA

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>

This content originally appeared on DEV Community and was authored by PUSHAN VERMA

Print Share Comment Cite Upload Translate Updates

APA

PUSHAN VERMA | Sciencx (2022-02-15T12:31:09+00:00) Introduction to OOPS in Javascript (this keyword). Retrieved from https://www.scien.cx/2022/02/15/introduction-to-oops-in-javascript-this-keyword/

MLA

" » Introduction to OOPS in Javascript (this keyword)." PUSHAN VERMA | Sciencx - Tuesday February 15, 2022, https://www.scien.cx/2022/02/15/introduction-to-oops-in-javascript-this-keyword/

HARVARD

PUSHAN VERMA | Sciencx Tuesday February 15, 2022 » Introduction to OOPS in Javascript (this keyword)., viewed ,<https://www.scien.cx/2022/02/15/introduction-to-oops-in-javascript-this-keyword/>

VANCOUVER

PUSHAN VERMA | Sciencx - » Introduction to OOPS in Javascript (this keyword). [Internet]. [Accessed ]. Available from: https://www.scien.cx/2022/02/15/introduction-to-oops-in-javascript-this-keyword/

CHICAGO

" » Introduction to OOPS in Javascript (this keyword)." PUSHAN VERMA | Sciencx - Accessed . https://www.scien.cx/2022/02/15/introduction-to-oops-in-javascript-this-keyword/

IEEE

" » Introduction to OOPS in Javascript (this keyword)." PUSHAN VERMA | Sciencx [Online]. Available: https://www.scien.cx/2022/02/15/introduction-to-oops-in-javascript-this-keyword/. [Accessed: ]

rf:citation

» Introduction to OOPS in Javascript (this keyword) | PUSHAN VERMA | Sciencx | https://www.scien.cx/2022/02/15/introduction-to-oops-in-javascript-this-keyword/ |

Please log in to upload a file.

There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts