美文网首页
箭头函数的用法

箭头函数的用法

作者: 林崎宇 | 来源:发表于2019-01-04 13:30 被阅读0次

箭头函数的使用

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一次都没更新

相关文章

  • 学习 ES 6 箭头函数

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

  • ES6--箭头函数

    箭头函数 解释 箭头函数就是个简写形式的函数表达式,并且它拥有词法作用域的this值。另箭头函数总是匿名的。 用法...

  • ES6 函数的扩展2---箭头函数

    基本用法 ES6允许使用‘箭头’(=>)定义函数`。 等同于 在箭头函数不需要或者需要多个参数 如果箭头函数的代码...

  • 阮一峰ES6学习(二):箭头函数

    基本用法 ES6 允许使用“箭头”(=>)定义函数。 上面的箭头函数等同于: 如果箭头函数不需要参数或需要多个参数...

  • ES6箭头函数

    基本用法ES6 允许使用“箭头”(=>)定义函数。 上面的箭头函数等同于: 如果箭头函数不需要参数或需要多个参数,...

  • 箭头函数

    基本用法ES6 允许使用“箭头”(=>)定义函数。 上面的箭头函数等同于: 如果箭头函数不需要参数或需要多个参数,...

  • 2018-11-05

    箭头函数 基本用法: 如果箭头函数不需要参数或需要多个参数,就使用一个圆括号代表参数部分。 如果箭头函数的代码块部...

  • es6箭头函数

    基本用法 箭头函数的优点 1.箭头函数使表达更简洁 如果只有一条语句,一行就可以表达 2.箭头函数的this的作用...

  • 箭头函数的用法

    语法 使用 var、let、const 定义function 参数2-1. 没有参数:需要写小括号 ' ( ) ...

  • 箭头函数的用法

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

网友评论

      本文标题:箭头函数的用法

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