【JS Web 前端知识库】18.说一说this指向（普通函数、箭头函数）？

18.说一说this指向（普通函数、箭头函数）？

得分点:

全局执行上下文、函数执行上下文、this严格模式下undefined、非严格模式window、构造函数新对象本身、普通函数不继承this、箭头函数无this，可继承

标准回答

1. this关键字由来：

① 在对象内部的方法中使用对象内部的属性是一个非常普遍的需求。
② 但是 JavaScript的作用域机制并不支持这一点，基于这个需求，JavaScript 又搞出来另外一套 this 机制。

2. this存在的场景有三种:

① 全局执行上下文
② 函数执行上下文
③ eval执行上下文，eval这种不讨论。

① 全局执行上下文
在全局执行环境中无论是否在严格模式下，（在任何函数体外部）this 都指向全局对象。

② 函数执行上下文

1. 在函数执行上下文中访问this，函数的调用方式决定了 this 的值。
2. 在全局环境中调用一个函数，函数内部的this 指向的是全局变量window，通过一个对象来调用其内部的一个方法，该方法的执行上下文中的 this 指向对象本身。
3. 普通函数this指向：当函数被正常调用时，在严格模式下，this 值是 undefined，非严格模式下 this 指向的是全局对象 window；通过一个对象来调用其内部的一个方法，该方法的执行上下文中的 this 指向对象本身。new关键字构建好了一个新对象，并且构造函数中的 this 其实就是新对象本身。
4. 嵌套函数中的 this 不会继承外层函数的 this值。
5. 箭头函数this指向：箭头函数并不会创建其自身的执行上下文，所以箭头函数中的this取决于它的外部函数。

加分回答:

箭头函数因为没有this，所以也不能作为构造函数，但是需要继承函数外部this的时候，使用箭头函数比较方便

	var myObj = {
          name: 'happy tomorrow',
               showThis: function () {
                   console.log(this); // myObj 
                   var bar = () => {
                       this.name = 'happy nextData';
                       console.log(this) // myObj 
                   }
                   bar();
               }
           };
           myObj.showThis();
           console.log(myObj.name); // 'happy nextData' 
           console.log(window.name); // ''

💞💖💓💗每个时代，
✨🌟⭐️💫都悄悄犒赏会学习的人。