目录· 3. 省略小括号 · 2. call、apply、bind无法改变箭头函数的 this 1. 箭头函数的使用ES6 中新增了使用箭头=>来定义函数表达式的方法。很多情况下,箭头函数和函数表达式创建的函数并无区别,只有写法上的不同。 本文第二块内容将介绍箭头函数和普通函数功能上的区别。 1. 普通函数到箭头函数如下所示,定义一个函数,可以使用function关键字,函数接收两个参数a和b,返回a和b的和。
若使用箭头函数来定义这个函数,可以写成如下形式,省略function关键字,用箭头=>定义一个函数。
2. 省略大括号和 return若定义的箭头函数,函数体内只有return语句,则可以省略大括号{}和return。 如下所示,定义的箭头函数,完整写法。
此箭头函数的函数体内只有return语句,那么,省略了大括号{}和return后的精简写法如下:
3. 省略小括号若定义的箭头函数,参数只有一个,则可以省略小括号。 如下所示,定义的箭头函数,只有一个参数,完整写法。
省略了参数旁边的小括号,以下代码等价于上面的代码。
注意:若函数没有参数,或者多个参数的情况下,必须要使用括号。 2. 箭头函数与普通函数的区别大多数情况下,能使用普通函数的地方都可以用箭头函数代替,因为箭头函数更精简。 但在部分情况下,箭头函数与普通函数有着很大的却别。 1. 箭头函数的 this 是父级作用域的 this如下代码,定义了一个对象obj,对象中有个普通函数定义的方法getThis,打印出此处的this。调用obj.getThis(),会打印出obj对象。这说明方法内部的this指向对象obj。
同样定义一个对象obj,但里面的方法用箭头函数定义,浏览器中调用obj.getThis()却打印出Window,这说明即使调用obj对象身上的方法,方法内部的this也不会指向obj,而是指向定义obj的上下文的this。
2. call、apply、bind无法改变箭头函数的 this如下代码,普通函数getName打印this.name,通过call将函数中的this绑定到obj身上,调用getName打印出obj身上的属性name。
若将函数改成箭头函数,那么call将不起作用,无法将函数内部的this绑定到obj,打印出undefined。
3. 不可以作为构造函数箭头函数不可以作为构造函数使用,若将箭头函数作为构造函数,将报错,如下代码所示。
4. 不可以使用 arguments在普通函数内部,可以使用arguments来获取传入的参数,是一个类数组对象:
而箭头函数就不可以使用arguments对象,获取不到输入的参数。 在浏览器中,若在箭头函数使用arguments对象,将报错。
但是箭头函数可以在参数内,以...args的方式,获取到输入的参数,得到的args是一个数组。
5. 箭头函数不支持 new.target普通函数定义的构造函数内部,支持使用new.target,返回构造实例的构造函数。
而在箭头函数中,不支持使用new.target。在浏览器环境中,箭头函数使用new.target将报错:new.target expression is not allowed here。
|
|
来自: 新用户604881da > 《待分类》