一、箭头函数的特点
1. 相比普通函数,箭头函数有更加简洁的语法。
普通函数
functionadd(num){return num +10}
箭头函数
constadd=num=> num +10;
2. 箭头函数不绑定this,会捕获其所在上下文的this,作为自己的this。
这句话需要注意的是,箭头函数的外层如果有普通函数,那么箭头函数的this就是这个外层的普通函数的this,箭头函数的外层如果没有普通函数,那么箭头函数的this就是全局变量。
下面这个例子是箭头函数的外层有普通函数。
let obj ={fn:function(){
console.log('我是普通函数',this=== obj)// truereturn()=>{
console.log('我是箭头函数',this=== obj)// true}}}
console.log(obj.fn()())
下面这个例子是箭头函数的外层没有普通函数。
let obj ={fn:()=>{
console.log(this=== window);}}
console.log(obj.fn())// true
3. 箭头函数是匿名函数,不能作为构造函数,不可以使用new命令,否则后抛出错误。
4. 箭头函数不绑定arguments,取而代之用rest参数解决,同时没有super和new.target。
箭头函数没有arguments、super、new.target的绑定,这些值由外围最近一层非箭头函数决定。
下面的这个函数会报错,在浏览器环境下。
letf=()=>console.log(arguments);//报错f();// arguments is not defined
下面的箭头函数不会报错,因为arguments是外围函数的。
functionfn(){letf=()=>{
console.log(arguments)}f();}fn(1,2,3)// [1,2,3]
箭头函数可以通过拓展运算符获取传入的参数。
5. 使用call,apply,bind并不会改变箭头函数中的this指向。
- 当对箭头函数使用call或apply方法时,只会传入参数并调用函数,并不会改变箭头函数中this的指向。
- 当对箭头函数使用bind方法时,只会返回一个预设参数的新函数,并不会改变这个新函数的this指向。
请看下面的代码
window.name ="window_name";letf1=function(){returnthis.name;};letf2=()=>this.name;let obj ={ name:"obj_name"};
console.log(f1.call(obj));//obj_name
console.log(f2.call(obj));// window_name
console.log(f1.apply(obj));// obj_name
console.log(f2.apply(obj));// window_name
console.log(f1.bind(obj)());// obj_name
console.log(f2.bind(obj)());// window_name
6. 箭头函数没有原型对象prototype这个属性
由于不可以通过new关键字调用,所以没有构建原型的需求,所以箭头函数没有prototype这个属性。
letF=()=>{};
console.log(F.prototype)// undefined
7. 不能使用yield关键字,不能用作Generator函数
二、arguments辨析
既然上文我们提到了arguments,那么下面我们就仔细讲讲这个arguments。
arguments有什么用?
arguments对象是所有非箭头函数中都可用的局部变量,可以使用arguments对象在函数中引用函数的参数,此对象包含传递给函数的每一个参数,第一个参数在索引0的位置。
如何将arguments对象转换为数组
- 通过slice
- 通过拓展运算符
- 通过Array.from
var args =Array.prototype.slice.call(arguments);var args =[].slice.call(arguments);const args = Array.from(arguments);const args =[...arguments];
arguments函数如何调用自身函数?
我们先看看下面这个函数,这个是可以正常运行的。
functionfactorial(n){return!(n >1)?1:factorial(n -1)* n;}[1,2,3,4,5].map(factorial);
但是作为匿名函数则不行。
[1,2,3,4,5].map(function(n){return!(n >1)?1:/* what goes here? */(n -1)* n;});
因此arguments.callee诞生了。
[1,2,3,4,5].map(function(n){return!(n >1)?1: arguments.callee(n -1)* n;});
所以arguments要想调用自身的匿名函数,可以通过arguments.callee来调用。
版权归原作者 Always--Learning 所有, 如有侵权,请联系我们删除。