js中this的使用(九题)

145 阅读1分钟

this两个真理

  1. 普通函数 -- 在哪里调用,this指向哪里
  2. 箭头函数 -- 函数申明在哪里,this就指向哪里

第一题

function foo() {
  console.log(this.a);
}

var a = 1

var obj = {
  a: 2,
  foo: foo
}

obj.foo() // 2

第二题

function foo() {
  console.log(this.a);
}

var a = 1

var obj = {
  a: 2,
  foo: foo() // 在obj里面调用而不是obj调用
}

obj.foo // undefined(1)

第三题

function foo() {
  console.log(this.a);
}

var a = 1

var obj = { 
  a: 2,
  foo: foo
}

var obj2 = {
  a: 3,
  foo: obj.foo
}
 
obj2.foo() // 3

第四题

function foo() {
  console.log(this.a);
}

var a = 1

var obj = { 
  a: 2,
  foo: foo
}

var obj2 = {
  a: 3,
  foo: obj.foo()
}
 
obj2.foo // 2

第五题 隐式丢失

function foo() {
  console.log(this.a);
}

var a = 1

var obj = { 
  a: 2,
  foo: foo
}

var bar = obj.foo

bar() // undefined(1)

第六题

var a = 1
const fn = () => {
  console.log(this.a);
}

const obj = {
  a: 2,
  fn: fn
}
obj.fn() // undefined(1)
=> 申明在哪里就在那里使用 

第七题

const a = {
  b: 2,
  foo: function() {
    console.log(this.b);
  }
}
 
function b(foo) {
  foo()
} 
a.foo() // 2
b(a.foo) 
// undefined(全局) this指向函数b,相当于b.foo

第八题

const a = {
  b: 2,
  foo: () => {
    console.log(this.b);
  }
}
 
function b(foo) {
  foo()
} 

b(a.foo) //undefined a没有this概念(除了全局只有函数)

第九题

const a = {
  b: 2,
  foo: () => {
    console.log(this.c);
  }
}
 
{
  let c = 3
  function b(foo) {
    foo()
  }
  b(a.foo) // undefined
}