ES6箭头函数

guyan0319 发布于2019-08-23 15:34 / 2157人阅读

摘要：特性箭头函数内部没有方法，也没有，所以不支持操作。箭头函数的始终指向函数定义时的，而非执行时。不可以使用对象，该对象在函数体内不存在。不可以使用命令，因此箭头函数不能用作函数。

语法：

([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函数。

服务器托管 GPU服务器箭头函数 ES6 es6-系列 ES6入门

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/102254.html

es6 - 箭头函数

摘要：也就是说箭头函数的的值不再根据调用时上下文确定，而是像普通变量那样根据定义时的作用域链进行查找。箭头函数中的依然要根据定义时的作用域链进行查找。知乎这篇文章对箭头函数的一些不适合的场景进行了总结，可以作为参考。 es6 - 箭头函数哇，箭头函数...，听起来好NB，但是如果你知道它是因为使用了=>这样类似箭头的符号，所以才叫箭头函数。瞬间感觉：呵，这名字起的...。 es6增加了...

13651657101 2019-08-26 11:46 评论0 收藏0
ES6学习笔记之箭头函数

摘要：特性介绍箭头函数是新增的特性之一，它为这门语言提供了一种全新的书写函数的语法。用生成的函数会定义一个自己的，而箭头函数没有自己的，而是会和上一层的作用域共享。本文同步自我得博客：http://www.joeray61.com JS中的箭头箭头在JS里并不算是个新鲜的玩意儿，一直以来，JS都支持-->这样的箭头。很早的时候有些浏览器还不支持JS，当时的人们为了兼容这些浏览器，需要这...

Vultr 2019-08-19 18:12 评论0 收藏0
深入ES6：箭头函数

摘要：令人震惊的箭头函数引入了写入函数的新语法。使用箭头函数创建简单对象时有一个警告。代码因此被默默地解释为一个不执行任何操作并返回未定义的箭头函数。内部函数是一个箭头函数，所以它从封闭范围继承此函数。箭头从一开始就一直是JavaScript的一部分。第一个JavaScript教程建议在HTML注释中包装内联脚本。这会阻止不支持JS的浏览器错误地将JS代码显示为文本。你会写这样的东西： ...

MasonEast 2019-08-22 17:14 评论0 收藏0
ES6 箭头函数从了解到深入

摘要：有传闻说，箭头函数的语法，是受到了的影响，并且它与中的语法一样，共享上下文。箭头函数是新增加的一个特性。箭头函数没有自己的值，其值是通过继承其它传入对象而获得的通常来说是上一级外部函数的的指向。箭头函数 1. 简单的定义：胖箭头函数 Fat arrow functions，又称箭头函数，是一个来自ECMAScript 2015（又称ES6）的全新特性。有传闻说，箭头函数的语法=>，...

Eminjannn 2019-08-20 16:37 评论0 收藏0
ES6~你跟箭头函数升华之路

摘要：箭头函数简单的定义胖箭头函数，又称箭头函数，是一个来自又称的全新特性。箭头函数是新增加的一个特性。使用箭头函数的注意点箭头函数在参数和箭头之间不能换行。值得注意的一点就是对象的指向是可变的，但在箭头函数内是固定的。箭头函数 1. 简单的定义：胖箭头函数 Fat arrow functions，又称箭头函数，是一个来自ECMAScript 2015（又称ES6）的全新特性。有传闻说，...

Faremax 2019-08-21 17:16 评论0 收藏0
关于ES6中箭头函数的this问题

摘要：对象的指向是可变的，但是在箭头函数中，它是固定的。同样的由于箭头函数没有自己的所以传统的显性绑定无效内部的指向外部在的学习中，的指向问题一直是个难点，特别是在对象方法中使用时，必须更加小心。由此箭头函数在很大程度上减少了我们的困扰。什么是箭头函数用法 ES6 允许使用箭头（=>）定义函数测试 var p1 = document.getElementById(test1)...

LeviDing 2019-08-22 10:53 评论0 收藏0