`

JavaScript之ECMAScript6新特性之_03_箭头函数(Arrow Function)

阅读更多
一、简介
箭头函数(Arrow Function)是 ES6 (ECMAScript2015)中的新语法特性。
它是函数表达式的一种简写形式,非常适合面向过程(相对于面向对象而言)的函数式编程。
但是它也有诸多限制和“缺点”,比如:没有自己的 this 对象,没有 arguments 参数,没有 prototype 属性,不能当作构建函数使用(无法用new关键字)等等。
下面将逐一介绍。


二、语法

1、常规写法
(param1, param2, …, paramN) => { statements } 


2、参数的简写
      如果只有一个参数,则可以省略小括号。
      如果没有参数,则不能省略。
//只有一个参数
singleParam => { statements }

//没有参数
() => { statements }


3、函数体的简写
      如果只有一个 statements 表达式,则可以省略后面的 花括号。
      此时等价于把 表达式 返回。
// 函数体只有一个表达式,省略后面的花括号 { }
(param1, param2, …, paramN) => expression

// 等价于:
(param1, param2, …, paramN) => { return expression; }


// 注意:不等价于:
(param1, param2, …, paramN) => { expression }
// 此表达式表示,什么也没有返回!!!
//


      但是,如果表达式为一个 JSON 对象,则需要用小括号扩起来。
(param1, param2, …, paramN) => ({name:"John", age:18})


      本小节综合例子:
var arr = [1, 4, 9, 16];
//
var mapedArr1 = arr.map( x => x*2 );
var mapedArr2 = arr.map( x => { x*2 } );
var mapedArr3 = arr.map( x => { return x*2 } );

console.log(mapedArr1); 
//> Array [2, 8, 18, 32]
console.log(mapedArr2);
//> Array [undefined, undefined, undefined, undefined]
console.log(mapedArr3);
//> Array [2, 8, 18, 32]

      即:函数体上加花括号{},就要写 return 语句,不然什么也不返回。



4、支持多参 和 给参数设置默认值
// 多参数 ...rest
(param1, param2, ...rest) => { statements } 

// 参数默认值
(param1 = defaultValue1, param2, …, paramN = defaultValueN) => { 
    statements 
} 


5、支持列表结构参数解析
var arr = [1, 2];

var f = ([a, b] = arr, {x: c} = {x: a + b}) => a + b + c; 

f(); // 6

    同样,如果参数为一个 JSON 对象,则需要用小括号扩起来。
// 参数结构化解析
var f = ({length}) => length; 

// 参数结构体:{length} 等价于 {length: ""}



6、书写格式:不要换行
    不要将参数和箭头写在二行中,它们需要写在同一行中。
// 错误
var func = ()
           => 1; 
// SyntaxError: expected expression, got '=>'



下面展示一个综合示例:
//
// 下面的写法,都会将  materials 转换为 [8, 6, 7, 9] 并输出。

var materials = ['Hydrogen', 'Helium', 'Lithium', 'Beryllium'];

// 1. 常规
console.log(
    materials.map(function(material) { 
      return material.length; 
    })
);

// 2. 箭头函数
console.log(
    materials.map((material) => {
      return material.length;
    })
);

// 3. 简写的箭头函数
console.log(
    materials.map(material => material.length)
);


// 4. 简写 + 参数结构解析 的 箭头函数
console.log(
   //表示传递进的参数的结构是这样的:{ length: '' }
    materials.map(({length}) => length)
); 

//




三、箭头函数没有自己的 this 对象

在箭头函数出现之前,new 出来的函数对象,都有一个 this 属性,指向该对象本身。
然而在箭头函数中,没有 this 对象。因此不存在外层this被重写或本身this被覆盖的问题。

1、不存在 外层 this 被重写问题

【错误】常规的写法:外层 this 被 window 取代
function Person() {
    this.age = 0;
    setInterval(function growUp() { 
        if(this.age) this.age++; 
        console.log(this === window); // true
        console.log(this.age === undefined); // true
    }, 1000);
}

var p = new Person();

// 因为是调用 window 对象的 setInterval 方法,
// 所以 this 指向 window
/*
   多说一句,window 的 setInterval 方法内部实现可能是这样的:
   window.setInterval = function(func, time){
         this.invoke = func;
         //...
   }
   参数中传递的function参数被设定成为了 window 对象的一个属性。
   所以调用时,参数中的 this 指向的是 window 对象。
*/


【正确】常规写法:借用一个 that。
function Person() {
    var that = this;
    that.age = 0;

    setInterval(function growUp() {
        that.age++;
        console.log(that.age);
    }, 1000);
}
var p = new Person();


【正确】箭头函数:外层的 this 被成功传递
function Person(){
    this.age = 0;
    setInterval(() => {
        this.age++; 
        console.log(this.age);
    }, 1000);
}

var p = new Person();



2、不存在 本身this被覆盖问题
    调用 call 或 apply 函数时,无法给定一个 this 对象给 箭头函数。
var adder = {
  base: 1,

  add: function(a) {
    var f = v => v + this.base;
    return f(a);
  },

  addThruCall: function(a) {
    var f = v => v + this.base;
    var b = {
      base: 2
    };
    // 把 b 作为 this 对象传入,结果不起作用。
    return f.call(b, a);
  }
};

console.log(adder.add(1));         // 结果:2
console.log(adder.addThruCall(1)); // 结果:仍然是 2




四、箭头函数没有 arguments 对象 
箭头函数没有隐式的 arguments 数组对象。
// 例子一:
var arguments = [3, 2, 1];
var arr = () => arguments[0];
arr(); // 3

// 例子二:
function foo(n) {
  // 此处的 arguments 对象是 foo 函数的,
  // 不是 f 箭头函数的。因为它没有。
  var f = () => arguments[0] + n; 
  return f();
}
foo(2); // 4



五、箭头函数没有 prototype 属性 
var Foo = () => {};
console.log(Foo.prototype); // undefined



六、箭头函数不能使用 new 关键字 
var Foo = () => {};
var foo = new Foo(); // TypeError: Foo is not a constructor



七、箭头函数不能单独使用 yield 关键字 

不能直接在 箭头函数 中 使用 yield 关键字(除非它被嵌套在其它函数中)。
所以 箭头函数 不能直接作为 Generator 使用。


八、在逻辑运算中,需要用小括号把 箭头函数 括起来
let callback;

callback = callback || function() {}; // ok

callback = callback || (() => {});    // ok

callback = callback || () => {};      
// SyntaxError: invalid arrow-function arguments





引用:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions







转载请注明,
原文出处:http://lixh1986.iteye.com/blog/2409009






=
分享到:
评论

相关推荐

    ECMAScript6的新特性箭头函数(Arrow Function)详细介绍

    箭头函数是ES6中最具代表性的新特性之一,它提供了一种更加简洁、易读的函数定义方式。 箭头函数的主要特点包括: 1. **this的绑定**:在传统JavaScript函数中,`this`的值取决于函数的调用方式。然而,在箭头函数...

    《ECMAScript 6 入门-阮一峰》PDF完整版

    总的来说,《ECMAScript 6 入门》这本书详细讲解了这些新特性,不仅适合初学者入门,也对有一定经验的开发者深入理解ES6有极大的帮助。阅读这本书,将使你能够更好地利用ES6的特性编写高效、易于维护的JavaScript...

    浅析JavaScript 箭头函数 generator Date JSON

    ES6(ECMAScript 2015)标准中引入了一种新的函数表达式——箭头函数(Arrow Function)。箭头函数提供了一种更简洁的函数写法,它主要有以下几个特点: 1. **简洁语法**:箭头函数允许省略`function`关键字,直接...

    一本开源的 JavaScript 语言教程,全面介绍 ECMAScript 6 新增的语法特性

    其次,箭头函数(Arrow Function)改变了函数的定义方式,其语法更为紧凑,且箭头函数内部的`this`指向更为清晰,解决了回调函数中`this`指向不一致的难题。 在变量声明方面,ES6 引入了let和const关键字。let允许...

    JavaScript ES6函数式编程入门经典_javascript_tall7cj_

    JavaScript ES6函数式编程入门经典是一本针对JavaScript开发者,尤其是初学者的教程,旨在帮助他们掌握ES6(ECMAScript 2015)的新特性,并深入理解函数式编程的概念和实践。函数式编程是一种编程范式,它强调将计算...

    ECMAscript常用新特性积累1

    2. **箭头函数** (`Arrow functions`):ES6引入的新语法,简化了函数定义,如`() => this.setState({pressed: true})}>`,箭头函数内部的`this`指向定义时所在的作用域,而不是调用时的作用域,这解决了回调函数中`...

    JavaScript 语言教程 全面介绍 ECMAScript 6 新增的语法特性包括语言程序库数据结构算法 系统 网络 zip

    随着ECMAScript 6(简称ES6)的发布,JavaScript获得了许多新的语法特性,极大地提升了开发效率和代码可读性。本教程将全面深入地探讨这些特性,并结合数据结构、算法、系统以及网络知识,为开发者提供一个全面的...

    ECMAScript 6 Succinctly

    ECMAScript 6(简称ES6)是JavaScript语言的第六版,于2015年正式发布,引入了大量新特性,极大增强了JavaScript的编程能力。ES6 Succinctly是一本专注于ES6特性的教程书籍,旨在帮助开发者快速理解和掌握ES6的新...

    ECMAScript 6 技术扫盲,快速学习ES6,进入Javascript开发ES6时代

    ### ECMAScript 6 (ES6) 技术扫盲 #### 1. let、const 和 block 作用域 在 ES6 中引入了 `let` 和 `const` 关键字来替代原有的 `var` 来声明变量。这些新关键字不仅提供了更好的作用域控制,而且也避免了一些与 `...

    javascript ES6中箭头函数注意细节小结

    ES6(ECMAScript 2015)为JavaScript语言引入了箭头函数(Arrow Functions)这一新的函数类型,旨在简化函数定义并解决传统函数中this绑定问题。本文将详细探讨ES6中箭头函数的注意细节。 首先,箭头函数的定义使用...

    JavaScript ES6箭头函数使用指南

    胖箭头函数(Fat arrow functions),又称箭头函数,是一个来自ECMAScript 2015(又称ES6)的全新特性。有传闻说,箭头函数的语法=>,是受到了CoffeeScript 的影响,并且它与CoffeeScript中的=>语法一样,共享this上...

    【技术分享】ECMAScript6.pptx

    ECMAScript 6,简称ES6,是JavaScript语言的一个重要版本,它在2015年正式发布,引入了大量的新特性和语法改进,为前端开发带来了显著的提升。ES6的发布标志着JavaScript语言向更现代化、更强大和更规范的方向发展。...

    JavaScript面向对象编程指南.pdf

    9. ES6新特性:随着ECMAScript 6(ES6)的发布,JavaScript引入了许多新特性,如类(class)、模块(module)、箭头函数(arrow function)等,这些都丰富了面向对象编程的能力。 通过以上内容,我们可以了解到...

    JavaScript学习手册

    自ECMAScript 6(简称ES6)发布以来,JavaScript引入了许多新特性,如类(class)、模块(module)、箭头函数(arrow function)、模板字符串(template literals)等,大大提高了代码的可读性和可维护性。...

    精通JavaScript2015

    2015年,随着ECMAScript 6(ES6)的发布,JavaScript迎来了重大更新,引入了诸多新特性,如类(Class)、模块(Module)、箭头函数(Arrow Function)、解构赋值(Destructuring Assignment)等。这些新特性极大地...

    javascript备课

    ES6(ECMAScript 2015)引入了许多新特性,如类(class)、箭头函数(arrow function)、模板字符串(template literals)和解构赋值(destructuring assignment),这些都极大地提升了JavaScript的可读性和开发效率...

Global site tag (gtag.js) - Google Analytics