this | Not Today !

“THIS” 執行函式的時候就會產生，他是一個關鍵字

每個執行環境都有屬於自己的this 關鍵字
this它的指向跟我們怎麼「定義」它沒有關係
this 與函式如何宣告、建立沒有關聯性，僅與 「呼叫方法/執行」有關

|| this 的調用方式

A. 物件的方法調用 (最常見的形式)

this 與函式如何宣告沒有關聯性，僅與呼叫方法有關
物件的方法調用時，僅需要關注是在哪一個物件下呼叫

var myName = '真心鎮大冒險'
function callName () {
  console.log(this, this.myName)
}

var family = {
  myName: '小明家',
  callName: callName
}

family.callName()    // {myName: "小明家", callName: ƒ} "小明家"

B. 簡易呼叫

直接調用都是屬於simple Code, ex:: closure 、IIFE、callback
Simple Code this 指向全域, 但如果在嚴格模式下就會顯示undefined

C. call, apply, Bind 方法

!參考

var myName = '真心鎮大冒險'
var family = {
  myName: '小明家'
}

function fn(para1, para2) {
  console.log(this, para1, para2)
}
// 第一個是帶入this物件
// call 立刻執行
// {myName: "小明家"} 1 2
fn.call(family, 1, 2)


// 帶入參數的方法用“”陣列
// {myName: "小明家"} 2 3
fn.apply(family, [2, 3]) 

// 不會立刻執行
// 可以帶入部分參數
// {myName: "小明家"} "JJ" “LL"
var fn2 = fn.bind(family, 'JJ', 'LL’)     fn2()

D. New

E. DOM事件處理器

<li>1</li> <li>2</li> <li>3</li> <li>4</li> <button onclick="console.dir(this)">press Btn</button> // this 是綁定 button 本身 <pre><code><li>1</li> <li>2</li> <button onclick="console.dir(this)">press Btn</button> <script> var fn = function () { console.dir(this) this.style.backgroundColor = 'orange' } var els = document.querySelectorAll('li') for (var i = 0; i < els.length; i++) { els[i].addEventListener('click', fn) } </script></code></pre>