JavaScript 深入this指向

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第30天，点击查看活动详情

在JavaScript中 this 是其核心特性之一，是其变量访问机制当中的一环，我们在使用构造函数，函数，作用域的时候，都需要考虑其指向性问题，是前端程序员必备的核心知识点，也是面试当中常问的知识点，下面让我们来看看他的各种情况~

核心概念

只要封装函数,任何一个函数系统都会内置一个叫this的变量,this存储的是当前函数主人的地址
this 永远指向当前函数的主人,也就是最直接的调用对象,函数的主人要通过当前上下文去判断

指向情况

全局中的 this

任何情况下直接在script中写入的this都是window

函数中的 this

this 指向和 函数定义在哪里没有关系, 和函数怎么定义没有关系, 只和函数如何调用有关系(箭头函数除外) 非严格模式this指向window，严格模式时，this指向undefined

• 回调函数

  1. 通过别的函数内执行回调函数 ||requestAnimationFrame(函数)|| 默认状态下,数组的部分遍历方法,回调函数中的this指向 || 方法同上↑
  2. 部分数组方法中forEach,flatMap,filter,map,some,every,find,findIndex,第二个参数,是改变的this指向, 第二个参数不填, 数组方法中默认的this指向的是 window

  arr.forEach(函数,参数) 参数就是需要改变的this指向
  

• 全局函数

非严格模式this指向window，严格模式时，this指向undefined

function fn(){
    console.log(this);
}
fn(); // window

• 箭头函数
  不管是否严格模式，this都指向箭头函数外上下文环境的this指向, 如果是嵌套的对象，访问的时候会向上级访问

var fn=()=>{
    console.log(this); // window 
}
fn();

对象中的this

对象属性中的this,指向对象外上下文环境的this
对象名.函数名() this就是 点前面的 对象
对象里面的函数的this指向这个对象,如下 (谁执行该方法,就指向谁)

var person = {
    name: '钢铁侠',
    user: this.name,  这里的this是window, window.this=null
    show: function(){
        person.name
        this.name
        这里面的tihs是person,上面两个拿到的值都是钢铁侠
     	let obj = {
            e: this.name 
            这里的 this 是当前对象外的 this 这里就是 钢铁侠
        } 
    }
}    

事件处理函数中的this

事件源.on事件类型 = 函数
事件源.addEventListener('事件类型', 函数)
this 就是 事件源(绑定在谁身上的事件)
指向函数的主人,不会因为点击事件目标的改变而改变 如下

<ul>
    <li></li>
</ul>
这里我们给ul设置点击事件
当点击在ul身上的时候,this指向的是ul,target事件目标是ul
当点击在li身上的时候,this指向的还是ul,target事件目标是li
var obj = { 
    fn: function(){
        this
    }
}
obj.fn() 这里的this 指向obj
var ul = document.querySelector('ul')
ul.onclick = obj.fn 这里的this指向ul
ul.onclick = function a(){
    this 这里的this指向ul
    obj.fn() obj里得this指向obj
    function res(){
        this 指向window
    }
    res() res里得this指向window
}

定时器中的this

setTimeout(函数,数字) setInterval(函数,数字) 严格模式和非严格模式: this 指向 window 这个和定时器源码的内部调用有关,定时器内部是通过apply进行绑定的this对象,并且绑定的是window

setTimeout(function a(){
    this 这里的this 指向window
    obj.fn() 对象obj里面的this 指向obj
},2000)

arguments中的this

arguments [回调函数下标]() 如果用这种方式 使用回调函数,在执行的时候,回调函数中的this指向调用当前函数上下文环境中的 arguments !!

function fn(){ console.log(this) };
function fn1(){ arguments[0]() }
fn1(fn) // 这里的this 指向 fn1 函数的 arguments

匿名函数中的this

匿名函数中的this: 匿名函数的执行环境具有全局性，this通常指向window ,可以通过变量的形式指定this

let flag = 'window'
let obj = {
    flag:'local',
    say:funciton(){
    	let that = this; // 此处的this是object
    	return function(){
            console.log(that.flag,this.flag) // 分别是 lacal 和 window
        }
	}
}

类中的this

• 构造函数中的this指向实例当前类所产生的实例化对象
• 类中实例化方法中 this, 谁调用这方法, this指向谁
• 类中静态方法总的 this,指向该类
• 类中实例化箭头函数中的this,仍然指向当前的实例化对象

原型对象中的this

• 指向实例化对象
• 箭头函数指向window