zoukankan      html  css  js  c++  java
  • ES6新增(箭头函数)

    箭头函数·

    参考学习:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/Arrow_functions#基础语法

    1、不绑定this。箭头函数不会创建自己的this,它只会从自己的作用域链的上一层继承this。函数内置 this 不可变,在函数体内整个执行环境中为常量。
    2 、new 不可用。箭头函数不能使用 new 关键字来实例化对象,不然会报错。
    3.通过call apply调用箭头函数,第一个参数会被忽略
    4、没有arguments对象。更不能通过arguments对象访问传入参数。arguments只是引用了封闭作用域内的arguments。只能使用显式命名或其他ES6新特性来完成(ES6剩余参数)。
    5.没有prototype属性
    6.ield 关键字通常不能在箭头函数中使用(除非是嵌套在允许使用的函数内)。因此,箭头函数不能用作生成器
    7.在对象里使用箭头函数像使用普通函数一样。this指向(window);

    1.基础语法·

    (参数1, 参数2, …, 参数N) => { 函数声明 }
    
    //相当于:(参数1, 参数2, …, 参数N) =>{ return 表达式; }
    (参数1, 参数2, …, 参数N) => 表达式(单一)
    
    // 当只有一个参数时,圆括号是可选的:
    (单一参数) => {函数声明}
    单一参数 => {函数声明}
    
    // 没有参数的函数应该写成一对圆括号。
    () => {函数声明}
    

    2.高级语法

    //加括号的函数体返回对象字面表达式:
    参数=> ({foo: bar})
    
    //支持剩余参数和默认参数
    (参数1, 参数2, ...rest) => {函数声明}
    (参数1 = 默认值1,参数2, …, 参数N = 默认值N) => {函数声明}
    
    //同样支持参数列表解构
    let f = ([a, b] = [1, 2], {x: c} = {x: a + b}) => a + b + c;
    f();  // 6
    

    3.更短的函数

    var elements = [
      'Hydrogen',
      'Helium',
      'Lithium',
      'Beryllium'
    ];
    
    elements.map(function(element) { 
      return element.length; 
    }); // 返回数组:[8, 6, 7, 9]
    
    // 上面的普通函数可以改写成如下的箭头函数
    elements.map((element) => {
      return element.length;
    }); // [8, 6, 7, 9]
    
    // 当箭头函数只有一个参数时,可以省略参数的圆括号
    elements.map(element => {
     return element.length;
    }); // [8, 6, 7, 9]
    
    // 当箭头函数的函数体只有一个 `return` 语句时,可以省略 `return` 关键字和方法体的花括号
    elements.map(element => element.length); // [8, 6, 7, 9]
    
    // 在这个例子中,因为我们只需要 `length` 属性,所以可以使用参数解构
    // 需要注意的是字符串 `"length"` 是我们想要获得的属性的名称,而 `lengthFooBArX` 则只是个变量名,
    // 可以替换成任意合法的变量名
    elements.map(({ "length": lengthFooBArX }) => lengthFooBArX); // [8, 6, 7, 9]
    

    4.不绑定this

    箭头函数不会创建自己的this,它只会从自己的作用域链的上一层继承this。因此,在下面的代码中,传递给setInterval的函数内的this与封闭函数中的this值相同:

    5.与严格模式的关系

    鉴于 this 是词法层面上的,严格模式中与 this 相关的规则都将被忽略。 严格模式的其他规则依然不变.

    6.通过·call,apply调用

    由于 箭头函数没有自己的this指针,通过 call() 或 apply()方法调用一个函数时,只能传递参数(不能绑定this—译者注),他们的第一个参数会被忽略。(这种现象对于bind方法同样成立—译者注)

    7.不绑定arguments

    箭头函数不绑定Arguments 对象。因此,在本示例中,arguments只是引用了封闭作用域内的arguments:
    在大多数情况下,使用剩余参数是相较使用arguments对象的更好选择。

    8.像函数一样使用箭头函数

    9.使用 new 操作符

    箭头函数不能用作构造器,和 new一起用会抛出错误。

    10.使用prototype属性

    箭头函数没有prototype属性。

    11.使用 yield 关键字

    yield 关键字通常不能在箭头函数中使用(除非是嵌套在允许使用的函数内)。因此,箭头函数不能用作生成器

  • 相关阅读:
    说说VNode节点(Vue.js实现)
    从Vue.js源码角度再看数据绑定
    《Cloud Native Infrastructure》CHAPTER 7(3)
    《Cloud Native Infrastructure》CHAPTER 7(2)
    《Cloud Native Infrastructure》CHAPTER 7 (1)
    《Cloud Native Infrastructure》CHAPTER 4(2)
    《Cloud Native Infrastructure》CHAPTER 4(1)
    《Cloud Native Infrastructure》CHAPTER 2(1)
    《Cloud Native Infrastructure》CHAPTER 1(2)
    《Cloud Native Infrastructure》CHAPTER 1(1)
  • 原文地址:https://www.cnblogs.com/princeness/p/11664965.html
Copyright © 2011-2022 走看看