码迷,mamicode.com
首页 > 其他好文 > 详细

ES6的箭头函数详解:

时间:2017-06-21 22:58:24      阅读:229      评论:0      收藏:0      [点我收藏+]

标签:生效   on()   sum   define   执行   turn   表示   undefined   允许   

箭头函数是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

ES6的箭头函数详解:

标签:生效   on()   sum   define   执行   turn   表示   undefined   允许   

原文地址:http://www.cnblogs.com/kelly2017/p/7061844.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!