this指向

概念

• this 是一个关键字
• 是一个使用在作用域内的关键字
• 要么全局使用，this 就是 window
• 要么使用在函数内，this 表示的是该函数的 context(执行上下文)

函数内的 this (私人)

• 概念: 函数内的 this, 和 函数如何定义没有关系, 和 函数在哪定义没有关系
  => 只看函数是如何被调用的(箭头函数除外)
  • 几种调用方式, 决定不同的 this 指向
    1. 普通调用
       => 函数名()
       => 该函数内的 this 指向 window
    2. 对象调用
       => 对象名.函数名()
       -> 对象名’函数名’
       -> 数组索引
       => 该函数内的 this 指向 点 前面的内容
       -> 也就是那个对象或者数组
    3. 定时器处理函数
       => setTimeout(函数, 时间)
       setInterval(函数, 时间)
       => 该函数内的 this 指向 window
    4. 事件处理函数
       => 事件源.on事件类型 = 事件处理函数
       事件源.addEventListener(‘事件类型’, 事件处理函数)
       => 该函数内的 this 指向 事件源(谁身上的事件)
    5. 自执行函数
       => (function () {})()
       ~function () {}()
       !function () {}()
       => 该函数内的 this 指向 window
    6. 未完待续…

1.全局使用 this

     console.log(this)
     console.log(window)
     console.log(window === this) //true

2-1. 普通调用

     function fn() {
       console.log('我是全局 fn 函数')
       console.log(this)
       console.log('-------------------------')
     }
     // 标准的 普通调用
    // fn 这个函数内的 this 就是 window
     fn()

2-2. 对象调用

   // 把 fn 变量存储的地址赋值给了 obj 内的 fun 成员
    // 从此以后, obj.fun 和 fn 是一个函数
    // var obj = { fun: fn }
    // 调用 obj 内 fun 存储的函数, 也就是全局的 fn 函数
     // obj.fun()

2-3. 定时器处理函数

   // 1000ms 以后执行的是 fn 函数
    // 在这里把 fn 函数当做定时器处理函数来使用了
	// setTimeout(fn, 1000)

2-4. 事件处理函数

 // var box = document.querySelector('div')
    // 当你点击 box 元素的时候, 执行 fn 函数
    // 此时, 把 fn 函数当做事件处理函数使用了
    // box.onclick = fn

2-5. 自执行函数

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