博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
es6 箭头函数【箭头表达式】
阅读量:5870 次
发布时间:2019-06-19

本文共 2329 字,大约阅读时间需要 7 分钟。

箭头函数,通过 => 语法实现的函数简写形式,C#/JAVA8/CoffeeScript 中都有类似语法。与函数不同,箭头函数与其执行下文环境共享同一个 this。如果一个箭头函数出现在一个函数对象内部,它会与这个函数共享 arguments 变量。

箭头表达式用来声明匿名函数,消除传统匿名函数的this指针问题

应用:

var myArray = [1, 2, 3, 4, 5];//挑出来双数console.log(myArray.filter(value => value % 2 == 0));

优势:消除了this关键字的问题

function getStock(name: string) {    this.name = name;    setInterval(() => {        console.log("name is: "+this.name)    }, 1000);}var stock = new getStock("IBM");//name is: IBM

 

1、函数体内的this对象就是定义时所在的对象,而不是使用时所在的对象。

原理:this指向的固定化,并不是因为箭头函数内部有绑定this的机制,实际原因是箭头函数根本没有自己的this,导致内部的this就是外层代码块的this。正因为它没有this,所以也就不能用作构造函数。

例1:

function foo(){    setTimeout(()=>{        console.log("id:",this.id);    },100);}foo.call({id:42}); //id: 42

setTimout的参数是一个箭头函数,100毫秒后执行。如果是普通函数,执行时this应该指向全局对象,

但是箭头函数导致this总是指向函数所在的对象

例2:

var handler={    id:"123456",    init:function(){        document.addEventListener("click",event=>this.doSomething(event.type),false);    },    doSomething:function(type){        console.log("Handling "+type+" for "+this.id);    }}handler.init();//Handling click for 123456

例3:chrome可能还不支持,

function Timer(){    this.seconds=0;    setInterval(()=>this.seconds++,1000);}var timer=new Timer();setTimeout(console.log(timer.seconds),3100);//3

2、箭头函数没有this,没有arguments,没有super,没有new.target

例:箭头函数内部的arguments其实就是foo函数的arguments

function foo(){        setTimeout(()=>{            console.log("args:",arguments);        },100);    }    foo(2,4,6,8);//args: [2, 4, 6, 8]

3、箭头函数不可以当作构造函数。也就是说,不可以使用new命令,否则会抛出一个错误。

4、箭头函数不可以使用arguments对象,该对象在函数体内不存在。如果要用,可以用rest参数代替。

5、箭头函数不可以用yield命令,因此箭头函数不能用作Generator函数。

 

其它例子

// Expression bodiesvar odds = evens.map(v => v + 1);var nums = evens.map((v, i) => v + i);// Statement bodiesnums.forEach(v => {  if (v % 5 === 0)    fives.push(v);});// Lexical thisvar bob = {  _name: "Bob",  _friends: ['jim'],  printFriends() {    this._friends.forEach(f =>      console.log(this._name + " knows " + f)); // Bob knows jim  }};bob.printFriends();// Lexical argumentsfunction square() {  let example = () => {    let numbers = [];    for (let number of arguments) {      numbers.push(number * number);    }    return numbers;  };  return example();}square(2, 4, 7.5, 8, 11.5, 21); // returns: [4, 16, 56.25, 64, 132.25, 441]
View Code

 

More: 

 

本文作者,因知识本身在变化,作者也在不断学习成长,文章内容也不定时更新,为避免误导读者,方便追根溯源,请诸位转载注明出处:有问题欢迎与我讨论,共同进步。

你可能感兴趣的文章
clang 3.9.1 centos 7 编译安装
查看>>
JVM的持久代——何去何从?
查看>>
iOS开发中First Responser,protocol实现的deleagere,通知机制的设计
查看>>
一,撸基础篇系列,JAVA的那些数据结构应用
查看>>
VCRadioButton
查看>>
DSFavIconManager
查看>>
TCTweetComposeViewController
查看>>
eclipse 中修改 M2_REPO的值(转)
查看>>
开源 免费 java CMS - FreeCMS-标签 link
查看>>
FreeCMS视频教程 栏目信息访问权限设置
查看>>
Android硬件抽象层(HAL)深入剖析(二)
查看>>
I2C总线传输协议
查看>>
Git的原理简介和常用命令
查看>>
各种距离(Distance)
查看>>
性格影响命运
查看>>
Mysql Explain分析
查看>>
如何解决基本的 TCP/IP 问题
查看>>
nginx 学习笔记(6) nginx配置文件中的度量单位
查看>>
redis配置
查看>>
GC优化
查看>>