箭头函数的用法

箭头函数的使用

var f = v => 1
console.log(f(1))  // 1

// 上面写法等同于下面

var f = function (v){
    return v
}

上面代码中,箭头函数的参数如果有一个就不用带括号,如果多个参数就得使用括号了。

var f = (v,v1) => [v,v1]
console.log(f(1,2)) // [1,2]

setTimeout(()=>{

},2600)

箭头函数this的指向

var obj = {
    f(){
        setTimeout(()=>{
            console.log(this)
        },20)
    }
};
console.log(obj.f()) // f 

var obj = {
    f:()=>{
        setTimeout(()=>{
            console.log(this)
        },20)
    }
};

console.log(obj.f()) // window

箭头函数在对象的普通函数中指向本函数,箭头函数里面根本没有自己的this，而是引用外层的this,箭头函数不能绑定this。

function Timer() {
  this.s1 = 0;
  this.s2 = 0;
  // 箭头函数
  setInterval(() => this.s1++, 1000);
  // 普通函数
  setInterval(function () {
    this.s2++;
  }, 1000);
}

var timer = new Timer();

setTimeout(() => console.log('s1: ', timer.s1), 3100);
setTimeout(() => console.log('s2: ', timer.s2), 3100);
// s1: 3
// s2: 0

上面代码中,Timer函数内容部设置了两个定时器,一个普通定时器函数,一个箭头定时器函数,箭头函数往上找,找到本函数timer对象,然而普通定时器函数,直接指向window,所以，3100 毫秒之后，timer.s1被更新了 3 次，而timer.s2一次都没更新