Javascript this && Javascript Class VS Function
Posted Updated tech4 minutes read (About 600 words)

Javascript this && Javascript Class VS Function

Ref

  1. Javascript this

What is this

  • this in Javascript refers to the context of the statement in which it is being executed.

this in different context

Global

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
console.log(this)
// In browser like chrome prints:
Window {
  0: global,
  Mozilla: ...,
  alert: f alert(),
  atob: f alert(),
  ...
}

// In node.js, this points to an empty object, 
// global points to the global object
console.log(global)
// It prints:
<ref *1> Object [global] {
  global: [Circular *1],
  clearInterval: [Function: clearInterval],
  clearTimeout: [Function: clearTimeout],
  setInterval: [Function: setInterval],
  setTimeout: [Function: setTimeout] {
    [Symbol(nodejs.util.promisify.custom)]: [Getter]
  },
  ...
}

// To access global object in all environments, use globalThis
console.log(globalThis)
// it prints Window in browser and globa in node.js

Function

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const test = {
  prop: 42,
  func: function() {
    return this.prop;
  },
};

console.log(test.func());
// expected output: 42

function f () {
  console.log(this)
}
// Prints the globalThis object.
// In browser it prints Window, in nodejs it prints Global

In strict mode function called in a global context will return undefined.

1
2
3
4
5
6
7
'use strict'

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

f()

Class

1
2
3
4
5
6
7
8
9
10
11
12
13
class Example {
  constructor() {
    console.log(this)
  }
  first () {
    console.log(this)
  }
}

const e = new Example()
e.first()
// Both prints:
// Example {}

DOM Element Event

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
<body>

<h1>The JavaScript <i>this</i> Keyword</h1>

<button onclick="this.style.display='none'">Click to Remove Me!</button>

</body>
</html>

Explicit binding

Call

  • Calling a function with call changes its context.
1
2
3
4
5
6
7
8
9
10
11
12
13
const person1 = {
  name: 'jack',
  printName: function () {
    console.log(this.name)
  }
}

const person2 = {
  name: 'tom'
}

person1.printName.call(person2)
// tom
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
global.name = 'tom'
// in node.js global can be replaced with globalThis
// in browser, global can be left out

function printName (age) {
  console.log(this.name + ' ' + age)
}

const p = {
  name: 'jack'
}

printName(18)
// tom 18
printName.call(p, 28)
// jack 28

Bind

1
2
3
4
5
6
7
8
9
10
11
12
let p = {
  name: 'jack'
}

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

let f1 = f.bind(p)

f1()
// jack

Apply

1
2
3
4
5
6
7
8
9
10
11
12
13
let p = {
  name: 'jack'
}

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

f.call(p)
// jack

f.apply(p)
// jack
  • The difference is that apply lets you invoke the function with arguments as an array; call requires the parameters be listed explicitly. A useful mnemonic is “A for array and C for comma.”
1
2
theFunction.apply(valueForThis, arrayOfArgs)
theFunction.call(valueForThis, arg1, arg2, ...)
1
2
3
4
5
6
7
8
9
10
11
12
13
let p = {
  name: 'jack'
}

function f(a, b) {
  console.log(this.name, a, b)
}

f.call(p, 'a', 'b')
// jack a b

f.apply(p, ['a', 'b'])
// jack a b

this in arrow function

  • With arrow functions there are no binding of this.
  • With arrow functions the this keyword always represents the object that defined the arrow function.
1
2
3
(() => console.log(this))()
// prints Window in browser, which defined the global arrow function
// prints {} in node.js, which is the same as a global this

this in Vue

1
2
3
4
5
6
7
8
9
10
11
12
13
<template />

<script>
export default {
  data: () => ({
    d: this // this gives undefined
  }),
  methods: {
    f1 () { console.log(this) }, // prints current Vue component
    f2: () => this // this gives undefined
  }
};
</script>

Class VS Function

Class

  • Use class to create a class.
  • Always add a constructor.
1
2
3
4
5
6
7
8
9
10
11
class Car {
  constructor(name, year) {
    this.name = name;
    this.year = year;
  }
}

const myCar = new Car("Ford", 2014)

console.log(myCar)
// Car { name: 'Ford', year: 2014 }

Class rewritten in Function

  • Classes are essentially functions. Functions can be invoked with new too.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
function Car(name, year) {
  this.name = name
  this.year = year
}

Car.prototype.age = function (x) {
  return `it is ${x - this.year} years old`
}

Car.prototype.age1 = x =>`it is ${x - this.year} years old`

const myCar = new Car("Ford", 2014)

console.log(myCar)
// Car { name: 'Ford', year: 2014 }

console.log(myCar.age(2022))
// it is 8 years old

console.log(myCar.age1(2022))
// It is NaN years old
// this in arrow function returns global this which is {} in node.js

Javascript this && Javascript Class VS Function

https://blog-cdt1.vercel.app/2022/10/29/Javascript-this-and-class-vs-function/

Author

Chendongtian

Posted on

2022-10-29

Updated on

2023-08-04

Licensed under

#

Like this article? Support the author with

Comments

×