es6之箭头函数

es6之箭头函数

  es6中的箭头函数实际上是一种语法糖,使用起来会更加方便。

 1. 即它允许使用箭头(=>)来定义函数。 如

  var f = v =>v;

  这个箭头函数就等同于:

  var f = function (v) {

    return v;

  };

  

 2. 如果不需要给这个函数传递参数,就使用圆括号来代表参数部分,如下所示:

  var f = () =>8;

  这个箭头函数就等同于:

  var f = function () {

    return 8;

  };

  

  3.如果传入的参数多于一个,同样也需要使用圆括号,如下:

  var f = (num1,num2) => num1+num2;

   等同于:

  var f = function (num1,num2){

    return num1+num2;

  };

  4.我们可以看到,如果只有一条语句,就会自动添加return。但是如果有两条及以上的语句,就需要使用{},并在需要返回值的地方添加return。如:

  var f = (num1,num2) => {num1++; return num1+num2;}  

  等同于:

  var f = function(num1,num2){

    num1++;

    return num1+num2;

  }

  

  5.如果我们希望返回一个对象,则必须使用()将对象括起来,因为箭头函数认为{}是代码块,从而产生错误。如下:

  var f = () => ({name:"zzw",age:21});

 

  6.箭头函数可以简化回调函数。如:

  [1,2,3].map(x => x*x);

  这个函数在用普通函数写是:

  [1,2,3].map(function(x){

    return x*x; 

  });  

  显然箭头函数做了很多简化工作。

  7、 es6的箭头函数表达式是最适合用于非方法函数的,并且他们不能用作构造函数。

  这个需要注意,我们一般使用es6箭头函数的场景都是一般的函数定义,回调函数等等。而一般对于类中的某个方法,我们是不适用箭头函数的,并且更不会将构造函数写成箭头函数。

  8、 箭头函数不是绑定this

  在箭头函数出现之前,每个新定义的函数都有其自己的this值(例如,构造函数的this会指向一个新的对象;严格模式下的this为undefined; 一般的指向window; 如果函数作为对象的方法被调用,则this指向了那个调用它的对象)。这些在面向对象风格的编程中,带来了很大的困扰。

  所以,箭头函数中的this会自动捕获其所在上下文中的this值,作为自己的this值,因为下面的代码将会如期运行:

function Person() {  
    this.age = 0;  
    setInterval(() => {
        // 回调里面的 `this` 变量就指向了期望的那个对象了
        this.age++;
    }, 3000);
}

var p = new Person();

    

  9箭头函数表达式对非方法函数是最合适的,让我们看看当我们试着把他们当做方法时发生了什么?

'use strict';
var obj = {
  i: 10,
  b: () => console.log(this.i, this),
  c: function() {
    console.log( this.i, this)
  }
}
obj.b(); 
// undefined
obj.c(); 
// 10, Object {...}

可以看到: 这里属性b的值就是使用箭头函数的一个方法,这里的this,并没有指向这个对象,而是 undefined,以为this不会自动绑定。 

   

  10. 构造函数不能使用函数,否则就会报错,如下:

     

  可以看到,如果我们使用箭头函数作为构造函数,就会导致报错 --- Bar is not a constructor。 

  

  11、 箭头函数没有原形属性

  对于一般函数,都是由原型对象的,但是对于箭头函数,可以发现,是找不到原型对象的,即undefined。 

  

  

  12、 使用yield关键字

  yield关键字是不能在箭头函数中使用的,因此箭头函数不能用作生成器

  

  

  

原文地址:https://www.cnblogs.com/zhuzhenwei918/p/6362515.html