箭头函数介绍

作者: Allan要做活神仙 | 来源:发表于2016-12-23 18:31 被阅读7395次

ES6标准新增了一种新的函数:Arrow Function(箭头函数)。
箭头函数与传统的JavaScript函数主要区别在于以下几点:

1、对 this 的关联。函数内置 this 的值,取决于箭头函数在哪儿定义,而非箭头函数执行的上下文环境。
2 、new 不可用。箭头函数不能使用 new 关键字来实例化对象,不然会报错。
3、this 不可变。函数内置 this 不可变,在函数体内整个执行环境中为常量。
4、没有arguments对象。更不能通过arguments对象访问传入参数。只能使用显式命名或其他ES6新特性来完成。

这些差异的存在是有理可循的。首先,对this的绑定是JavaScript错误的常见来源之一。容易丢失函数内置数值,或得出意外结果。其次,将箭头函数限制为使用固定this引用,有利于JavaScript引擎优化处理。

语法:

箭头函数的语法很简单,定义自变量,然后是箭头和函数主体。

1、不引入参数:
var sum = () => 1 + 2;
// 等同于:
var sum = function() {    
    return 1 + 2; 
};
2、引入单个参数:
var reflect = value => value;
// 等同于:
var reflect = function(value) {    
    return value;
};

x => x * x
//等同于:
function (x) { 
    return x * x;
}

传一个参数就直接写就好了,不用加小括号。
句,所以也不用加大括号。
函数构造完毕赋给reflect加以引用。

3、引入多个参数,则应加上小括号
var sum = (num1, num2) => num1 + num2;
// 等同于:
var sum = function(num1, num2) {    
    return num1 + num2;
 };
4、若你想使用标准的函数体,或者函数体内可能有更多的语句要执行,则要用大括号将函数体括起来,并明确定义返回值。
var sum = (num1, num2) => { return num1 + num2; }
//等同于:
var sum = function(num1, num2) {    
  return num1 + num2; 
};

大括号内的部分基本等同于传统函数

5、箭头函数若要返回自定义对象的话,就必须用小括号把该对象括起来先
var getTempItem = id = > ({
   id: id,
  name: "Temp"
});
// 等同于:
var getTempItem = function(id) {
  return {
    id: id, 
    name: "Temp"
     };
};

用小括号包含大括号则是对象的定义,而非函数主体

相关文章

  • 箭头函数介绍

    ES6标准新增了一种新的函数:Arrow Function(箭头函数)。箭头函数与传统的JavaScript函数主...

  • ES6中箭头函数中的this指向

    简要介绍:箭头函数中的this,指向与一般function定义的函数不同,比较容易绕晕,箭头函数this的定义:箭...

  • ES6-函数

    一、 箭头函数 ES6 介绍了一种新的定义的函数的方法,叫 Arrow Functions ,箭头函数,认识一下...

  • es6箭头函数的理解及面试题

    箭头函数的介绍 箭头函数是es6当中对函数的一种全新表示法。其将函数的简洁性发扬到了极致!先来看一个最简单的箭头函...

  • ES6~箭头函数

    什么是箭头函数 单表达式箭头函数 相当于 多表达式箭头函数 箭头函数相当于匿名函数,并且简化了函数定义。箭头函数有...

  • 箭头函数和立即执行函数

    箭头函数 箭头函数和普通函数有什么区别?如果把箭头函数转换为不用箭头函数的形式,如何转换主要是this的差别,箭头...

  • JScript语言——ES6(ES2015)

    ES6(ES2015)语法介绍 变量声明let、const 块级作用域 解构赋值 箭头函数清楚简写形式箭头函数的t...

  • 学习 ES 6 箭头函数

    箭头函数的用法 ES6 允许使用“箭头”(=>)定义函数。 箭头函数的一个用处是简化回调函数。 箭头函数 this...

  • 箭头函数

    箭头函数 箭头函数能让this的指向固定化 分析:1)第一个setInterval()中使用了箭头函数,箭头函数使...

  • TS  笔记this

    this 箭头函数在箭头函数创建的地方获得this;非箭头函数,在调用函数的地方获得this如图

网友评论

本文标题:箭头函数介绍

本文链接:https://www.haomeiwen.com/subject/dmnkvttx.html