0. Introduction

0-1. Greeting

I think one of the trickiest parts of JavaScript is 'this' keyword because it depends on various situations. So, let me explain the keyword using some classifications.

0-2. Classifications

• In the Global Environment

• In a Constructor

• As a Class Field

• In a Regular Function

• In an Arrow Function

1. In the Global Environment

1-1. What Is 'Global Environment'?

※ This term is made by me, so it can be only applied to this article.

It refers to an environment that is not a function block or a class block.

1-2. Conclusion

In a browser, it refers to the global object, which is 'window'.

In Node.js, it refers to an instance of 'Object'.

1-3. Examples

console.log(this);
// browser: window
// Node.js: {}

2. In a Constructor

2-1. Conclusion

It refers to the instance.

2-2. Examples

|in a function constructor|

function C1(p1) {
  this.k1 = p1;
}

const i1 = new C1('v1');

console.log(i1.k1); // v1

|in a class constructor|

class C1 {
  constructor(p1) {
    this.k1 = p1;
  }
}

const i1 = new C1('v1');

console.log(i1.k1); // v1

3. As a Class Field

3-1. Conclusion

If it is an instance field, it refers to the instance.

If it is a static field, it refers to the class.

3-2. Examples

|as an instance field|

class C1 {
  k1 = 1;
  k2 = this;
}

const i1 = new C1();

console.log(i1.k2); // C1 {k1: 1, k2: C1}

|as a static field|

class C1 {
  static k1 = 1;
  static k2 = this;
}

console.log(C1.k2); // class C1

4. In a Regular Function

4-1. What Is a Regular Function?

It refers to a function that uses 'function' keyword. So, it is not an arrow function.

4-2. Conclusion

It refers to the object that has the function.

4-3. Examples

|in a method|

const o1 = {
  k1: 'v1',
  m1() {
    return this;
  },
};

console.log(o1.m1()); // {k1: 'v1', m1: ƒ}

|in a prototype method|

※ I don't know how to call the function exactly. Please understand.

function C1() {
  this.k1 = 'v1';
}

C1.prototype.m1 = function () {
  return this;
};

const i1 = new C1();

console.log(i1.m1()); // C1 {k1: 'v1'}

|in a static method of a class|

class C1 {
  static f1 = 'v1';
  static m1() {
    return this;
  }
}

console.log(C1.m1()); // class C1

|in a nested function|

const o1 = {
  k1: 'v1',
  m1() {
    function f1() {
      return this;
    }
    return f1();
  },
};

console.log(o1.m1());
// browser: window
// Node.js: global

5. In an Arrow Function

5-1. Conclusion

It refers to 'this' in the upper environment, which means 'this' binding does not occur.

5-2. Examples

|in a method|

const o1 = {
  k1: 'v1',
  m1: () => {
    return this;
  },
};

console.log(o1.m1());
// browser: window
// Node.js: {}

|in a prototype method|

※ I don't know how to call the function exactly. Please understand.

function C1() {
  this.k1 = 'v1';
}

C1.prototype.m1 = () => {
  return this;
};

const i1 = new C1();

console.log(i1.m1());
// browser: window
// Node.js: {}

|in a static method of a class|

class C1 {
  static f1 = 'v1';
  static m1 = () => {
    return this;
  };
}

console.log(C1.m1()); // class C1

|in a nested function|

const o1 = {
  k1: 'v1',
  m1() {
    const f1 = () => this;
    return f1();
  },
};

console.log(o1.m1()); // {k1: 'v1', m1: ƒ}