this keyword quiz
Tags: javascript
Published: 2023-02-07 05:20:38

> 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
```