ES6笔记② 箭头函数

时间：2021-06-27 15:05:45

特性介绍

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

//ES5

   function fun(x,y){

       return x+y;

   }

   console.log(fun(5,10));//15

//ES6

   var fun6 = (x,y) => {return x+y;}

   console.log(fun6(6,10));//

ES6简化了声明函数，不需要再写 function .

好像除了简化代码，并没有什么新奇的对不对，那我们往下慢慢看。

——————————————————————————————————————————————————————————

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

// 简洁函数体

var fn = x => x * x;

// 块级函数体

var fn = (x, y) => {return x + y;};

简介函数体默认会把表达式的结果返回，块级函数体需要手动 return 。

this指向

用function生成的函数会定义一个自己的 this ，而箭头函数没有自己的 this，而是会和上一层的作用域共享 this 。

//es5中,内层函数如果想用外层函数的this属性，必须先将this赋值self变量中，然后通过self取值。
function Person(){

            this.a = 10;

            var self= this;

            return function(){

                return self.a++;

            }

        }

        var closure = Person();

        console.log(closure());//10

        console.log(closure());//11

如果使用箭头函数则省事很多，代码如下：

//会和上一层的作用域共享 this 　　　　　　　　　　　　　　　　　　　　　　　　　　//再多套一层
function Person (){　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　//function Person (){

            this.a = 10;　　                                                this.a = 10;

            return () => {                                                  return () => {

                return this.a++;                　　　　　　　　　　　　　　　　　return () =>{

            }    　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　return this.a++;

        }　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　}

        var closure = Person();　　　　　　　　　　　　　　　　　　　　　　　　　　}　

        console.log(closure());//10　　　　　　　　　　　　　　　　　　　　　　}

        console.log(closure());//11　　　　　　　　　　　　　　　　　　　　　　 var closure = Person();
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 console.log(closure()());//10
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 console.log(closure()());//11

apply & call

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

var adder = {

          x: 1,

          add1: function (y) {

              var fn = v => v + this.x;

              return fn(y);

          },

          add2: function (y) {

              var fn = v => v + this.x;

              var whatever = {

                  x: 2

              };

              return fn.call(whatever, y);//this并不是whatever


} };
 console.log(adder.add1(1)); // 
console.log(adder.add1(10)); //




ps:this指向的问题js的this比较诡异，谁执行就指向谁


arguments




var fn = (...rest) => rest[2];

       console.log(fn(2,0,5));  //




...rest 也是 ES6 的一个新特性，之后会介绍。
我们知道JS函数内部有个arguments对象，可以拿到全部实参。现在ES6给我们带来了一个新的对象，可以拿到除开始参数外的参数，即剩余参数
这个新的对象和arguments不一样，它是程序员自定义的一个普通标识符，只是需要在前面加上三个点：...
ES6笔记②  箭头函数


ES6笔记②  箭头函数


es6函数中剩余参数 原文地址：http://www.cnblogs.com/snandy/p/4482463.html


不能被new


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




var Fn = () => {

           this.a = 1;

    };

var f = new Fn();    // Error


相关文章