ES6篇——箭头函数

ES6引入了(=>)箭头函数,箭头函数只是为了ES6的简写方法。

1.通用写法

例子1:

//javascript
let a = function(b,c){
        return n;
}
//等于
//es6
let a = (b,c) => n;

通过这个例子1可以看出,省略了function,=>基本代替了花括号{},这写法非常简写!es6的箭头函数需要写一行即可!

例子2:

let a = function () { return 2 };
// 等于
let a = () => 3;

let sum = function(a1, a2) {
        return a1+ a2;
};
// 等于
let sum = (a1, a2) => a1 + a2;

这个例子2可以看出,如果不需要参数或者需要一个参数或者多个参数,就可以使用圆括号()。

例子3:

let sum = (a1, a2) => { return a1 + a2; }

这个例子3可以看出,如果箭头函数的代码块部分多于一条语句,就要使用花括号,并使用return语句

2.箭头函数的注意点:

2.1箭头函数不能作为构造函数实例。

let Person = (name,age) => {
     this.name=name;
     this.age=age;
}
let me = new Person('huang',23);
console.log(me);

      可以看到在使用箭头函数的情况下,并用构造函数,但是调试的时候就会抛出报错。箭头函数为什么不能作为构造函数?简单来说,因为箭头函数本身没有是prototype属性,而且箭头函数本身是没有this,所以箭头函数无法作为构造函数;而构造函数本身自己有prototype属性,如下图:

ES6篇——箭头函数_第1张图片

2.2箭头函数不能用arguments对象。

let fn = () => {
     console.log(arguments);
}
fn(1,2,3);

  最后就会报错。在使用箭头函数情况下,因为arguments对象在函数体内是不存在。如果你非要这个的话,可以考虑用rest(剩余运算符)来代替。参考代码如下:

let fn = (...rest) => {
     console.log(rest)
}
fn(1,2,3);  //[1,2,3]

以上的代码:在使用箭头函数的情况下,并用rest参数是可行性的。

2.3箭头函数的this对象,就是定义时所在的对象。

这个2.3的注意点值得非常注意,因为这个this对象的指向是可变的,但是在使用箭头函数情况下,那么this对象是固定的。

function sum() {
   set(() => {
           console.log('id:', this.id);//最终打印42
   }, 1000);
 }
let id = 21;
sum.call({ id: 42 });

上面代码的思路一下:set参数本身是一个箭头函数,然后这个箭头函数定义在sum生成时,反而需要等到1秒之后,由于使用箭头函数情况下,那么this就会指向函数定义在对象为{id:42},最终打印为42。

另外,如果没有使用箭头函数的话,那么this应该指向全局对象windows,那打印为21。

以上就是这文章重点的内容了,不断更新中.....给知识充电中。

欢迎各位大佬评论、点赞和收藏!Thanks

 

你可能感兴趣的:(ES6,javascript,es6)