JavaScript中的this指向

this 指向

定义:

=> this 是一个使用再作用域内部的关键字

=> 全局很少用, 大部分是在函数内部使用

指向：

=> 全局使用: window
            => 函数使用: **不管函数怎么定义, 不管函数在哪定义, 只看函数的调用(箭头函数除外)**
            -> 普通调用(直接调用/全局调用)
              + 函数名(): this -> window
            -> 对象调用
              + xxx.函数名(): this -> 点前面是谁就是谁
            -> 定时器处理函数
              + setTimeout(function () {}, 0): this -> window
              + setInterval(function () {}, 0): this -> window
            -> 事件处理函数
              + xxx.onclick = function () {}: this: 事件源(绑定再谁身上的事件)
              + xxx.addEventListener('', function () {}): this: 事件源
            -> 自执行函数
              + (function () {})(): this -> window

示例1：普通调用

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

    fn() // 普通调用 this -> window

示例2：对象调用

function fn() {
      console.log(this)
    }
var obj = {
      // 把 fn 存储的地址赋值给了 obj 的 f 成员
      // 从现在开始 obj.f 和 全局变量 fn 指向同一个函数空间
      f: fn,
      name: '我是 obj 对象'
    }

    obj.f() // 对象调用 this -> obj

示例3：定时器调用

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

    fn() // 普通调用 this -> window

    var obj = {
      // 把 fn 存储的地址赋值给了 obj 的 f 成员
      // 从现在开始 obj.f 和 全局变量 fn 指向同一个函数空间
      f: fn,
      name: '我是 obj 对象'
    }

    obj.f() // 对象调用 this -> obj

    // 把 fn 函数当作定时器处理函数使用
    setTimeout(fn, 0) // 定时器处理函数 this -> window
    setTimeout(obj.f, 0) // 定时器处理函数 this -> window

示例4：事件处理函数

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

    fn() // 普通调用 this -> window

    var obj = {
      // 把 fn 存储的地址赋值给了 obj 的 f 成员
      // 从现在开始 obj.f 和 全局变量 fn 指向同一个函数空间
      f: fn,
      name: '我是 obj 对象'
    }

    obj.f() // 对象调用 this -> obj


    var div = document.querySelector('div')
    // 当点击 div 的时候, 执行 obj.f 这个函数
    // div.onclick = obj.f // 事件处理函数 this -> 事件源
    div.addEventListener('click', obj.f) // 事件处理函数 this -> 事件源 （div）

示例5：各种复杂环境下的调用

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

    fn() // window

    setTimeout(function () {
      fn() // window
    }, 0)

    var div = document.querySelector('div')
    div.onclick = function () {
      function f() {
        console.log(this)
      }

      f() // window
    }



    var obj = {
      name: '我是 obj 对象',
      fn: function () {
        console.log(this)
        function fun() {
          console.log(this)
        }

        fun() // window
      }
    }

    obj.fn() // this -> obj

    //把 obj 里面 fn 成员存储的函数地址赋值给了全局变量 f
    //全局变量 f 和 obj.fn 指向同一个函数空间
    var f = obj.fn

    f() // this -> window