“this指向”是 JavaScript 最具“魅惑”的知识点，不同的应用场合 this 的取值可能会有意想不到的结果，在此我们对【 this 默认的取值】情况进行归纳和总结：
1.普通函数
普通函数的调用方式决定了 this 的值，即【谁调用 this 的值指向谁】，如下代码所示：
<script> // 普通函数 function sayHi() { console.log(this) } // 函数表达式 const sayHello = function () { console.log(this) } // 函数的调用方式决定了 this 的值 sayHi() // window 相当于window.sayHi() // 普通对象 const user = { name: '小明', walk: function () { console.log(this) } } // 动态为 user 添加方法 user.sayHi = sayHi uesr.sayHello = sayHello // 函数调用方式，决定了 this 的值 user.sayHi() //this为user user.sayHello() //this为user </script>
注： 普通函数没有明确调用者时 this 值为 window，严格模式下没有调用者时 this 的值为 undefined。
2.箭头函数
箭头函数中的 this 与普通函数完全不同，也不受调用方式的影响，事实上箭头函数中并不存在 this ！箭头函数中访问的 this 不过是箭头函数所在作用域的 this 变量。
<script> // 普通对象 const user = { name: '小明', // 该箭头函数中的 this 与函数声明环境中 this 一致 walk: () => { console.log(this) }, sleep: function () { let str = 'hello' console.log(this) let fn = () => { console.log(str) console.log(this) // 该箭头函数中的 this 与 sleep 中的 this 一致 } // 调用箭头函数 fn(); } } // 函数调用 user.walk() //this为window user.sleep() //this为user </script>
3.结合以上两种情况，在实际开发中的使用场景：
在开发中【使用箭头函数前需要考虑函数中 this 的值】，事件回调函数使用箭头函数时，this 为全局的 window，因此DOM事件回调函数不推荐使用箭头函数，如下代码所示：
<script> // DOM 节点 const btn = document.querySelector('.btn') // 箭头函数 此时 this 指向了 window btn.addEventListener('click', () => { console.log(this) }) // 普通函数 此时 this 指向了 DOM 对象 btn.addEventListener('click', function () { console.log(this) }) </script>
同样由于箭头函数 this 的原因，基于原型的面向对象也不推荐采用箭头函数，如下代码所示：
<script> function Person() { } // 原型对像上添加了箭头函数 Person.prototype.walk = () => { console.log('人都要走路...') console.log(this); // window } const p1 = new Person() p1.walk() </script>
