美文网首页
ES6箭头函数及this

ES6箭头函数及this

作者: 捡破烂儿的 | 来源:发表于2017-04-11 18:16 被阅读0次

箭头函数是ES6中的新特性,他为我们提供了一种全新的书写函数的方法

箭头函数优化了ES5的函数语法,不需要在写function,如果函数体简单的话甚至可以不用写return

let fun = (x) => x*2;

1、只有一个参数时,括号可以省略
2、没有参数,括号不能省略
3、多个参数不能省略括号

回到主题,箭头函数和this

var a = 100;
var obj = {
    a : 10,
    fun : function(){
        console.log(this.a);
    }
};
obj.fun();  // 10

在ES5中,要想console结果是100的话,通常是var this = that或者bind

var a = 100;
var obj = {
    a : 10,
    fun : function(){
        console.log(this.a);
    }
};
obj.fun.bind(this)();  // 100

接下来用箭头函数试试

var a = 100;
var obj = {
    a : 10,
    fun:()=>{
        console.log(this.a);
    }
}
obj.fun();  // 100

总结:
箭头函数内部没有constructor方法,也没有prototype,所以不支持new操作。
但是它对this的处理与一般的普通函数不一样,箭头函数的 this 始终指向函数定义时的 this,而非执行时
就像上面例子看到的一样,箭头函数没有自己的this,会继承外部的this。

相关文章

  • ES6箭头函数简介

    @(JS技巧)[ES6|箭头函数] ES6箭头函数(Arrow Functions) ES6可以使用“箭头”(=>...

  • es6全家桶(二)—— 箭头函数

    es6全家桶(二)—— rest参数、箭头函数 箭头函数 ES6 允许使用“箭头”(=>)定义函数。 var f ...

  • es6、js、css、jquery、vue以及程序设计 知识点总

    es6 列举常用的es6特性。 箭头函数this的指向。 eg:箭头函数的特性 箭头函数内部没有construc...

  • 箭头函数

    ES6允许使用“箭头”(==>)定义函数。 箭头函数 等同于

  • 学习 ES 6 箭头函数

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

  • JavaScript箭头函数

    ES6新语法箭头函数 箭头函数是ES6新语法,因为语法简单、可读性好,所以使用的也很多。箭头函数也是匿名函数,区别...

  • 关于ES6箭头this的指向问题

    ES6 允许使用 “ 箭头 ” (=>)定义函数。 箭头函数 填 坑。 this的指向是 向上查找 非箭头函数的...

  • ES6箭头函数(Arrow Functions)

    箭头函数是什么?(What) 箭头函数 (Arrow Functions)也称“胖箭头函数”,是ES6全新的特性。...

  • 2019-01-11

    ES6 箭头函数 箭头函数表示法:()=>console.log('Hello') 箭头函数和普通函数的区别 和普...

  • js学习笔记4(函数)

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

网友评论

      本文标题:ES6箭头函数及this

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