JavaScript 程式執行原理:hw4:What is this?


Posted by backas36 on 2021-08-16

hw4:What is this?

請說明以下程式碼會輸出什麼,以及盡可能詳細地解釋原因。

const obj = {
  value: 1,
  hello: function() {
    console.log(this.value)
  },
  inner: {
    value: 2,
    hello: function() {
      console.log(this.value)
    }
  }
}

const obj2 = obj.inner
const hello = obj.inner.hello
obj.inner.hello() // ??
obj2.hello() // ??
hello() // ??

Answer:

在 hw0作業起手式,有說過可以將呼叫 function 看成 xxx.function.call(xxx) 來看,我自己解讀的時候會在心裡默念

『什麼東西』call這個 function,`this` 就在call的括號裡面上這個『什麼東西』

( 雖然聽起來很奇怪 )
所以就用這個聽起來很奇怪的口號的來解析一下這段程式碼:

第一個:

obj.inner.hello() => 『obj 的 inner 呼叫 hello,所以 call 括號裡面是 obj.inner』 => obj.inner.hello.call(obj.inner) => 2

第二個:

obj2.hello() => 『obj2 呼叫 hello,所以 call 括號裡面是 obj2 ,而且 obj2 等於是 obj.inner 』=> 所以 obj2.hello.call(obj2) 就等於 obj.inner.hello.call(obj.inner) => 2

第三個:
hello() => 『沒有東西呼叫 hello,所以call括號裡面是沒有東西』=> undefined.hello.call(undefined) => undefined


關於 hello() 如果要正確顯示的話,我們可以利用 call 第一個參數來將 this 改變:

hello.call(obj) //1
hello.call(obj2) //2

也就是說 call 的第一個參數將會取代 this 值,第一個參數是什麼,this 就會變成什麼,例如 hello.call(obj),就是將 this 變成 obj ,而 obj 的 value 就是 1 ;如果帶入的事 obj2 ,因為 obj2 就是 obj.inner 所以你可以想像成這樣子 hello.call(obj.inner)

當然使用 apply 的話也是一樣的,call 與 apply 做的事情一樣,只是帶入參數的方式不同,而這個範例中 hello 並不需要帶入參數。

hello.apply(obj)
hello.apply(obj2)

還有剛剛作業起手式提到的 bind,剛剛的 call 與 apply 都是用在直接呼叫 hello,如果我們用 bind 改寫可以寫成這樣:

const hello = obj.inner.hello.bind(obj.inner)
hello()

bind 的參數就會等於 this


#js #程式導師實驗計畫第五期 #this







Related Posts

React timer-1

React timer-1

JS註冊組|基本資料型態、變數|JavaScript新手學習筆記

JS註冊組|基本資料型態、變數|JavaScript新手學習筆記

函式與作用域

函式與作用域


Comments