美文网首页
箭头函数

箭头函数

作者: luckySnail | 来源:发表于2017-07-19 17:01 被阅读0次
箭头函数其实就是简写的函数表达式。且箭头函数不会新产生自己作用域下的this,arguments,super或者new.target

基础语法:
1.  (param1, param2, …, paramN) => expression  等同于: (param1, param2, …, paramN) => {return expression; }
 删除大括号,它就是一个隐式的返回值,不需要指定我们返回 
2. 如果只有一个参数,圆括号可省略
(singleParam) => { statements; } 等同于:singleParam => { statements; }
3.如果箭头函数没有参数,圆括号不能省略,如果不使用圆括号可以使用_下划线
() => { statements; } 或_ => { statements; }
高级语法:
1. 返回值是对象的情况下,函数体外要加圆括号
const foo1 = a => {b:10};
console.log(foo1());//undefined

const foo2 = a => ({b:10});
console.log(foo2());//Object {b: 10}

2.支持 Rest parameters 和 default parameters
(param1, param2, ...rest) => { statements }  
(param1 = defaultValue1, param2, …, paramN = defaultValueN) => { statements }  
this的区别:
在箭头函数之前,this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this指向谁,this最终指向的是那个调用它的对象
比如新建个test.js,内容为:
function Person() {  
  this.age = 0;  
  setInterval(function growUp() {  
    this.age++;   
    console.log(this.age);
  }, 1000);  
} 
var p = new Person();  
执行该js会每隔一秒console一次NaN,原因就是 growUp() 函数定义了其内部的 `this`。
想解决这个问题可以用之前常用的把this赋值给一个别的变量比如self或者that,然后growUp里用新的变量代替this,如下:
function Person() {  
 const that = this;
  that.age = 0;  
  setInterval(function growUp() {  
    that.age++;   
    console.log(that.age);
  }, 1000);  
}   
var p = new Person();  这样执行该js每隔会输出1 2 3……

或者可以使用箭头函数解决,因为箭头函数不会新产生自己作用域下是this,箭头函数会捕获其所在的上下文中的this值,作为自己的this值,所以这个问题就很愉快的解决了。代码如下:
function Person() {  
  this.age = 0;  
  setInterval(() => {  
    this.age++;   
    console.log(this.age);
  }, 1000);  
} 
var p = new Person();  
不绑定arguments:

箭头函数不会在其内部暴露出参数(比如: arguments.length, arguments[0]
等等,都不会指向箭头函数的 arguments,而是指向了箭头函数所在作用域的一个名为 arguments 的值(如果有的话,否则,就是 undefined。——官网文档)举例如下:

var arguments = 1;
var foo = () => arguments;
console.log(foo());//1

function foo1() {
  var f = (i) => arguments[0]+i; 
  return f(2);
}

console.log(foo1(1)); //3
箭头函数不能用作构造器,和new一起使用会报错。
var Foo = () => {};
var foo = new Foo(); 
// TypeError: Foo is not a constructor
箭头函数没有原型属性
var Foo = () => {};
console.log(Foo.prototype); 
// undefined
箭头函数在参数和箭头之间不能换行
var func = ()
           => 1; 
// SyntaxError: expected expression, got '=>'

相关文章

  • ES6~箭头函数

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

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

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

  • 学习 ES 6 箭头函数

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

  • 箭头函数

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

  • TS  笔记this

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

  • 箭头函数和数组

    箭头函数&数组 箭头函数 特点: 没有 this 没有 arguments 没有prototype在箭头函数中使用...

  • 箭头函数

    箭头函数 为什么使用箭头函数

  • 箭头函数中this的指向

    箭头函数在平时开发中用着非常爽,箭头函数有什么特点呢 箭头函数不能够当做构造函数使用 箭头函数没有argument...

  • js学习笔记4(函数)

    1.箭头函数 ES6新增属性。箭头函数特别适合嵌入函数的场景。 箭头函数虽然语法简介,但是很多场合不适用。箭头函数...

  • js理解普通函数和箭头函数

    普通函数: 箭头函数: 区别: 构造函数和原型 箭头函数不能作为构造函数 不能new。会报错 箭头函数没有原型属性...

网友评论

      本文标题:箭头函数

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