this的指向问题

一）概念

this实际上在代码中是一个占位符。最终指向某个结果，一定是在不同环境下面分析出来的。

总结：

1. this永远指向一个对象 （this一定表示一个具体的对象）

2. 在普通函数中谁调用这个函数，里面this就指向谁

3. 箭头函数中，this指向父级作用域（父级作用域的this指向谁，箭头函数也是相同的）

二）普通函数中this指向

普通函数中的this默认谁调用他就指向谁

全局函数

普通函数中this指向调用者

function play() {
    console.log(this);
}
play(); // window.play();
​
const obj = {
    id:1;
    show: function(){
        console.log(this);
    }
}
​
obj.show();

默认情况，代码运行在浏览器里面，全局对象是window

js代码还可以在Nodejs环境中运行，默认指向global全局对象

事件绑定函数

const obtn = document.getElementById("btn");
obtn.onclick = function(){
    console.log(this);
}

默认情况下，这个时候的this指向事件源对象（obtn）

构造函数中的this

class Student{
    constructor(id){
        this.id = id; //类里面的this没有意义，只有当创建了实例后才有意义  即stu.id = id
    }
    show(){
        console.log(this);
    }
}
const stu = new Student(12); //new之后，this才有意义，在这之前只是占位
stu.show(); // Student {id:12}

构造函数中的this指向实例化过后的结果

三）箭头函数this

结论：箭头函数设计之初，默认就没有支持this，无法自己定义this的内容

箭头函数中this来自于父级作用域（看箭头函数外是否有普通函数或箭头函数，若无直接父级，则指向全局window），指向外层作用域

箭头函数没有this、没有原型。无法new一个箭头函数创建一个对象

作用域：

1. 函数作用域

2. 全局作用域

3. 块级作用域 (let const 定义模块)

图一：this存在普通函数中，而普通函数中的this则是默认谁调用它就指向谁。故图一中的this指向student

图二：this位于箭头函数内，而箭头函数无法自己定义this，且又被普通函数囊括着，故把目光转向普通函数。则该情况就又变成图一所呈现的那样，指向student

图三：对图三的理解可以通过将图三拆分成图四来解释，showMessage返回的是一个函数fun，通过调用showMessage，若showMessage里有this，则该this指向的是window，但这不影响里层的普通函数。普通函数的this指向取决于谁调用它。而fun()则是调用了里层的普通函数，所以该this指向的是window。

图五：this位于箭头函数内，所以看向该函数的外层函数。而该外层函数也是箭头函数，其父级没有函数，所以指向全局，即window。

四、普通函数中的this改变

结论：只有普通函数中的this可以改变

箭头函数无法改变this指向

（后面再来填坑，）

（以上皆是上课时所做的笔记，非本人所创）