关于es6的箭头函数使用与内部this指向

特型介绍:箭头函数是ES6新增的特性之一,它为JS这门语言提供了一种全新的书写函数的语法。

'use strcit';
let arr = [1,2,3];
//ES5
let es5 = arr.map(function(n){
    return n*2;
});
//ES6
let es6 = arr.map(n => n*2);
console.log(es5);    //[2,4,6]
console.log(es6);    //[2,4,6]

箭头函数简化了原先的函数语法,不需要再写 function ,如果函数体只有一行代码的话连 return 都不用写,这个特性对于热衷于简化流程和工作的程序员来说相当对胃口。

箭头函数支持两种模式的函数体写法,我们姑且叫他简洁函数体和块级函数体。

'use strcit';
// 简洁函数体
let fn = x => x * x;

// 块级函数体
let fn = (x, y) => {return x + y;};

简介函数体默认会把表达式的结果返回,块级函数体需要手动 return 。如果想要返回一个对象又想使用简洁函数体的话,需要这么写:

'use strcit';
let fn = () => ({});
fn();   // {}

 如果写成 var fn = () => {} ,那么执行 fn() 只能返回 undefined 。

'use strict';
//第一种
let Person = function(){
    this.age = 2;
    let that = this;
    setTimeout(function(){
     that.age++;
        console.log(that.age);
    },1000);
};

//第二种
let Person = function(){
    this.age = 2;
    setTimeout(function(){
     this.age++;
        console.log(this.age);
    }.bind(this),1000);
};
new Person();

之前我们想操作setTimeout参数function内部的this可能会用上述两种方法,看上去不错了, 但是现在有了箭头函数就不一样了,代码如下:

'use strict';
let Person = function(){
    this.age = 2;
    setTimeout(() => {
     this.age++;
        console.log(this.age);
    },1000);
};
new Person();  

由于箭头函数已经绑定了this 的值,即使使用apply或者call也不能只能起到传参数的作用,并不能强行改变箭头函数里的this。

'use strict';
let obj = {
    x:1,
    show1:function(y){
        let fn = y => y+this.x;
        return fn(y);
    },
    show2:function(y){
        let fn = v => v + this.x;
        let whatever = {
            x: 2
        };
        return fn.call(whatever, y);
    }
};
console.log(obj.show1(1));    //2
console.log(obj.show2(2));    //3

箭头函数不能与new 关键字一起使用,会报错

'use strict';
let Fn = () => {
    this.a = 1;
};
let f = new Fn();    // Error
posted @ 2016-04-27 23:39  BigPanda  阅读(4033)  评论(0编辑  收藏  举报