ES6箭头函数

栏目: JavaScript · 发布时间: 5年前

内容简介:箭头函数内部例如:上面的代码会出现错误,因为this的指向从o变为了全局(函数调用中的this都是指向全局的)。

语法:

([param] [, param]) => {
   statements
}
 
param => expression

使用:

(  )=>{···}; //零个参数用()表示
  x  =>{···}; //一个参数,可以省略() 
 (x,y)=>{···}; //多个参数不能省略()

 **多行语句需要用{}括起来,单行表达式不需要{},并且会作为函数返回值。**

特性:

箭头函数内部 没有constructor方法,也没有prototype ,所以 不支持new操作 。但是它对this的处理与一般的普通函数不一样。 箭头函数的 this 始终指向函数定义时的 this,而非执行时

例如:

var o = {
    x : 1,
    fn : function() { console.log(this.x) },
    test : function() {
        setTimeout(function() {
            this.fn();
        }, 100);
    }
};

o.test(); // TypeError : this.fn is not a function

上面的代码会出现错误,因为this的指向从o变为了全局(函数调用中的this都是指向全局的)。

要修改上面的代码如下:

var o = {
    x : 1,
    fn : function() { console.log(this.x) },
    test : function() {
        var _this = this;
        setTimeout(function() {
            _this.fn(); 
        }, 100);
    }
};
o.test();

通过使用外部事先保存的this就行了。

利用到箭头函数修改, 箭头函数的 this 始终指向函数定义时的 this,而非执行时

var o = {
    x : 1,
    fn : function() { console.log(this.x) },
    test : function() {
        setTimeout(() => { this.fn() }, 100);
    }
};

o.test();

这回this就指向o了。 箭头函数可以让setTimeout里面的this,绑定定义时所在的作用域,而不是指向运行时所在的作用域。

上面代码中,转换后的ES5版本清楚地说明了,箭头函数里面根本没有自己的this,而是引用外层的this。

需要注意一点的就是箭头函数中的this是不会改变指向对象的,我们知道call和apply可以改变this的指向,但是在箭头函数中是无效的。

var x = 1,
       o = {
           x : 10,
           test : () => {
               console.log(this);//window函数调用中的this都是指向全局的
               return this.x
            }
       };
   console.log(o.test()); // 1
   console.log(o.test.call(o)); // 依然是1

如果箭头函数的代码块部分多于一条语句,就要使用大括号将它们括起来,并且使用return语句返回。

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

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

var getTempItem = id => ({ id: id, name: "Temp" });

使用注意点

  • 函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象
  • 不可以当作构造函数,也就是说,不可以使用new命令,否则会抛出一个错误。
  • 不可以使用arguments对象,该对象在函数体内不存在。如果要用,可以用Rest参数代替。
  • 不可以使用yield命令,因此箭头函数不能用作Generator函数。

以上所述就是小编给大家介绍的《ES6箭头函数》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

ASP.NET网页制作教程

ASP.NET网页制作教程

王国荣 / 华中科技 / 2002-1 / 78.00元

《ASP.NET网页制作教程:从基本语法学起(附光盘)》分为:基础篇、对象应用篇、案例研究篇。奠定ASP网页制作的基础,使用Server控件制作互动网页,使用ADO.NET访问数据库;计费网费、会员管理、访客计数器Server版、访客留言板、新闻讨论群组、电子贺卡、E-mail自动传送、FIP文件上传、在线投票、在线问卷调查、在线购物、在线考试、广告回旋板、聊天室。一起来看看 《ASP.NET网页制作教程》 这本书的介绍吧!

UNIX 时间戳转换
UNIX 时间戳转换

UNIX 时间戳转换

正则表达式在线测试
正则表达式在线测试

正则表达式在线测试

HEX CMYK 转换工具
HEX CMYK 转换工具

HEX CMYK 互转工具