啊，万恶的this

古城微笑少年丶 2023-07-06 13:10 33阅读 0赞

### 一、全局下，this一般都指向window ###

全局下，ES5非严格模式，下面的this都是window。

console.log(this);
    function abc(){ 
        console.log(this);
    }
    abc();

![在这里插入图片描述][20200219081952714.png]

### 二、对象中的this ###

1、最常见的this情况：

![在这里插入图片描述][20200219082954556.png]  
2、如果在对象的属性对象中：

![在这里插入图片描述][20200219083909370.png]  
3、如果obj已经创建完，再给obj增加属性，那么此时的obj.b的this还是指向window。

![在这里插入图片描述][20200219084303271.png]  
4、如果是对象中的属性函数下又新建对象，this指向外层对象obj。

var obj = { 
        a: 1,
        b: function () { 
            // this
            var obj2 = { 
                // this指当前对象外this的指向，这里的this指向是obj
                c: this.a
            }
            console.log(obj2.c);
        }
    }
    
    obj.b();

![在这里插入图片描述][2020021908465588.png]

### 三、回调函数中的this ###

回调：函数在另一个函数的参数里，然后被调用，就叫回调。

1、一般的回调函数：（this被重定向到window）

function ab(fn) { 
        fn();
    }
    function cd() { 
        // this指向window
        console.log(this);
    }
    
    ab(cd);

![在这里插入图片描述][20200219085653334.png]  
2、对象中的回调：（this被重定向到window）

![在这里插入图片描述][20200219085655997.png]  
3、事件是特殊的回调函数，事件回调函数中的**this都是被侦听的对象**：

document.addEventListener("click", clickHandler);
    
    function clickHandler(e) { 
        console.log(this);
        // this===e.currentTarget
    }

![在这里插入图片描述][20200219085929463.png]  
4、把函数写在方法中（匿名的回调函数），this都重定向到window：（不论这个方法放在哪）

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70]

### 四、事件函数中的this ###

事件函数是特殊的回调函数，使用时不会被重定向到window，而是侦听对象；因为太特殊了，单独拿出来再了解了解。  
事件侦听的回调函数，this被重新处理，this指向被侦听的对象。

（1）最常用的看上面。  
（2）放到其他地方也一样。比如放到对象里：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70 1]

### 五、ES6类中的this ###

一般都是指向当前实例对象，但是静态属性、静态方法都可以指向当前类。  
但是要注意：对于面向对象语言来说，一般在**静态属性和方法**中是**不允许使用this**这个概念的。

class Box{ 
    // 在外面定义，ES7后才有的
    // 这里的内容是constructor执行后才赋的值
    //其实在这儿定义的，跟在constructor里定义差不多
    b=333;
    a=this.b;
    static b=444;
    static a=this.b;//一旦被设为静态属性，this指向都会被设置为当前的类名Box
    constructor(){ 
    // this指向当前实例对象
        console.log(this);
        console.log(this.a,Box.a);
        this.b=111;
        this.a=this.b;
        Box.b=222;  //也是静态属性
        Box.a=Box.b;
        console.log(this.a,Box.a);
    }
    play(){ 
        // 这里的this都是实例化的对象
        console.log(this.a,Box.a);
        console.log(this);
    }
    
    static run(){ 
        console.log(this);
        // 因为使用static定义的方法，this指向为当前类名
        // 对于面向对象语言来说，一般在静态属性和方法中不允许使用this这个概念
    }
    
    }
    var a=new Box();
    a.play();
    
    class Ball extends Box{ 
    constructor(){ 
        super();
    }
    
    }
    var b=new Ball();
    Ball.run();   // 继承后静态方法也会被继承

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70 2]

### 六、ES5中类的this ###

除了静态属性、方法的this指向这个类，其他情况下this一般都指向当前实例化对象。

// 构造函数
    function Box(){ 
        this.play();
        // 构造函数中this，指向new出的实例对象
    }
    
    // 静态的属性、方法，类似于ES6里的静态方法、静态属性定义
    Box.a=function(){ 
        console.log(this);
        // this -->Box
    }
    Box.b=3;
    
    // 写在原型下的属性、方法
    Box.prototype.play=function(){ 
        console.log(this);
        // this 就是当前调用该方法的实例对象
    }
    Box.prototype.c=10; 
    
    // 静态属性、方法，this指向类
    console.log(Box.b);
    Box.a();
    
    var box=new Box(); 
    console.log(box); //与paly中打印的一样
    // box对象没有play这个对象属性，因此就去原型链中找到最近的play方法，执行这个play方法是由box这个对象执行
    // 静态属性、方法只和类有关系，与实例化的对象没有任何关系，所以不在box对象中显示。
    console.dir(Box);  //console.dir()可以显示一个对象的所有属性和方法

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70 3]

### 七、ES6箭头函数中的this ###

所有箭头函数内的this，都是当前函数外层的this指向。

![在这里插入图片描述][20200219212201316.png]

![在这里插入图片描述][20200219212554301.png]

### 八、call、apply、bind ###

当使用[call，apply，bind][call_apply_bind]时，都会将函数中this的指向重新指向到对应的对象。

### 总结 ###

那么总结一下，都有哪些this：  
全局下的this、对象中的this、回调函数中的this（事件函数中的this）、ES6类中的this、ES5中类的this、ES6箭头函数中的this、call，apply，bind中的this。

最后，其实理解了，this也就善良了。

[20200219081952714.png]: https://img-blog.csdnimg.cn/20200219081952714.png
[20200219082954556.png]: https://img-blog.csdnimg.cn/20200219082954556.png
[20200219083909370.png]: https://img-blog.csdnimg.cn/20200219083909370.png
[20200219084303271.png]: https://img-blog.csdnimg.cn/20200219084303271.png
[2020021908465588.png]: https://img-blog.csdnimg.cn/2020021908465588.png
[20200219085653334.png]: https://img-blog.csdnimg.cn/20200219085653334.png
[20200219085655997.png]: https://img-blog.csdnimg.cn/20200219085655997.png
[20200219085929463.png]: https://img-blog.csdnimg.cn/20200219085929463.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200219090306507.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200219123511975.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200219154908633.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200219205638483.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ==,size_16,color_FFFFFF,t_70
[20200219212201316.png]: https://img-blog.csdnimg.cn/20200219212201316.png
[20200219212554301.png]: https://img-blog.csdnimg.cn/20200219212554301.png
[call_apply_bind]: https://blog.csdn.net/weixin_43297321/article/details/104402583