what is this?

a simple example:

var getGender = function(){
  return this.gender;
};
 
var people1 = {
  gender: 'female',
  getGender: getGender
};
 
var people2 = {
  gender: 'male',
  getGender: getGender
};
 
console.log( people1.getGender() );
console.log( people2.getGender() );

what is the following ans?

var obj = {
  foo: function(){
    console.log(this)
  }
}
 
var bar = obj.foo
obj.foo()
bar()

Let's learn it step by step!

there's three way to call func

func(p1, p2)
 
obj.child.method(p1, p2)
 
func.call(context, p1, p2)
 
//put apply a side

The first two is just the syntactic sugar

func(p1, p2)
 
func.call(undefined, p1, p2)
 
obj.child.method(p1, p2)
 
obj.child.method.call(obj.child, p1, p2)

Context

• strict mode -> undefined obj
• in browser -> window

var obj = {
  foo: function(){
    console.log(this)
  }
}
 
var bar = obj.foo
 
//bar() convert to
bar.call(undefined);
 
//obj.foo() convert to
obj.foo.call(obj);
 

quiz

const obj = {
  value: 1,
  hello: function() {
    console.log(this.value)
  },
  inner: {
    value: 2,
    hello: function() {
      console.log(this.value)
    }
  }
}
 
const obj2 = obj.inner
const hello = obj.inner.hello
obj.inner.hello()
obj2.hello()
hello()

const obj2 = obj.inner
const hello = obj.inner.hello
 
obj.inner.hello()
//obj.inner.hello.call(obj.inner)
 
obj2.hello()
//obj2.hello.call(obj2)
 
hello()
//hello.call(undefined)

function hello() {
  console.log(this)
}
 
var a = { value: 1, hello }
 
var b = { value: 2, hello }
 
hello()
 
a.hello()

hello()
// hello.call(undefined)
 
a.hello()
// a.hello.call(a)

var x = 10
var obj = {
  x: 20,
  fn: function() {
    var test = function() {
      console.log(this.x)
    }
    test()
  },
//   如果這樣寫 就會抓到 20 ㄌ
  testFn: function(){
      return(this.x)
  }
}
 
obj.fn()
 
obj.testFn()
// 他會等同於 
// obj.testFn.call(undefined)
// 還是
// obj.testFn.call(this)

a very good introduction.
https://blog.techbridge.cc/2019/02/23/javascript-this/