this为什么会为undefined?

Null 发布于2019-08-26 10:49 / 2189人阅读

摘要：一前言普通定义的函数运行环境也是对象，指向运行时所在的对象。箭头函数函数体内的对象，就是定义时所在的对象，而不是使用时所在的对象。

一、前言 普通function定义的函数

‘运行环境’也是对象，this指向运行时所在的对象。
如下：

如果一个函数在全局环境运行，this就指向顶层对象（浏览器中为window对象）；
如果一个函数作为某个对象的方法运行，this就指向那个对象；
如果一个函数作为构造函数，this指向它的实例对象。

箭头函数

函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。

本来记住这几点已经可以了，this最终找到是可能window，但是undefined是怎么又是怎么来的，本妹子下面将一步步分析。

二、问题点:undefined是怎么来的

综上所述，this指向运行时所在的对象或指向定义时所在的对象，但是这个对象可能最后找到是window,但都不可能是undefined，那么undefined是怎么来的呢？

三、回答

我们一般写js文件都是babel转成ES6的，babel会自动给js文件上加上严格模式。

用了严格模式"use strict"，严格模式下无法再意外创建全局变量
)，所以this不为window而为undefined

四、进阶问题：严格模式对箭头函数没有效果

严格模式为什么对箭头函数没有效果，返回还是window？

五、进阶问题回答

Given that this comes from the surrounding lexical context, strict mode rules with regard to this are ignored.

lexical means that this refers to the this value of a lexically enclosing function.

综上所述，在箭头函数中，this为lexical 类型,lexical意味着这个this指是所在封闭函数中this，所以严格模式会自动忽视use strict，所以this如下所示:

箭头函数中，this指向运行时所在的对象，而use strict被移到函数内了，所以this为全局变量window。

Happy coding ~~ ^ ^

相关链接

原文地址

严格模式 - JavaScript

Arrow functions - JavaScript

ECMAScript 2015 Language Specification – ECMA-262 6th Edition

函数的扩展 - ECMAScript 6入门

use strict in javascript not working for fat arrow? - Stack Overflow

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/106825.html

深入javascript之执行上下文

摘要：在初始化代码时会先进入全局上下文中，每当一个函数被调用时就会为该函数创建一个执行上下文，每个函数都有自己的执行上下文。来看一段代码这段代码有个执行上下文全局上下文和，，属于自己的执行上下文。聊聊js的执行上下文一，相关概念 EC : 执行上下文ECS : 执行环境栈VO ：变量对象AO ：活动对象scope chain ：作用域链二，执行上下文 javascript运行的代码...

ky0ncheng 2019-08-22 15:59 评论0 收藏0
深入理解Javascript中的执行环境(Execution Context)和执行栈(Execut

摘要：引擎会执行其执行环境位于堆栈顶部的函数。当函数执行完毕时，当前执行栈会从堆栈中弹出去，并且控件将会到达其在当前堆栈下面的那个执行环境中。当完成以后，它的执行环境会会从堆栈中移出，并且控件会到达全局执行环境。如果你想成为一个Javascript开发者，那么你一定要知道Javascript程序的内部运行原理。理解执行环境和执行栈是非常重要的，其有助于理解其他Javascript的概念，比...

whidy 2019-08-23 15:23 评论0 收藏0
javascript的执行上下文

摘要：运行执行上下文正在使用的执行上下文。顶部是正在执行的上下文当执行完毕，它的执行上下文自动从栈弹出，控制流程按顺序到达全局执行上下文。一旦所有代码执行完毕，引擎从当前栈中移除全局执行上下文。在全局执行上下文中，的值指向全局对象。 https://juejin.im/post/5ba321...https://juejin.im/entry/59986...我只是搬运工，看了他们的文章后深...

yedf 2019-08-23 12:18 评论0 收藏0
[译]了解Javascript中的执行上下文和执行堆栈

摘要：理解执行上下文和执行堆栈对于理解的其它概念如提升，范围和闭包至关重要。正确地理解执行上下文和执行堆栈将帮助你更好地使用开发应用。引擎执行位于执行堆栈顶部的方法。当调用时，为该函数创建一个新的执行上下文，并且把它推入到当前执行堆栈。 By Sukhjinder Arora | Aug 28, 2018 原文如果你是或者你想要成为一名js开发者，那么你必须了解js程序内部的运作。理解执行...

qujian 2019-08-23 12:43 评论0 收藏0
解密JavaScript执行上下文

摘要：执行上下文栈首先我们先了解一下什么是执行上下文栈。那么随着我们的执行上下文数量的增加，引擎又如何去管理这些执行上下文呢这时便有了执行上下文栈。这样由多个执行上下文的变量对象构成的链表就叫做作用域链。执行上下文栈首先我们先了解一下什么是执行上下文栈（Execution context stack）。 showImg(https://segmentfault.com/img/remot...

JeOam 2019-08-26 13:51 评论0 收藏0