简单了解 箭头函数（=＞）_=>函数

箭头函数

概念：ES6允许使用箭头（=>）定义函数，箭头函数提供了一种更加简洁的函数书写方式，箭头函数多用于匿名函数的定义；

基础语法：

通常函数的定义方法：

        let parama = function(a,b){
            return [a,b];
        }
        function parama1(a,b) {
            return [a,b];
        }

箭头函数的定义方法：将原函数function关键字和函数名都删掉，并使用=>连接参数列表和函数体

   let params = (a, b) => {
            return a+b;
 
        }
        (a, b) => {
            return a+b;
        }

当箭头函数只有一个参数时可以省略括号，但是没有参数时括号必须写

 let parama1 = () => {
        }//没有参数时
 
        let params = a => {//只有一个参数
             return a;
        }

当函数体中只有一个返回值的话{}和return是可以省略的；它会默认返回 单值；如果函数体中有多条语句则需要使用return并使用{}包起来；

let f = v => v;
// 等同于
let f = function (v) {
  return v;
};
//多条语句
let f = (a,b) =>{
     a+=1;
return a+b;
}

注意： 如果箭头函数直接返回一个对象，由于大括号被解释为代码块，必须在对象外面加上括号，否则会报错。

// 报错
let params = id => { id: id, name: "name" };
 
// 不报错
let params = id => ({ id: id, name: "name" });

箭头函数的特性：

1. 箭头函数的this是静态的，始终指向函数声明时所在作用域下的this的值；

2. 箭头函数不能作为构造实例化对象；

3. 箭头函数不能使用 arguments 变量；

箭头函数不适合的场景

1. 在对象上定义函数，因为箭头函数没有它自己的this值，所以箭头函数内的this值继承自外围作用域

let obj = {  
    arr: [1, 2, 3],
    sum: () => {
        console.log(this === window); // => true
        console.log(this.window.arr); // => [1,2,3]
        console.log(this.arr) // => undefined 
    }
};
obj.sum();  

因为函数中的this是window对象，所以this.arr也就是undefined。

2. 原型方法

同样的规则也适用于原型方法的定义，使用箭头函数会导致运行时的执行上下文错误。

3. 方法的回调

let button = document.getElementById('myButton');  
button.addEventListener('click', () => {  
    console.log(this === window); // => true
    this.innerHTML = 'Clicked button';
});

在dom元素上绑定事件监听函数是非常普遍的行为，在dom事件被触发时，回调函数中的this指向该dom,可当我们使用箭头函数时因为这个回调的箭头函数是在全局上下文中被定义的因为这里的 this 指向了 window。所以当this是由目标对象决定时，我们应该使用函数表达式；

4. 构造函数

因为箭头函数不能通过 new 关键字调用

const params = (text) => {
    this.text = text;
};
 
let test = new Message('Hello World!');
// Uncaught TypeError: Message is not a constructor
//从报错信息可以看出，箭头函数没有 constructor 方法，所以不能用作构造函数。 JavaScript 会通过抛出异常的方式，进行隐式地预防。