购买
下载掌阅APP,畅读海量书库
立即打开
畅读海量书库
扫码下载掌阅APP

3.2.2 this穿透

事实上,箭头函数在ES2015 标准中,并不只是作为一种简单的语法糖出现。就如同它在CoffeeScript中的定义一般,是用于将函数内部的this延伸至上一层作用域中,即上一层的上下文会穿透到内层的箭头函数中,我们可以以一段代码来简单解释。

如果用Babel等ES2015 编译工具来将其转换为ES5 的代码,其中的obj.foo函数如下。

为什么要赋予箭头函数这样的特性呢?我们可以假设出这样的一个应用场景,我们需要创建一个实例,用于对一些数据进行查询和筛选。

此时,从服务器获得数据是一个JSON 编码的数组,其中包含的元素是若干元素的ID,我们需要另外请求服务器的其他API以获得元素本身(当然了,实际上的API设计大部分不会这么使用这种设计)。这样就需要在回调函数中再次使用this.baseUrl这个属性,如果要同时兼顾代码的可阅读性和美观性,ES2015 允许我们这样做(配合Promise以展示箭头函数的简洁性,我们将在本章节中详细讨论Promise)。

因为在单行匿名函数中,如果this指向的是该函数的上下文,就会不符合直观的语义表达。

3.2.2.1 程序逻辑注意事项

箭头函数对上下文的绑定是强制性的,无法通过apply或call方法改变。

因为箭头函数绑定上下文的特性,故不能随意在顶层作用域使用箭头函数,以防出现下面的错误。

为什么上面这段代码会如此让人费解呢?我们来看看它的等价代码吧。

同样地,在箭头函数中也没有arguments、callee甚至caller等对象。

如果有使用arguments 的需求,可以使用后续参数来取得参数列表,我们将在下面的章节中详细讲解。

3.2.2.2 编写语法注意事项

ES2015 提供了多行的箭头函数语法,所以在使用单行箭头函数时,请不要对单行的函数体做任何换行,以免出现语法错误。

参数列表的右括弧、箭头需要保持在同一行内。

单行箭头函数只能包含一条语句。但如果是错误抛出语句(throw)等非表达式的语句,则需要使用花括号包裹。

若要使用单行箭头函数直接返回一个对象字面量,请使用一个括号包裹该对象字面量,而不是直接使用大括号,否则ECMAScript解析引擎会将其解析为一个多行箭头函数。 3WSA4gshZrzSMKcxZtaZAA/Xlb/q6oNDhj99iekgiZkxVXZf+pmJmThC3tWsOgHS

点击中间区域
呼出菜单
上一章
目录
下一章
×