JavaScript的this指向

this 指向

定义:

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

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

指向：

=> 全局使用: window
=> 函数使用: 不管函数怎么定义, 不管函数在哪定义, 只看函数的调用(箭头函数除外)
-> 普通调用(直接调用/全局调用)

函数名(): this -> window

xxx.函数名(): this -> 点前面是谁就是谁

setTimeout(function () {}, 0): this -> window
val(function () {}, 0): this -> window
-> 事件处理函数

xxx.onclick = function () {}: this: 事件源(绑定再谁身上的事件)
ventListener(‘’, 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