去年面试的时候,五位面试官有三位问到了这个问题,可见这是一个面试常题,我都忘记自己是怎么回答的,要我现在说:箭头函数没有 this 绑定,它的 this 指向父作用域
果然,记忆记不牢是有原因的,因为没有写文章,没有理解真正理解它
真正的答案是什么?
阮一峰版:
尼古拉斯版:
尼古拉斯是写《深入理解 ES6》的作者,阮一峰就不解释了
结合起来,就是说箭头函数和普通函数的区别在于:
我们依次说说这四点
new 从何来
先复习一下 new 调用构造函数会执行什么
在内存中创建一个新对象这个新对象内部的 [[]] 特性被赋值为构造函数的 属性构造函数内部的 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
函数内部有两个内部方法:[[Call]] 和 [[]]
箭头函数设计之初是为了设计一种更简短的函数,没有 [[]] 方法。具体99.9%的人都不知道的箭头函数不能当做构造函数的秘密 摘出了很多英文材料佐证这个事实
我们可以这样说,因为它没有[[]] 内部方法,所以它不能被 new。而因为它不能被 new,所以它也没有
的理解可以看这篇: 原型
this 谁人调用你
中的 this 是词法作用域,与你在哪里定义无关,而与你在哪里调用有关,所以会有各种 this “妖”的问题,改变 this 有 4 种方法
但是箭头函数没有自己的 this 对象,内部的 this 就是定义时上层作用域中的this。也就是说,箭头函数内部的 this 指向是固定的
老一辈的类数组
是一个对应于传递给函数的参数的类数组对象。 对象标识所有(非箭头)函数可用的局部变量,可以说只要是(非箭头)函数就自带 ,它表示所有传递给函数的参数
什么是类数组对象
所谓类数组对象,就是指可以通过索引属性访问元素并且拥有 属性的对象
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、模板字符串、扩展运算符、...
面试官:嗯嗯,箭头函数和普通函数有什么区别
面试者:箭头函数不能被 new、没有 、它的 this 与在那里定义相关、它不能用 yield 命令,返回对象时必须在对象外面加上括号
面试官:箭头函数为什么不能被 new
面试者:因为箭头函数没有 [[]] 方法,在 new 时, 内部会调用 [[]] 方法,因为箭头函数没有,所以 new 时会报错。当然,因为不能被 newjs箭头函数,所以箭头函数也没有
面试官:你刚刚说到没有 ,简单介绍下它
面试者:它是所有参数的合集js箭头函数,每个(非箭头)函数自带 ,其结构是类数组对象
面试官:什么是类数组对象
面试者:可以通过索引访问元素且拥有 属性的对象...
面试官:我问问其他的
参考资料