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

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

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

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

(4)不可以使用yield命令,因此箭头函数不能用作Generator函数。

上面四点中,第一点尤其值得注意。this对象的指向是可变的,但是在箭头函数中,它是固定的。

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

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

箭头函数可以让setTimeout里面的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函数内部设置了两个定时器,分别使用了箭头函数和普通函数。前者的this绑定定义时所在的作用域(即Timer函数),后者的this指向运行时所在的作用域(即全局对象)。所以,3100毫秒之后,timer.s1被更新了3次,而timer.s2一次都没更新。

箭头函数可以让this指向固定化,这种特性很有利于封装回调函数。下面是一个例子,DOM事件的回调函数封装在一个对象里面。

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);
}
};

上面代码的init方法中,使用了箭头函数,这导致这个箭头函数里面的this,总是指向handler对象。否则,回调函数运行时,this.doSomething这一行会报错,因为此时this指向document对象。

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

所以,箭头函数转成ES5的代码如下。

// ES6
function foo() {
setTimeout(() => {
console.log('id:', this.id);
}, 100);
} // ES5
function foo() {
var _this = this; setTimeout(function () {
console.log('id:', _this.id);
}, 100);
}

上面代码中,转换后的ES5版本清楚地说明了,箭头函数里面根本没有自己的this,而是引用外层的this

请问下面的代码之中有几个this

function foo() {
return () => {
return () => {
return () => {
console.log('id:', this.id);
};
};
};
} var f = foo.call({id: 1}); var t1 = f.call({id: 2})()(); // id: 1
var t2 = f().call({id: 3})(); // id: 1
var t3 = f()().call({id: 4}); // id: 1

上面代码之中,只有一个this,就是函数foothis,所以t1t2t3都输出同样的结果。因为所有的内层函数都是箭头函数,都没有自己的this,它们的this其实都是最外层foo函数的this

除了this,以下三个变量在箭头函数之中也是不存在的,指向外层函数的对应变量:argumentssupernew.target

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

上面代码中,箭头函数内部的变量arguments,其实是函数fooarguments变量。

另外,由于箭头函数没有自己的this,所以当然也就不能用call()apply()bind()这些方法去改变this的指向。

(function() {
return [
(() => this.x).bind({ x: 'inner' })()
];
}).call({ x: 'outer' });
// ['outer']

上面代码中,箭头函数没有自己的this,所以bind方法无效,内部的this指向外部的this

长期以来,JavaScript语言的this对象一直是一个令人头痛的问题,在对象方法中使用this,必须非常小心。箭头函数”绑定”this,很大程度上解决了这个困扰。

ES6 箭头函数this指向的更多相关文章

  1. ES6 箭头函数 this 指向

    ES6 箭头函数 this 指向 箭头函数有几个使用注意点: 函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象. 不可以当作构造函数,也就是说,不可以使用new命令,否则会抛出一个 ...

  2. ES6 箭头函数this指向问题

    var name = "window"; var person1 = { name: "person1", show1: function() { consol ...

  3. es6箭头函数 this 指向问题

    es5中 this 的指向 var factory = function(){ this.a = 'a'; this.b = 'b'; this.c = { a:'a+', b:function(){ ...

  4. ES6箭头函数this指向

    普通函数中的this: 1. this总是代表它的直接调用者(js的this是执行上下文), 例如 obj.func ,那么func中的this就是obj 2.在默认情况(非严格模式下,未使用 'us ...

  5. ES6箭头函数与this指向

    一.ES6箭头函数 ES6之前的语法想要定义一个函数,如图example1,ES6之后定义一个函数如图example2,相比较之下简洁了很多 二.函数的this指向 非箭头函数,谁调用函数this指向 ...

  6. es6箭头函数讲解

    es6箭头函数的用法 箭头函数是es6的一种函数的简写方法. 如下: var f = v = > v; //等同于 var f = function(v){ return v; } var su ...

  7. ES6 — 箭头函数

    一 为什么要有箭头函数 我们在日常开发中,可能会需要写类似下面的代码 const Person = { 'name': 'little bear', 'age': 18, 'sayHello': fu ...

  8. js this问题和es6箭头函数this问题

    JS中this的四种用法 1.在一般函数方法中使用 this 指代全局对象 function test(){ this.x = 1; alert(this.x); } test(); //1 2.作为 ...

  9. Vue ES6箭头函数使用总结

    Vue ES6箭头函数使用总结   by:授客 QQ:1033553122   箭头函数 ES6允许使用“箭头”(=>)定义函数: 函数不带参数 定义方法:函数名称 = () => 函数体 ...

随机推荐

  1. Stream(Java 8)

    Java 8 中的 Stream 是对集合(Collection)对象功能的增强,它专注于对集合对象进行各种非常便利.高效的聚合操作(aggregate operation),或者大批量数据操作 (b ...

  2. delphi TTcpClient TTcpServer分析(转)

    delphi TTcpClient TTcpServer分析(转) 只描述windows socket部分. sockets.pas中各个类得继承关系: TBaseSocket | --------- ...

  3. Delphi 虚拟桌面

    Delphi创建虚拟桌面实现后台调用外部程序 核心提示:最近在做的一个软件,其中有一部分功能需要调用其它的软件来完成,而那个软件只有可执行文件,根本没有源代码,幸好,我要做的事不难,只需要在我的程序启 ...

  4. windows系统使用

    1.访问局域网共享的文件,用 \\ip号 2.电脑的硬件名称(设备管理器中)是可以用软件修改的. 3.电脑中每一个连接网络的设备都有一个网卡地址(MAC地址),如无线网卡地址.有线网卡地址. 4.wi ...

  5. js分割url提取参数

    //分割url提取参数 var url = Window.location.search;//获取url地址?至结尾的所有参数 //key(需要检错的键) url(传入的需要分割的url地址) fun ...

  6. Bochs调试VirtualBox生成的VDI映像

    将VDI映像转换成Bochs支持的img映像 1: vboxmanage clonehd source.vdi destination.img --format RAW 在bochsrc.txt中引用 ...

  7. Java内存通道

    对文件执行I/O的另一种方法是将文件的一个区域映射到物理内存,并将其作为内存数组.可以使用MappedByteBuffer来执行内存映射文件I/O. 要使用内存映射文件I/O,请为文件获取FileCh ...

  8. 2014 mathtype分块列向量输入 PPT动画制作

    1.mathtype分块列向量的输入 http://zhidao.baidu.com/link?url=pV7TazWe-Ld5qgxNcJCQdRaA8ILEgmXRP211F5U0Cst0xNfU ...

  9. firewall防火墙配置

    获取所有zone firewall-cmd --list-all-zones 重启服务 firewall-cmd --complete-reload 名词解释 在具体介绍zone之前学生先给大家介绍几 ...

  10. centos7简单安装配置mariadb

    CentOS 7下yum安装MariaDB yum install mariadb mariadb-server systemctl start mariadb #启动mariadb systemct ...