ES6的箭头函数详解:

箭头函数是ES6中新增一个函数表达形式,它是对函数的一种简化ES6允许使用“箭头”(=>)定义函数。

Eg:

var f = v => v;

等同于之前

var f = function(v) {

return v;

};

const Even = n => n % 2 == 0;

const Square = n => n * n;

注:

箭头函数就是省略了function

参数集与函数体之间一定要有一个箭头=>

对于参数集而言:

零个参数用 () 表示;

一个参数可以省略 ();

多参数不能省略 ();

Eg:

var f = () => 5;

// 等同于

var f = function () { return 5 };

var sum = (num1, num2) => num1 + num2;

// 等同于

var sum = function(num1, num2) {

return num1 + num2;

};

大括号被解释为代码块,所以如果箭头函数直接返回一个对象,必须在对象外面加上括号。

Eg:

var getTempItem = id => ({ id: id, name: "Temp" });

[1,2,3].map(function (x) {

return x * x;

});

//  [1, 4, 9]

[1,2,3].map(x => x * x);

//[1, 4, 9]

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

const numbers = (...nums) => nums;

numbers(1, 2, 3, 4, 5)

// [1,2,3,4,5]

const haha = (head, ...tail) => [head, tail];

haha(1, 2, 3, 4, 5)

[1, Array[4]]

箭头函数有几个使用注意点。

(1) 箭头函数内部没有constructor方法,也没有prototype,所以不支持new操作。但是它对this的处理与一般的普通函数不一样。箭头函数的 this 始终指向函数定义时的 this,而非执行时。。

function foo() {

setTimeout(() => {

console.log(‘id:‘, this.id);

}, 100);

}

var id = 21;

foo.call({ id: 22 });

// id: 22

setTimeout的参数是一个箭头函数,这个箭头函数的定义生效是在foo函数生成时,而它的真正执行要等到100毫秒后。如果是普通函数,执行时this应该指向全局对象window,这时应该输出21。但是,箭头函数导致this总是指向函数定义生效时所在的对象(本例是{id: 22}),所以输出的是22。

var o = {

x : 1,

func : function() { console.log(this.x) },

test : function() {

setTimeout(function() {

console.log(this);

this.func();

}, 100);

}

};

o.test();

//Window {external: Object, chrome: true, document: document, CNT_SELECT: undefined, jQuery17105021754387381239: Object…}

// this.func is not a function(anonymous function)

出现错误,因为this的指向从o变为了全局(函数调用中的this都是指向全局的)。

var o = {

x : 1,

func : function() { console.log(this.x) },

test : function() {

var _this = this;

setTimeout(function() {

_this.func();

}, 100);

}

};

o.test();

// 1

先保存的this就行了。

var o = {

x : 1,

func : function() { console.log(this.x) },

test : function() {

setTimeout(() => { this.func() }, 100);

}

};

o.test();

// 1

(2)this是不会改变指向对象的

var x = 1,

o = {

x : 10,

test : () => this.x

};

o.test();

// 1

o.test.call(o);

//   1

时间: 2024-11-04 20:33:07

ES6的箭头函数详解:的相关文章

C++ list容器系列功能函数详解

C++ list函数详解 首先说下eclipse工具下怎样debug:方法:你先要设置好断点,然后以Debug方式启动你的应用程序,不要用run的方式,当程序运行到你的断点位置时就会停住,也会提示你进入到Debug视图方式操作,F5是进入到函数或语句块的内部,F6是单步运行,一行一行的走,F7可以跳当前监听函数或语句块F8 会直接跳到下个断点. 下面进入主题: 一.构造.析构函数.= 运算符 1.功能:声明list容器.4种方式 list<int> first;                

php socket函数详解

转自:http://blog.163.com/[email protected]/blog/static/2889641420138213514298/ 最近在用socket实现服务端向客户端主动推送消息函数名 描述socket_accept() 接受一个Socket连接socket_bind() 把socket绑定在一个IP地址和端口上socket_clear_error() 清除socket的错误或最后的错误代码socket_close() 关闭一个socket资源socket_connec

delphi中的Format函数详解

首先看它的声明:[[email protected]][@21ki!] function Format(const Format: string; const Args: array of const): string; overload;[[email protected]][@21ki!] 事实上Format方法有两种形式,另外一种是三个参数的,主要区别在于它是线程安全的,[[email protected]][@21ki!]但并不多用,所以这里只对第一个介绍:[[email protect

c++ 虚函数详解

下面是对C++的虚函数的理解. 一,定义 简单地说,那些被virtual关键字修饰的成员函数,就是虚函数.虚函数的作用,用专业术语来解释就是实现多态性(Polymorphism),多态性是将接口与实现进行分离:用形象的语言来解释就是实现以共同的方法,但因个体差异而采用不同的策略.下面来看一段简单的代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 classA { publi

linux网络编程之shutdown() 与 close()函数详解

linux网络编程之shutdown() 与 close()函数详解 参考TCPIP网络编程和UNP: shutdown函数不能关闭套接字,只能关闭输入和输出流,然后发送EOF,假设套接字为A,那么这个函数会关闭所有和A相关的套接字,包括复制的:而close能直接关闭套接字. 1.close()函数 [cpp] view plain copy print? <span style="font-size:13px;">#include<unistd.h> int 

linux中fork()函数详解[zz]

转载自:http://www.cnblogs.com/york-hust/archive/2012/11/23/2784534.html 一.fork入门知识 一个进程,包括代码.数据和分配给进程的资源.fork()函数通过系统调用创建一个与原来进程几乎完全相同的进程,也就是两个进程可以做完全相同的事,但如果初始参数或者传入的变量不同,两个进程也可以做不同的事. 一个进程调用fork()函数后,系统先给新的进程分配资源,例如存储数据和代码的空间.然后把原来的进程的所有值都复制到新的新进程中,只有

Python内置函数详解

置顶   内置函数详解 https://docs.python.org/3/library/functions.html?highlight=built#ascii 此文参考了别人整理好的东西(地址:http://www.cnblogs.com/sesshoumaru/p/6140987.html#p1),然后结合自己的理解,写下来,一方面方便自己,让自己好好学习,顺便回忆回忆:另一方面,让喜欢的盆友也参考一下. 经查询,3.6版本总共有68个内置函数,主要分类如下: 数学运算(7个) 类型转换

【转载】3D/2D中的D3DXMatrixPerspectiveFovLH和D3DXMatrixOrthoLH投影函数详解

原文:3D/2D中的D3DXMatrixPerspectiveFovLH和D3DXMatrixOrthoLH投影函数详解 3D中z值会影响屏幕坐标系到世界坐标系之间的转换,2D中Z值不会产生影响(而只是屏幕宽高比会产生影响,z值只对深度剔除产生影响).所以U3D中如果用2D摄像机那么屏幕坐标和世界坐标之间的转换需要用指定的2D摄像机才行,如果用主3D摄像机那么UI转换会产生计算结果异常. 一.D3DXMatrixPerspectiveFovLH函数 作用:Builds a left-handed

CreateFile函数详解

CreateFile函数详解 CreateFile The CreateFile function creates or opens the following objects and returns a handle that can be used to accessthe object: files pipes mailslots communications resources disk devices(Windows NT only) consoles directories(open