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
Top comments (0)