javascript中的this指向问题

记录一个问题，关于对象中this的指向，不仔细一点的话还真的容易忽视，在下面代码中，分别在对象的属性和方法都用到了this,这里主要探讨属性中的this。

var name = '小明', age = 18
var obj = {
    name: '小华',
    age: this.age,
    myFun: function () {
        console.log(this.name)
    }
}
console.log(obj.age)  //18
obj.myFun()  //小华

咱们主要看obj.age这里，我一眼看的时候确定的答案是undefined，因为这里是对象obj所调用的，可当我运行一遍后，发现输出的是18，没错是全局变量18，那么说明这里的this是指向window，这让我有些摸不着头脑，后来我才想通，首先我们得弄清楚this对象的产生：一个函数创建时就会产生一个this对象（或者是函数执行时就会产生this对象）。在对象中：

方法内的this指向取决于调用这个方法的对象
this单独使用(如这里的属性age:this.age)，指向window

这里还发现了一个有趣的地方，当我们把var换成let

let name = '小明', age = 18

那么年龄这里就打印的是undefined了，这是为什么呢？这就得了解一下es5和es6的区别了。

浏览器环境中顶层对象是window。

ES5中，var、function声明的全局变量，是顶层对象的属性，顶层对象的属性等价于全局变量。

ES6中，var、function声明的全局变量，依然是顶层对象的属性；let、const、class声明的全局变量不属于顶层对象的属性，也就是说顶层对象属性≠全局变量。

那么总结一下吧，其实this指向无非就是这四种情况：

1. 普通函数中，非严格模式下，this指向window，严格模式下，this指向undefined。(什么是严格模式，推荐去看一下文档 MDN:严格模式)。
2. 作为某对象的方法调用，this指向调用的对象。
3. 构造函数this指向创建的实例对象。
4. 箭头函数和普通函数不同，箭头函数内部是没有this的指向的，箭头函数中的this实际上是向外层一级一级的查找作用域中的this（直到this有定义）。

文章来源个人博客：https://www.garfield27.com/2021/11/11/b52b72b73a56/