重学前端之 让人心态爆炸的this到底是个什么玩意

1,231 阅读4分钟

一.前言

两年前,曾经的组长对我说过,一个前端连闭包原型this都搞不明白,还好意思说自己是前端。之后我一直去试着理解this,看了好多博客和视频教学,发现好像并不是特别好理解。但是在之后的项目中,我都使用了this。在接触和使用过后,好像对this有点了解,特别写一篇博客记录一下关于this的二三事,方便以后查询,也给刚刚接触前端的小伙伴一点点帮助

二.this是什么?

首先this在js中理解起来很简单,他就是当前对象,也可以理解成指向的对象,那么问题来了,那么我怎么知道当前指的是那个对象?

三.this的到底指向的是谁?

首先我们想理解this的话,我们必须要理解两句话
全局变量是window的属性,函数是window的方法
this谁最后调用,他就是谁

首先我们理解一下使用代码理解一下

let a = '5'
console.log(window.a)  //5
function foo(){
    reutrn 'foo'
}
console.log(window.foo())   //foo

我们申明了一个全局变量a和一个函数foo,但是我们调用他们的时候并没有直接调用,而是使用window这个全局对象调用来调用属性和方法的方式调用,所以可以看到打印出他们的值,可以得出全局变量是window的属性,函数是window的方法这一结论 然后我们运行代码

var name = 'Tom'
function name(){
    var name = 'Jerry'
    console.log(this.a)
}
name()  // 'Tom'
console.log(this)   //window

在全局作用域中,函数是window的方法,name函数由window调用,那么函数内部的this指向的就是window,当然打印出出的this.name当然就是全局作用域下的name值了 简单了解了this的指向,我们细分一下几个复杂场景下面的this指向(this到底是谁)

在函数内部嵌套的内部函数

    var name = 'apple'
    function fn0(){
        var name = 'Tom'
        function fn1(){
            console.log(this.name);
        }
        fn1();
    }

    fn0();

函数内部嵌套的内部函数,依然指向全局对象(window)

在构造函数中和对象中

    function Person(name){
        this.name = name;
        this.say = function(){
          console.log('Hello'+this.name)
        }
    }
    Person.prototype.printName = function(){
        console.log(this.name);
    };
    
    var a = new Person('Byron');
    a.say()     //"HelloByron"
    a.printName()   //"Byron"

在构造函数中,this的指向就调用他这个对象的方法,无论是否在原型上

var name = 'apple'
var obj1 = {
    name: 'Byron',
    fn : function(){
        console.log(this.name);
    }
};
obj1.fn()   //  Byron

在对象中使用也是一样,this的指向在就是他调用他这个对象上 这里有个小陷阱,加上代码看一下

var fn2 = obj1.fn;
fn2();  //'apple'

我们把方法赋值给一个变量,直接用变量调用看看,这个时候我们就可以看出来,this的指向改变了,变成全局的了,符合我们上面的第二句话,this谁最后调用,他就是谁

setTimeout、setInterval

在setTimeout、setInterval的内部函数中,无论是谁调用,他指向的都是全局变量

var name = 'apple'
var obj1 = {
    name: 'Byron',
    fn : function(){
       setTimeout(function(){
           console.log(this.name)
       },300)
       setInterval(function(){
           console.log(this.name+'666')
       },300)
    }
};
ob1.fn()    //apple
            //apple+666
fn1 = obj1.fn
fn1()       //apple
            //apple+666

可以看得出来,打印的结果可以得出this指向的都是全局对象window

DOM对象绑定事件

document.querySelector('input') = function(){
    console.log(this.value)
}

DOM对象绑定事件中的函数中的this指向的是当前这个DOM节点

箭头函数

箭头函数中,this的指向有点特别:创建时的封闭词法上下文的this保持一致

var name = 'tom'
var obj1 = {
    name :  'Byron',
    fn :function(){
        setTimeout(()=>{
        console.log(this.name)
      },0)
    }
};
obj1.fn() //'Byron'

由于箭头函数特殊的原因,箭头函数没有原型,所以箭头函数本身没有this,他只能指向定义外层第一个普通的this,那如果那个普通的this变化了,箭头函数中的this会指向哪呢?

var name = 'tom'
var obj1 = {
    name :  'Byron',
    fn :function(){
        setTimeout(()=>{
        console.log(this.name)
      },0)
    }
};
var obj2 = {
    name : 'hello world'
}
obj1.fn.call(obj2) //'hello world'

可以看出如果外层的this变化了,箭头函数内的this会随着外层的变化而变化

四.总结

    1.this的指向不是固定的,是会变化的(这篇博客还没有讲call,apply,bind等函数的用法)
    2.this谁调用他,他就指向谁
    3.在setTimeout、setInterval中,不使用箭头函数的情况下this指向全局对象window
    4.箭头函数没有原型,this指向外层作用域

五.结语

想要彻底了解this,必须在项目中多多使用this,遇到问题打印一下,结合网上的博客分析为什么会这样,这样学习起来也比较快,理解也能加深,毕竟学习一个东西的最好的方法就是去使用他。如果文中有错误,希望大家在评论里面提出指正,本人加以改正