Understanding JavaScript this Binding Rules and Their Priorities

The article begins by stressing that a function's this value depends on where it is defined and how it is called, not on where it is executed. It introduces four binding scenarios and their typical call locations.

1. Call Location

Scope is determined by the definition site.

this points to the object used in the call expression.

In strict mode, default binding yields undefined instead of window .

2. Binding Rules

2.1 Default Binding

When a function is invoked without an explicit receiver, this defaults to the global object ( window ) or undefined in strict mode.

function bar() {
  console.log(this); // window (or undefined in strict mode)
}

2.2 Implicit Binding

If a function is called as a property of an object, this is bound to that object.

const info = {
  fullName: 'ice',
  getName: function() {
    console.log(this.fullName);
  }
};
info.getName(); // 'ice'

When the method reference is detached, the implicit binding is lost and the call falls back to default binding.

const fn = info.getName;
fn(); // undefined (or window)

2.3 Explicit Binding (call / apply / bind)

These methods let you manually set this for a function call.

fn.call(info, 20, 1.88);
fn.apply(info, [20, 1.88]);
const boundFn = fn.bind(info, 20);
boundFn(1.88);

2.4 New Binding

Using new creates a fresh object, binds this to it, and runs the constructor.

function Person(name, age) {
  this.name = name;
  this.age = age;
}
const p1 = new Person('ice', 20);
console.log(p1); // {name:'ice', age:20}

3. Binding Priority

The order from highest to lowest is: new binding > bind (hard binding) > call/apply > implicit binding > default binding.

4. Arrow Functions

Arrow functions do not have their own this ; they inherit it from the surrounding lexical scope.

const info = {
  fullName: 'ice',
  getName: () => {
    console.log(this.fullName); // refers to window/global
  }
};
info.getName(); // global ice

Using an arrow function inside a method can capture the outer this , solving the "lost this" problem when returning nested objects.

const info = {
  fullName: 'ice',
  getName: function() {
    return {
      getObjName: () => {
        console.log(this.fullName); // 'ice'
      }
    };
  }
};
const obj = info.getName();
obj.getObjName(); // 'ice'

5. Summary

Four binding rules: default, implicit, explicit (call/apply/bind), new.

Priority: new > bind > call/apply > implicit > default.

Arrow functions capture lexical this and avoid implicit loss.

6. Conclusion

The article ends with an analogy: persistent debugging is like a stonecutter striking a rock repeatedly—progress comes from accumulated effort.