this指向(只看调用不看定义)

114 阅读1分钟
/*
  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
*/
// 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


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

// div.addEventListener('click', obj.f) // 事件处理函数 this -> 事件源


// 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