In JavaScript, the binding of this primarily follows four rules, listed below in order of priority from highest to lowest:

1. New Binding

When a function is invoked with the new keyword (i.e., as a constructor), a new object is created, and this is bound to that new object.

function Person(name) {
  this.name = name;
}
const p = new Person('Damo');
console.log(p.name); // 'Damo'

Here, this refers to the newly created instance.

2. Explicit Binding

You can explicitly set the value of this using the methods call, apply, or bind.

function greet() {
  console.log(`Hello, ${this.name}`);
}
const obj = { name: 'Damo' };
greet.call(obj);     // Hello, Damo
greet.apply(obj);    // Hello, Damo
const boundGreet = greet.bind(obj);
boundGreet();        // Hello, Damo

Note: bind returns a new function whose this is permanently bound (unless the function is invoked with new).

3.Implicit Binding

When a function is called as a method of an object, this is bound to that object.

const obj = {
  name: 'Damo',
  sayHi() {
    console.log(this.name);
  }
};
obj.sayHi(); // Damo

⚠️ Beware of “implicit loss”: if you assign the method to a variable or pass it as a callback, the this context may be lost.

const fn = obj.sayHi;
fn(); // undefined (or global object in non-strict mode)

4. Default Binding

When a function is called independently (with no context), this uses the default binding:

• In non-strict mode, this refers to the global object (window in browsers, global in Node.js).
• In strict mode ('use strict'), this is undefined.

function foo() {
  console.log(this);
}
foo(); // 非严格模式：window；严格模式：undefined

Additional Note: Arrow Functions

Arrow functions do not have their own this. Instead, they lexically inherit this from the enclosing scope, so they are not affected by the four binding rules above.

const obj = {
  name: 'Damo',
  greet: () => {
    console.log(this.name); // this 指向外层（通常是 window 或 undefined）
  },
  greetNormal() {
    const arrow = () => console.log(this.name);
    arrow(); // 'Damo'，因为箭头函数继承了 greetNormal 的 this
  }
};
obj.greet();       // undefined
obj.greetNormal(); // Damo

Priority Summary (Highest to Lowest):

1. New Binding
2. Explicit Binding (call / apply / bind)
3. Implicit Binding (method calls on objects)
4. Default Binding (standalone function calls)

Arrow functions bypass these rules entirely—they capture this lexically at definition time.

Thought Experiment (a.k.a. “Looking for Trouble” Section):

1. What happens if you call the call, apply, or bind methods on a function that is invoked with new?
2. What happens when you use new on a method of an object versus using new on a method of a class?
3. Can you directly assign a value to this? For example:

this = { a: 'Hello' };