ES6的箭头函数详解：

Posted 2020-09-23

箭头函数是ES6中新增一个函数表达形式，它是对函数的一种简化ES6允许使用“箭头”（=>）定义函数。

Eg:

var f = v => v;

等同于之前

var f = function(v) {

  return v;

};

const Even = n => n % 2 == 0;

const Square = n => n * n;

注：

箭头函数就是省略了function

参数集与函数体之间一定要有一个箭头=>

对于参数集而言：

零个参数用 () 表示;

一个参数可以省略 ();

 多参数不能省略 ();

Eg:

var f = () => 5;

// 等同于

var f = function () { return 5 };

 

var sum = (num1, num2) => num1 + num2;

// 等同于

var sum = function(num1, num2) {

  return num1 + num2;

};

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

Eg:

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

 

[1,2,3].map(function (x) {

  return x * x;

});

//  [1, 4, 9]

[1,2,3].map(x => x * x);

//[1, 4, 9]

不可以使用arguments对象，该对象在函数体内不存在。如果要用，可以用 rest 参数代替。

const numbers = (...nums) => nums;

numbers(1, 2, 3, 4, 5)

// [1,2,3,4,5]

 

const haha = (head, ...tail) => [head, tail];

haha(1, 2, 3, 4, 5)

[1, Array[4]]

箭头函数有几个使用注意点。

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

function foo() {

  setTimeout(() => {

    console.log(‘id:‘, this.id);

  }, 100);

}

var id = 21;

foo.call({ id: 22 });

// id: 22

setTimeout的参数是一个箭头函数，这个箭头函数的定义生效是在foo函数生成时，而它的真正执行要等到100毫秒后。如果是普通函数，执行时this应该指向全局对象window，这时应该输出21。但是，箭头函数导致this总是指向函数定义生效时所在的对象（本例是{id: 22}），所以输出的是22。

var o = {

    x : 1,

    func : function() { console.log(this.x) },

    test : function() {

        setTimeout(function() {

console.log(this);

            this.func();

        }, 100);

    }

};

 

o.test();

//Window {external: Object, chrome: true, document: document, CNT_SELECT: undefined, jQuery17105021754387381239: Object…}

// this.func is not a function(anonymous function)

出现错误，因为this的指向从o变为了全局（函数调用中的this都是指向全局的）。

var o = {

    x : 1,

    func : function() { console.log(this.x) },

    test : function() {

        var _this = this;

        setTimeout(function() {

            _this.func();

        }, 100);

    }

};

o.test();

// 1

先保存的this就行了。

var o = {

    x : 1,

    func : function() { console.log(this.x) },

    test : function() {

        setTimeout(() => { this.func() }, 100);

    }

};

o.test();

// 1

（2）this是不会改变指向对象的

var x = 1,

    o = {

        x : 10,

        test : () => this.x

    };

 o.test();

// 1

o.test.call(o);

//   1