this keyword quiz

In most cases, the value of this
 is determined by how a function is called (runtime binding).

Let's have a look some examples

Q1

function a(){
  function b(){
    console.log(this) // window
    function c(){
      "use strict";
      console.log(this) // undefined
    }
    c()
  }
  b()
}
a()

In a function with strict mode, this is undefined.

Q2

var name = 'A'

function special(){
  console.log(this.name)
}

var girl = {
  name:'B',
  detail: function(){
    console.log(this.name)
  },
  woman: {
    name: 'C',
    detail: function(){
      console.log(this.name)
    }
  },
  special: special
}
girl.detail() // b
girl.woman.detail() // c
girl.special() // b

girl.detail(), in detail function, this point to girl object
girl.woman.detail(), in detail function, this point to woman object
girl.special(), in special function, this point to girl.

Q3

var name = 'red'

function a(){
  var name = 'white'
  console.log(this.name)
}
function d(i){
  return i()
}
var b = {
  name:'yellow',
  detail: function(){
    console.log(this.name)
  },
  bibi: function(){
    console.log(this.name + 'bibi is called.')
    return function(){
      console.log(this.name)
    }
  }
}
b.detail() // yellow, b call detail function, so 
var c = b.detail
c() // red

b.a = a
a() // red
b.a() // yellow

var e = b.bibi() // yellow bibi is called.
d(b.detail) // red
e() // red

b.detail(), b call detail function, so in detail function scope, this points to object b.
var c = b.detail, assign detail function to variable c
c(), in this function, this point to window
var e = b.bibi(), b.bibi() means execute bibi function, and return a new function to var e.

Q4

const obj = {
    name: 'xiu',
    sing() {
        return 'lalalal ' + this.name
    },
    singAgain(){
        return this.sing() + this.name
    }
}
obj.sing() // lalalal xiu

Q5

function importantPerson(){console.log(this.name)}
const name = 'sunny'
const obj1 = {
    name:'xiu',
    importantPerson:importantPerson
}
const obj2 = {
    name:'gou',
    importantPerson:importantPerson
}
importantPerson() //sunny
obj1.importantPerson() // xiu
obj2.importantPerson() // gou

Q6

const a = function(){
    console.log(this) // window
    const b = function(){
        console.log(this) // window
        const c = {
            hi: function(){
                console.log(this) 
            }
        }
        c.hi() // object c, as c call hi function
    }
    b()
}
a()

Q7

const obj = {
    name: 'xiu',
    sing() {
           console.log('a', this) // obj
           var anotherFunc = function(){
              console.log('b', this) // window
           }
       anotherFunc()
        }
}
obj.sing()

Q8

const obj = {
    name: 'xiu',
    sing() {
           console.log('a', this) // obj
           var anotherFunc = () => {
              console.log('b', this) // obj
           }
       anotherFunc()
        }
}
obj.sing()

in arrow function, they don't have this keyword, they inherit it from their parent.

Q9

const obj = {
    name: 'xiu',
    hobbies: ['coding','sleeping'],
    show() {
        this.hobbies.map((hobby) => {
           console.log(`${this.name} loves ${hobby}`)})
    },
    showAgain() {
         this.hobbies.map(function(hobby){
           console.log(`${this.name} loves ${hobby}`)
    })}
}
obj.show()
obj.showAgain()

obj.show(), as it's arrow function in show(), so this point to obj
obj.showAgain(), this point to window,

Q10

let f = function(){
    console.log('1',this) \\ window
    const say = () => {
        console.log('2',this)
    }
    say() \\ window
}
f()

Q11

const a = {
  say(){
    console.log('a',this)
    const b = function(){
      console.log('b', this)
      const f = () => {
        console.log('f',this)
      }
      f()
    }
    b()
    const d = () => {
      console.log('d', this)
    }
    d()
  },
}
a.say()

// a: a
// b: window
// f: window
// d: a