###### tags: `學習` `JavaScript` `this`
{%hackmd BJrTq20hE %}
# this 的運作

## 1.this的指向

1.this的指向與如何調用this有關

範例1.

var a = '全域';
//不使用let、const 是因為用let、const所宣告的變數不會存在window內，使用的話會出現undifined
function  fn(){
  console.log(this.a)
}
fn()//'全域'

範例2.

var a = '全域';
//不使用let、const 是因為用let、const所宣告的變數不會存在window內，使用的話會出現undifined
const obj ={
  a:'a',
  fn(){
  console.log(this.a)
  }
}
obj.fn()//'a'

上面這個例子是在obj調用所以this指向obj

範例3.

var a = '全域';
  const obj ={
  fn(){
  console.log(this.a)
    }
}
const newObj = {
  a:123,
  ...obj
}
 newObj.fn()//123

newObj中調用所以this指向newObj

範例4.

var a = '全域';
const obj ={
  a:'a',
  fn(){
  console.log(this.a)
  }
}
const newObj = {
  a:123,
  ...obj
}
 newObj.fn()//a

不過還是要注意陷阱，雖然是由newObj調用但是在obj中有a:'a'會把先寫a:123取代，console.log(newObj)就可以得到答案。

範例5.

var a = '全域';
function fn(){
  console.log(this.a)
}
const obj ={
  a:'a',
  fn
}
 obj.fn()//a

這裡的this是指向obj，因為fn()是從obj內調用的。

範例6.

var a ='全域';
function fn (){
  return this.a
}

const obj ={
    a:'我在外層',
    fn,
    innerObj:{
    a:'我在內層',
    fn,
    }
}
obj.fn()//'我在外層'
obj.innerObj.fn()//'我在內層'

直接看fn().前的物件，就是this的指向

範例7. simple call

var a ='全域';
function fn (){
console.log(this.a) 
}
const obj ={
    a:'a',
    newfn(){
      fn() // simple call
    }
}
obj.newfn()//'全域'

simple call 指向全域，而且一般不會這樣子使用

範例8. call back function

var a = "全域";
function fn() {
  console.log(this.a);
}
const obj = {
  a: "a",
  newfn() {
    setTimeout(function () {
      fn();
    });
  }
};
obj.newfn();//全域

call back function 大多數也是simple call，this會指向windon