javascript箭头函数

箭头函数为es6标准新增的函数
在学习vue.js时发现使用箭头函数的情况十分普遍，也很方便，主要作用突出在this的使用上
不绑定this时：

var obj = {
        age: 1,
        say: function() {
            setTimeout(function() {
                console.log(this, this.age); // window undefined
            }, 0);
        },
    }

    var obj1 = {
        age: 1,
        say: function() {
            setTimeout(() => {
                console.log(this, this.age); // obj1 1
            }, 0);
        }
    };

从上面可以看出，箭头函数中访问的this其实为父级作用域中的this，即第二段代码中的obj1
另一个例子：

var handler = {
        id: '111',
        doSomething: function(e) {
            console.log(e);
        },
        init: function() {
            document.addEventListener('click', (event) => { // 这里绑定事件，函数this就可以访问到handler的方法doSomething
                this.doSomething(event);
            }, false);
        }
    }

    handler.init();

注意：
1.不可以作为构造函数来使用

var Person = (name) => { // Uncaught TypeError: Person is not a constructor
        this.name = name;
}

var person = new Person('Jack');

这个特性很容易测试，如果上一条明白的话也很容易理解： 箭头函数压根就没有this，当然不能作为构造函数（如果明白构造函数new的过程的话，插一句： new的过程其实就是创建一个对象，将this指向该对象，然后执行代码初始化这个对象，最后返回）
2.不绑定arguments（如果有要使用arguments的时候可以使用rest参数代替）
arguments是javascript用来访问当前函数参数，或者用于重载函数用

var foo = (val) => {
        console.log(arguments); // Uncaught ReferenceError: arguments is not defined
};
foo();

这个特性也很好测试，但是实在要使用arguments对象要怎么办呢？我们可以使用es6的另一个新特性rest参数，完美替代
ES6引入rest参数（形式为“…变量名”），用于获取函数的多余参数。rest参数之后不能再有其他参数（即只能是最后一个参数）。

var foo = (...args) => {
        console.log(args); // [1, 2, 3]
    };
    foo(1, 2, 3);

3.不可以使用yield命令，因此箭头函数不能用作Generator函数
箭头函数不适用的场景：
1.作为对象的属性：

var obj = {
        a: () => {
            console.log(this); // window
        }
    };

作为对象的属性时，该this便不是指向对象本身了，会有意想不到的效果
2.作为原型方法：

function Person(name) {
        this.name = name;
    }

    Person.prototype.say = function() {
        console.log(this); // 指向实例
    };

    Person.prototype.bark = () => {
        console.log(this); // window
    };


    var pe = new Person('Jack');
    pe.say(); // {name: 'Jack'}
    pe.bark(); // window

3.需要动态this的时候：

document.addEventListener('click', () => {
        console.log(this); // window
    }, false);

document.addEventListener('click', function() {
        console.log(this); // #document对象
	}, false);

// 一般情况，我们绑定事件处理函数时希望函数内部的this指向绑定的Dom对象，但是如果使用了箭头函数，则this则会出乎我们的意料