js function's "this"

fn-this.js

const obj = {
    child: {
        child: {
            value: 1,
            fn: function () {
                console.log(this.value)
            }
        }
    }
    
}
// normal usage
obj.child.child.fn();

// optional chaining usage
obj?.child?.child?.fn?.()

// with eslint below version 7.5.0, will trigger rule `no-used-expression`, change code to fix it, then touch a `this` error
const fn = obj?.child?.child?.fn;
if (fn) {
    fn(); // log undefined
}

// use `call`
const fn = obj?.child?.child?.fn;
if (fn) {
    fn.call(obj?.child?.child); 
}