春风得意马蹄疾
一日看尽长安花

深入理解ES6箭头函数

基本用法

ES6允许使用"箭头"(=>)定义函数,一般称为胖箭头

var f=v=>v;
console.log(f(1));//1
//等同于
var f=function(v){
    return v;
};
console.log(f(1));//1

如果箭头函数不需要参数或者多个参数,就使用一个圆括号代表参数部分

var f=()=>5;
//等同于
var f=function(){return 5};

var sum=(num1,num2)=>num1+num2;
//等同于
var sum=function(num1,num2){
    return num1+num2;
}

如果箭头函数的代码块部分多于一条语句,就要用大括号把它们括起来

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

由于大括号被解释为代码块,所以如果箭头函数直接返回一个对象,必须在对象外面加上括号

var getId= id => ({ id: id, name: "kk" });

箭头函数与闭包

对于闭包的痛点在于,闭包的this默认绑定到window对象,但又常常需要访问嵌套函数的this,所以常常在嵌套函数中使用var _this= this,然后在闭包中使用that替代this,使用作用域查找的方法来找到嵌套函数的this值

问题描述

var a = 0;
function foo(){
    function test(){
        console.log(this.a);
    }
    return test;
};
var obj = {
    a : 2,
    foo:foo
}
obj.foo()();//0

以往解决方法

var a = 0;
function foo(){
    var _this = this;
    function test(){
        console.log(_this.a);
    }
    return test;
};
var obj = {
    a : 2,
    foo:foo
}
obj.foo()();//2

箭头函数解决方法

箭头函数的出现就可以很好的解决该问题。箭头函数根据当前的词法作用域而不是根据this机制顺序来决定this,所以,箭头函数会继承外层函数调用的this绑定,而无论this绑定到什么

var test = () => {
    console.log(this.a);
}
//形式上等价于
var test = function(){
    console.log(this.a);
}
//实质上等价于
function fn(){
    var that = this;
    var test = function(){
        console.log(that.a);
    }
}
var a = 0;
function foo(){
    var test = () => {
        console.log(this.a);
    }
    return test;
};
var obj = {
    a : 2,
    foo:foo
}
obj.foo()();//2

箭头函数与回调函数

箭头函数最常用于回调函数,如事件处理器或定时器中

function foo() {
    setTimeout(() => {
        console.log( this.a );
    },100);
}
var obj = {
    a: 2
};
foo.call( obj ); // 2
//等价于
function foo() {
    var that = this; 
    setTimeout( function(){
        console.log( that.a );
    }, 100 );
}
var obj = {
    a: 2
};
foo.call( obj ); // 2

注意事项

【1】this在箭头函数中被绑定,无论哪种this绑定规则都无法改变其绑定

【2】箭头函数不可以当作构造函数,也就是不可以使用new命令,否则会报错

var foo = () =>{return 1;}
foo();//1
var obj = new foo();//Uncaught TypeError: foo is not a constructor

【3】箭头函数中不存在arguments对象

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

Like
Like Love Haha Wow Sad Angry
赞(1) 打赏
未经允许不得转载:栗子纪blog » 深入理解ES6箭头函数
分享到: 更多 (0)
0 0 vote
Article Rating
Subscribe
提醒
guest
0 评论
Inline Feedbacks
View all comments

创作不易,打赏一下作者买瓶洗发露

支付宝扫一扫打赏

微信扫一扫打赏

0
Would love your thoughts, please comment.x
()
x