面试题:箭头函数和普通函数的区别
wxin55 2024-11-26 09:42 8 浏览 0 评论
去年面试的时候,五位面试官有三位问到了这个问题,可见这是一个面试常题,我都忘记自己是怎么回答的,要我现在说:箭头函数没有 this 绑定,它的 this 指向父作用域
果然,记忆记不牢是有原因的,因为没有写文章,没有理解真正理解它
真正的答案是什么?
阮一峰版:
- 箭头函数没有自己的 this 对象,函数体内的 this 是定义时所在的对象而不是使用时所在的对象
- 不可以当作构造函数,也就是说,不可以对箭头函数使用 new 命令,否则会抛出一个错误
- 不可以使用 arguments 对象,该对象在函数体内不存在。如果要用,可以用 rest 参数代替
- 不可以使用 yield 命令,因此箭头函数不能用作 Generator 函数
- 返回对象时必须在对象外面加上括号
尼古拉斯版:
- 没有 this、super、arguments 和 new.target 绑定。this、super、arguments 和 new.target 的值由最近的不包含箭头函数的作用域决定
- 不能被 new 调用,箭头函数内部没有 [[Construct]] 方法,因此不能当作构造函数使用,使用 new 调用箭头函数会抛出错误
- 没有 prototype,既然你不能使用 new 调用箭头函数,那么 prototype 就没有存在的理由。箭头函数没有 prototype 属性
- 不能更改 this, this 的值在函数内部不能被修改。在函数的整个生命周期内 this 的值是永恒不变的
- 没有 arguments 对象,既然箭头函数没有 arguments 绑定,你必须依赖于命名或者剩余参数来访问该函数的参数
- 不允许重复的命名参数
尼古拉斯是写《深入理解 ES6》的作者,阮一峰就不解释了
结合起来,就是说箭头函数和普通函数的区别在于:
- 它不能被当作构造函数,因为它不能被new,不能被 new 的原因在于箭头函数内部没有 [[Construct]] 方法。又因为它不能被 new,所以也就没有 prototype
- 它没有自己的 this,它的 this 由定义时所在的对象决定而不是使用时所在的对象
- 它也没有 arguments 对象
- 不可以使用 yield 命令,不能用作生成器函数
我们依次说说这四点
new 从何来
先复习一下 new 调用构造函数会执行什么
- 在内存中创建一个新对象
- 这个新对象内部的 [[prototype]] 特性被赋值为构造函数的 prototype 属性
- 构造函数内部的 this 被赋值为这个新对象(this指向新对象)
- 执行构造函数内部的代码(给新对象添加属性)
- 如果构造函数返回非空对象,则返回该对象;否则,返回刚创建的新对象
我们可以手写一个 new
function new2(Constructor, ...args) {
var obj = Object.create(null);
obj.__proto__ = Constructor.prototype;
var result = Constructor.apply(obj, ...args)
return typeof result === 'object' ? result : obj
}
复习完 new,回过头看为什么不能调用 new
JavaScript 函数内部有两个内部方法:[[Call]] 和 [[Construct]]
- 直接调用时执行[[Call]] 方法,直接执行函数体
- new 调用时执行 [[Construct]] 方法,创建实例对象
箭头函数设计之初是为了设计一种更简短的函数,没有 [[Construct]] 方法。具体99.9%的人都不知道的箭头函数不能当做构造函数的秘密 摘出了很多英文材料佐证这个事实
我们可以这样说,因为它没有[[Construct]] 内部方法,所以它不能被 new。而因为它不能被 new,所以它也没有 prototype
prototype 的理解可以看这篇: 原型
this 谁人调用你
JavaScript 中的 this 是词法作用域,与你在哪里定义无关,而与你在哪里调用有关,所以会有各种 this “妖”的问题,改变 this 有 4 种方法
- 作为对象方法调用
- 作为函数调用
- 作为构造函数调用
- 使用 apply 或 call 调用
但是箭头函数没有自己的 this 对象,内部的 this 就是定义时上层作用域中的this。也就是说,箭头函数内部的 this 指向是固定的
arguments 老一辈的类数组
arguments 是一个对应于传递给函数的参数的类数组对象。arguments 对象标识所有(非箭头)函数可用的局部变量,可以说只要是(非箭头)函数就自带 arguments,它表示所有传递给函数的参数
什么是类数组对象
所谓类数组对象,就是指可以通过索引属性访问元素并且拥有 length 属性的对象
var arrLike = {
0: 'name',
1: 'age',
length: 2
}
箭头函数没有
yield 是什么
说 yield 之前,先了解下生成器
生成器是 ES6 新增的一个极为灵活的结构,拥有在一个函数块内暂停和恢复代码执行的能力。
生成器的形式是一个函数,函数名称前面加一个星号(*)表示它是一个生成器。只要是可以定义(非箭头)函数的地方,就可以定义生成器
// 生成器函数声明
function* generatorFn() {}
// 生成器函数表达式
let generatorFn = function* () {}
// 作为对象字面量方法的生成器函数
let foo = {
* generatorFn() {}
}
// 作为类实例方法的生成器函数
class Foo {
* generatorFn() {}
}
// 作为类静态方法的生成器函数
class Bar {
static * generatorFn() {}
}
标识生成器函数的星号不受两侧空格的影响
而 yield 关键字是可以让生成器停止和开始执行,也是生成器最有用的地方。生成器函数在遇到 yield 关键字之前会正常执行。遇到这个关键字后,执行会停止,函数作用域的状态会被保留。停止执行的生成器函数只能通过在生成器对象上调用 next() 方法来恢复执行
// umi 项目中请求接口时的例子
*fetchData({ payload }, { call, put }) {
const resData = yield call(fetchApi, payload);
if (resData.code === 'OK') {
yield put({
type: 'save',
payload: {
data: resData,
},
});
} else {
Toast.show(resData.resultMsg);
}
}
因为箭头函数不能用来定义生成器函数才不能使用 yield 关键字
模拟面试
面试官:对 ES6 了解吗
面试者:嗯呢,项目中一直有用
面试官:你说说你平时都用哪些 ES6 的新特性
面试者:例如箭头函数、let、const、模板字符串、扩展运算符、Promise...
面试官:嗯嗯,箭头函数和普通函数有什么区别
面试者:箭头函数不能被 new、没有 arguments、它的 this 与在那里定义相关、它不能用 yield 命令,返回对象时必须在对象外面加上括号
面试官:箭头函数为什么不能被 new
面试者:因为箭头函数没有 [[Construct]] 方法,在 new 时,JavaScript 内部会调用 [[Construct]] 方法,因为箭头函数没有,所以 new 时会报错。当然,因为不能被 new ,所以箭头函数也没有 prototype
面试官:你刚刚说到没有 arguments,简单介绍下它
面试者:它是所有参数的合集,每个(非箭头)函数自带 arguments,其结构是类数组对象
面试官:什么是类数组对象
面试者:可以通过索引访问元素且拥有 length 属性的对象...
面试官:我问问其他的
参考资料
- ECMAScript 6 入门
- 99.9%的人都不知道的箭头函数不能当做构造函数的秘密
- 深入理解ES6
相关推荐
- Java框架 —— Spring简介
-
简介一般来说,Spring指的是SpringFramework,它提供了很多功能,例如:控制反转(IOC)、依赖注入(DI)、切面编程(AOP)、事务管理(TX)主要jar包org.sprin...
- Monkey自动化测试
-
Monkey1.通过Monkey程序模拟用户触摸屏幕、滑动Trackball、按键等操作来对设备上的程序进行压力测试,检测程序多久的时间会发生异常;2.Monkey主要用于Android的压力...
- 十年之重修SpringBoot启动&自动装载&Bean加载过程
-
总结Springboot的自动装载,完全是依赖Bean的自动注册,其中默认的规则,是把需要自动装载的bean全名称编辑在spring.factories(2.7之后的版本,还支持.imports文件)...
- 一些可以显著提高大型 Java 项目启动速度的尝试
-
我们线上的业务jar包基本上普遍比较庞大,动不动一个jar包上百M,启动时间在分钟级,拖慢了我们在故障时快速扩容的响应。于是做了一些分析,看看Java程序启动慢到底慢在哪里,如何去优化,...
- class 增量发包改造为 jar 包方式发布
-
大纲class增量发包介绍项目目录结构介绍jar包方式发布落地方案class增量发包介绍当前项目的迭代修复都是通过class增量包来发版本的将改动的代码class增量打包,如下图cla...
- Flink架构及其工作原理(很详细)
-
原文链接:https://www.cnblogs.com/code2one/p/10123112.html关键词:Flink架构、面试杀手锏!更多大数据架构、实战经验,欢迎关注【大数据与机器学习】,...
- 大促系统优化之应用启动速度优化实践
-
作者:京东零售宋维飞一、前言本文记录了在大促前针对SpringBoot应用启动速度过慢而采取的优化方案,主要介绍了如何定位启动速度慢的阻塞点,以及如何解决这些问题。希望可以帮助大家了解如何定位该类问...
- Maven工程如何使用非Maven仓库jar包
-
使用Maven之前,一直都是自己手工在网上搜索需要的jar包,然后添加到工程中。以这样的方式开发,工作了好多年,曾经以为以后也会一直这样下去。直到碰上Maven,用了第一次,就抛弃老方法了。Maven...
- 【推荐】一款开源免费、功能强大的短链接生成平台
-
项目介绍reduce是一款开源免费、功能强大的短链接生成平台。部署在服务器,使用短域名解析即可提供服务。CoodyFramework首秀,自写IOC、MVC、ORM、TASK、JSON、DB连接池、...
- K8S官方java客户端之七:patch操作
-
欢迎访问我的GitHubhttps://github.com/zq2599/blog_demos内容:所有原创文章分类汇总及配套源码,涉及Java、Docker、Kubernetes、DevOPS等;...
- Java 的业务逻辑验证框架 之-fluent-validator
-
开发人员在维护核心业务逻辑的同时,还需要为输入做严格的校验。当输入不合法时,能够给caller一个明确的反馈,最常见的反馈就是返回封装了result的对象或者抛出exception。一些常见...
- 互联网大厂后端必看!手把手教你替换 Spring Boot 中的日志框架
-
在互联网大厂的后端开发工作中,SpringBoot框架是搭建项目的“得力助手”,使用十分普遍。但不少开发者都遇到过这样的困扰:SpringBoot默认集成的Logback日志框架,在实际...
- 测试经理教你如何用monkey进行压力测试!
-
一、monkey是什么1、monkey程序由android系统自带,使用Java语言写成,在Android文件系统中的存放路径是:/system/framework/monkey.jar2、Mo...
- Java-Maven详解
-
一、什么是Maven?ApacheMaven是一个软件项目管理的综合工具。基于项目对象模型(POM)的概念,提供了帮助管理构建、文档、报告、依赖、发布等方法,Maven简化和标准化项目建设过程。处理...
- SpringBoot打包部署最佳实践
-
springboot介绍SpringBoot目前流行的javaweb应用开发框架,相比传统的spring开发,springboot极大简化了配置,并且遵守约定优于配置的原则即使0配置也能正常运...
你 发表评论:
欢迎- 一周热门
- 最近发表
- 标签列表
-
- hive行转列函数 (63)
- sourcemap文件是什么 (54)
- display none 隐藏后怎么显示 (56)
- 共享锁和排他锁的区别 (51)
- httpservletrequest 获取参数 (64)
- jstl包 (64)
- qsharedmemory (50)
- watch computed (53)
- java中switch (68)
- date.now (55)
- git-bash (56)
- 盒子垂直居中 (68)
- npm是什么命令 (62)
- python中+=代表什么 (70)
- fsimage (51)
- nginx break (61)
- mysql分区表的优缺点 (53)
- centos7切换到图形界面 (55)
- 前端深拷贝 (62)
- kmp模式匹配算法 (57)
- jsjson字符串转json对象 (53)
- jdbc connection (61)
- javascript字符串转换为数字 (54)
- mybatis 使用 (73)
- 安装mysql数据库 (55)