js arrowFunction 箭头函数

箭头函数

1. 代码块只有一条语句时，不使用大括号

var sum = (num1, num2) => num1 + num2 

• 同样的写法

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

• 等同于

var sum = function(num1, num2) {
  return num1 + num2;
};

简化判断

//自行判断，满足条件返回true，不满足条件返回false
const isAdult =(age) => age>=18;
const canDrink =(age) => age>=21;
isAdult(21);//true
canDrink(18);//false

2. 如果有多条语句，使用大括号，同时使用return(否则没有返回值)

var sum = (n1, n2) => {
  console.log(n1);
  return n1 + n2
}

3. 使用箭头函数返回对象

必须在对象外面加上括号，否则就只是个代码块，从而就不会返回对象

var sum = () => ({name: 'a'})

• 等同于

var sum = function sum() {
  return { name: 'a' };
};

4.箭头函数和普通函数明显的区别

1. 箭头函数内部的this是词法作用域，由上下文确定。

//普通函数
var obj = {
    birth: 1990,
    getAge: function () {
        var b = this.birth; // 1990
        var fn = function () {
            return new Date().getFullYear() - this.birth; // this指向window或undefined
        };
        return fn();//因为这里call 这可以这么想 返回函数让外面执行
    }
};

//箭头函数
var obj1 = {
    birth: 1990,
    getAge: function () {
        var b = this.birth; //这里是obj
        var fn = () => new Date().getFullYear() - this.birth; // this指向obj对象，跟上面的一样
        return fn();
    }
};
obj1.getAge(); // 26，箭头函数完全修复了this的指向，this总是指向词法作用域，也就是外层调用者obj1

2. 不能用arguments，但是可以用参数以及参数解构
3. 匿名函数，奴能作为构造函数，不可以new
4. 箭头函数没有原型属性

5.创建立即执行函数表达式

let person = ((name) => {
  return {
    getName: function( ) {
      return name;
    }
  };
})('Nicholas');

console.log(person.getName()); // "Nicholas"

// 实际上相当于：
let person = function(name) {
  return {
    getName: function( ) {
      return name;
    }
  };
}('Nicholas');

console.log(person.getName()); // "Nicholas"

6.不能与new一起用

箭头函数缺少正常函数所以拥有的 prototype 属性，它的设计初衷是“即用即弃”，所有不能用它定义新的类型。如果尝试通过 new 关键字调用箭头函数，会报错，就像这样：

var MyType = () => {},
  object = new MyType(); // 错误，不可以通过 new 关键字抵用箭头函数

7.什么时候不要用箭头函数

• 不能作为构造函数，不可以实例化

详细解释

Reference：

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/Arrow_functions