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

本文共 2379 字,大约阅读时间需要 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: 

 

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

转载于:https://www.cnblogs.com/starof/p/6950083.html

你可能感兴趣的文章
Java的时间空间复杂度详解
查看>>
有效防止SQL注入漏洞
查看>>
Linux chown命令
查看>>
十、I/O流——4-输入、输出流体系
查看>>
十二、网络编程——4-基于UDP协议的网络编程
查看>>
异常处理与调试6 - 零基础入门学习Delphi55(完)
查看>>
if语句三种形式
查看>>
正则表达式之字符串验证
查看>>
codeblocks如何支持_tmain?可移植代码的编码推荐
查看>>
省市联动 填坑
查看>>
canvas写的一个小时钟demo
查看>>
原来今天是冬至
查看>>
又混了一天班
查看>>
九度oj 1006
查看>>
HDU6400-2018ACM暑假多校联合训练1004-Parentheses Matrix-构造
查看>>
最短路问题专题
查看>>
《Redis复制与可扩展集群搭建》看后感
查看>>
Jquery Mobile总结
查看>>
223. Rectangle Area
查看>>
spring boot + velocity中文乱码解决方式
查看>>