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)