前言
谈到箭头函数,很多同学第一反应就是该函数没有自己的this
,这也是前端面试时一道常见的考题,但是除了与this相关的部分,你对它的其它特征又了解多少呢?今天就和大家一起系统的学习一下箭头函数
箭头函数与普通函数的区别
一些比较直观的不同,这里简单过一下,例如外形不同,都是匿名函数这些大家都比较熟悉,这里就不展开讨论了,个人认为一下三点大家能理解好,对箭头函数的了解应该就算到位了
this 指向问题
第一点应该是大家最熟悉的一个特征了,通常也会和 this 相关的知识点联系起来,在普通函数中,this总是指向调用它的对象,如果用作构造函数,this指向创建的对象实例
而到了箭头函数这里就有些特殊了,箭头函数本身不创建this
那这时有疑问了,它本身不创建this,拿它内部的 this 是指向哪里呢?这里记住两句话
- 箭头函数中的 this 是在箭头函数定义时就决定的,而且不可修改(call, apply, bind)
- 箭头函数的 this 指向定义的时候,外层第一个普通函数的 this(或者说,其声明时所在的上下文的 this)
这里要特别关注箭头函数的this是在声明时就决定的,而不是执行时,并且确定了就不会改变,这一特性我们可以用来解决很多问题
关于 call / apply 方法无效,简单举个例子
let obj = { a: 10, b: function(n) { let f = (n) => n + this.a; return f(n); }, c: function(n) { let f = (n) => n + this.a; let m = { a: 20 }; return f.call(m,n); } }; console.log(obj.b(1)); // 结果:11 console.log(obj.c(1)); // 结果:11 复制代码
箭头函数不能new (无法作为构造函数)
我们先了解一下构造函数的new都做了些什么?
- 创建了一个空对象(
{}
) - 为创建的空对象添加属性
__ptoto__
,并指向于构造函数的原型 - 将创建的对象作为构造函数的上下文 (改变this指向)
- 如果该函数没有返回对象,则返回
this
这里就引出另外一个知识点了,箭头函数没有 prototype (也就是没有原型),没法让他的实例的__proto__
属性指向构造函数的prototype,所以箭头函数不能作为构造函数,否则用new调用时会报错!
let Person = (name, age) => { this.name = name; this.age = age; }; // 报错 let p = new Person('dingFY', 24); 复制代码
箭头函数没有没有 arguments
箭头函数没有自己的arguments
对象,在箭头函数中访问arguments
实际上获得的是外层局部(函数)执行环境中的值
let fn = (arr) => { console.log(arguments); } fn([1,3,9]); //Uncaught ReferenceError: arguments is not defined 复制代码
箭头函数不绑定arguments,取而代之用 ...rest参数代替arguments对象
这里很多资料提到了另一个比较陌生的词——rest参数
Rest 就是为解决传入的参数数量不一定, rest parameter(Rest 参数) 本身就是数组,数组的相关的方法都可以用
这样看可能还有点抽象,其实也不复杂,举个例子就清楚了
// rest参数... let fn = (...arg) => { console.log(arg); } fn(3,82,32,11323); // [3, 82, 32, 11323]