ES6学习——箭头函数

2019-03-12  本文已影响0人  椰果粒

箭头函数作为函数扩展的一部分,单独拿出来写一篇文章

ES6中的箭头函数,相对于普通函数来说更加简洁,且对this的指向问题进行了改进

箭头函数使用时的注意点:

JS中函数的写法

下面两者等价

var f = v => v;  // 箭头函数
等价:
var g = function(v){  // 普通函数
  return v;
}

注意:普通函数有函数声明和函数表达式两种定义方式
箭头函数只能是表达式的形式
箭头函数是匿名的
如果没有{},不用写return,会自己帮你加上
{}与return是同时存在的

如果箭头函数不需要参数或者需要多个参数,就用()代表参数部分

var f = () => v;
等价于:
var f = function(){
  return v;
}

如果返回多个语句,就用{}来将其括起来,并用return返回

var sum = (num1,num2) => {return num1+num2} 
console.log(sum(1,2));  // 3

这里的{}被解析为代码块,所以如果箭头函数返回一个对象,必须在返回的对象外加一层()

var getTemp = id => ({id : id, name : 'temp'}); // 这是返回一个对象({})

箭头函数和变量解构结合使用

const full = ({first, last}) => first + last

箭头函数与rest参数结合

const numbers = (...nums) => nums;
console.log(numbers(1,2,3,4,5));    // [1, 2, 3, 4, 5]

关于箭头函数this指向问题
示例一:

// 普通函数
function foo1(){
  setTimeout(function(){
    console.log("id:"+this.id)
  },100)
}
var id = 10;
foo1.call({id:20})
// 打印:id是10,因为执行时this指向了全局

// 箭头函数
function foo2(){
  setTimeout(()=>{
    console.log("id:"+this.id)
  })
}
foo2.call({id:30})
// 打印:id是30,因为箭头函数的this在定义的时候就确定了

示例二:

class Animal{
  constructor(){
    this.type = 'animal'
  }
  say(val){
    setTimeout(function(){
      console.log(this);  // 这里的this指向了window
      console.log(this.type + " say " + val)
    },1000)
  }
  drink(val){
    setTimeout(()=>{
      console.log(this)
      console.log(this.type + " drink " + val)
    },2000)
  }
}
var animal = new Animal()
animal.say("hello")
// 普通函数中
// window
// undefined say hello

animal.drink("water")
// 箭头函数中
// Animal({})
// animal drink water

普通函数中,this为什么指向window:因为在JS高程中写 `超时调用的代码都在全局中执行;因此this在非严格模式下指向了window,在严格模式下指向了undefined

箭头函数中,为什么指向Animal构造函数:this指向定义时的对象

上一篇 下一篇

猜你喜欢

热点阅读