iT邦幫忙

2022 iThome 鐵人賽

DAY 22
0
自我挑戰組

JavaScript101與人生幹話系列 第 22

JavaScript101與人生幹話-this的範例

  • 分享至 

  • xImage
  •  

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

人生幹話-上市櫃公司未必好

那個魔王級的專案是侵入式醫材,我是2019的五月到職,他們說預計明年初就會上市,所以要我再一個月之內先生一版出來,就在詳細規格與生產流程都不知道的情況之下,要生出來看起來已經試生產過而且沒問的品質文件,想當然沒有實際做過的東西,而且也沒相關的內部文件參考的情況之下怎麼可能生出完整且能通過審查的文件呢?不過至少從正常研發時期就該寫文件在這個時候就補齊了,剩下的就依照流程加磚添瓦寫一堆屁話?在寫文件寫累的時候我喜歡慢慢走到廁所,並在途中看看牆上的布告欄,在布告欄中看到一個消息也就是我認為這個公司不能久待的第三點。


上一篇
JavaScript101與人生幹話-JS 常見縮寫
下一篇
JavaScript101與人生幹話-箭頭函式與箭頭函式的this
系列文
JavaScript101與人生幹話30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言