this为什么会为undefined?

2019-08-16 admin

一、前言

普通function定义的函数

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

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

箭头函数

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

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

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

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

<html>
<script type="text/javascript">
var foo = function foo() {
    console.log(this);
};
var foo1 = () => {
    console.log(this);
};
foo(); //Window
foo1(); //Window
</script>
</html>

三、回答

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

image.png

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

<html>
<script type="text/javascript">
"use strict";  
var foo = function foo(){
    console.log(this)
};
foo();//undefined
</script>
</html>

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

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

<html>
<script type="text/javascript">
"use strict";
var foo = () => {
    console.log(this)
};
foo(); //Window
</script>
</html>

五、进阶问题回答

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.

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

<html>
<script type="text/javascript">
var foo = () => {
    "use strict";
    console.log(this)
};
foo(); //Window
</script>
</html>

箭头函数中,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://segmentfault.com/a/1190000020088352

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-72623.html

文章标题:this为什么会为undefined?

相关文章
如何为高负载网络优化Nginx 和 Node.js?
译者:AlfredCheung 在搭建高吞吐量web应用这个议题上,NginX和Node.js可谓是天生一对。他们都是基于事件驱动模型而设计,可以轻易突破Apache等传统web服务器的C10K瓶颈。预设的配置已经可以获得很高的并发,不过,...
2015-11-12
可以从CSS框架中借鉴到什么
现在很多人会使用 CSS 框架进行快速建站。   那 CSS 框架是什么呢,它通常是一些 CSS 文件的集合,这些文件包括基本布局、表单样式、网格、简单组件、以及样式重置。使用 CSS 框架大大降低工作成本进行快速建站。   当然对于一些大...
2016-03-11
JavaScript是什么
JavaScript 是世界上最流行的编程语言。 这门语言可用于 HTML 和 web,更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。 JavaScript,一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置...
2015-11-16
何为闭包?有关JS闭包的一些理解
简单一点的说:闭包就是能够读取其他函数内部变量的函数。那如何实现读取其它函数内部变量呢,大家都知道在JavaScript中内部函数可以访问其父函数中的变量,那如果将内部函数返回是不是代表能够通过它访问其父函数中的变量了呢,闭包的原理事实上就...
2015-11-11
HTML5会是下一个风口吗?
2014年10月底, W3C(万维网联盟)正式宣布HTML5正式定稿,科技圈就像发现了可以打破谷歌、苹果所统领的原生APP世界的方法,发表了很多宣讲HTML5将真正开始颠覆原生(Native)App的文章,也开始着力发展HTML5,开始抢占...
2015-11-12
freemarker判断对象是否为空的方法
FreeMarker与Web容器无关,即在Web运行时,它并不知道Servlet或HTTP。它不仅可以用作表现层的实现技术,而且还可以用于生成XML,JSP或Java 等。 freemarker中显示某对象使用${name}. 但如果nam...
2017-03-27
面试官:谈谈你对 CSS 盒模型的认识?(你确定会?)
题目:谈谈你对 CSS 盒模型的认识 涉及知识点(层层递进): 基本概念:标准模型+ IE模型(区别) CSS如何设置这两种模型 JS如何设置获取盒子模型对应的宽和高 实例题(根据盒模型解释边距重叠) BFC(边距重叠解决方案) 1...
2018-06-09
2015年将会有大量基于HTML5和JS的WEB应用
随着HTML5的定稿,以及JS的迅速发展,我们有理由相信,在接下来的一年里,将会涌现出大量的WEB应用,网站的表现形式将不再仅仅局限于过去的形式,必将在2015年引来一次重大改革! ...
2015-11-12
为什么AngularJS能够成功?
AngularJS 为什么成功了? 写在前面的话 继上一篇总结之后, 觉得必须补充一下 AngularJS 与 Ionic 的技术性话题 于是, 连夜写了这第一篇. 讲述了 AngularJS 与其他对手之间的优与缺. 我有任何理解错误, ...
2015-11-12
线程有什么用处? 为什么有些东西注定不会流行
多线程的领域也许只有一个: 图形学. 我们以一个游戏来说明 @ |___|___|___|___|___ @是一个玩家, 往前走, 每一个___是1米. 每当@走到1米的时候, 会绘制一个蘑菇*给玩家看. @|___*___|___|___...
2015-11-12
回到顶部