[译]ES6箭头函数和它的作用域
原文来自我的前端博客:
http://www.hacke2.cn/arrow-functions-and-their-scope/
在ES6很多很棒的新特性中, 箭头函数 (或者大箭头函数)就是其中值得关注的一个! 它不仅仅是很棒很酷, 它很好的利用了作用域, 快捷方便的在现在使用以前我们用的技术, 减少了很多代码……但是如果你不了解箭头函数原理的话可能就有点难以理解. 所以,让我们来看下箭头函数, 就是现在!
执行环境
你可以自己去学习和尝试下, 你可以简单的把示例程序代码复制到你的浏览器控制台下. 现在, 推荐使用Firefox(22+)开发者工具, Firefox(22+)开发者工具现在支持箭头函数,你也可以使用谷歌浏览器. 如果你使用谷歌浏览器, 你必须要做下列两件事: - - 在谷歌浏览器中地址栏中输入:”about:flags”, 找到 “使用体验性Javascript”选项,开启使用。 - - 在函数的开头加上”use strict”,然后再在你的谷歌浏览中测试箭头函数吧(提示:请用谷歌浏览器v38,我当时就是被浏览器版本坑了):
(function(){
"use strict";
// use arrow functions here
}());
幸运的是后面会有越来越多的浏览器支持ES6特性. 现在你完成了所有准备工作, 让我们继续深入它吧!
一个新话题
最近大家在讨论关于ES6的一个话题:关于箭头函数, 像这样:
=>
新的语法
随着讨论产生了一个新的语法:
param => expression
新增的语法是作用在变量上, 可以在表达式中申明多个变量, 下面是箭头函数的使用模式:
// 一个参数对应一个表达式
param => expression;// 例如 x => x+2; // 多个参数对应一个表达式
(param [, param]) => expression; //例如 (x,y) => (x + y); // 一个参数对应多个表示式
param => {statements;} //例如 x = > { x++; return x;}; // 多个参数对应多个表达式
([param] [, param]) => {statements} // 例如 (x,y) => { x++;y++;return x*y;}; //表达式里没有参数
() => expression; //例如var flag = (() => 2)(); flag等于2 () => {statements;} //例如 var flag = (() => {return 1;})(); flag就等于1 //传入一个表达式,返回一个对象
([param]) => ({ key: value });
//例如 var fuc = (x) => ({key:x})
var object = fuc(1);
alert(object);//{key:1}
箭头函数是怎么实现的
我们可以把一个普通函数转换成用箭头函数来实现:
// 当前函数
var func = function (param) {
return param.split(" ");
}
// 利用箭头函数实现
var func = param => param.split(" ");
从上面的例子中我们可以看出箭头函数的语法实际上是返回了一个新的函数, 这个函数有函数体和参数
因此, 我们可以这样调用刚才我们创建的函数:
func("Felipe Moura"); // returns ["Felipe", "Moura"]
立即执行函数(IIFE)
你能在立即执行函数里使用箭头函数,例如:
( x => x * 2 )( 3 ); //
这行代码产生了一个临时函数,这个函数有一个形参x
,函数的返回值为x*2
,之后系统会马上执行这个临时函数, 将3
赋值给形参x
.
下面的例子描述了临时函数体里有多行代码的情况:
( (x, y) => {
x = x * 2;
return x + y;
})( 3, "A" ); // "6A"
相关思考
思考下面的函数:
var func = x => {
return x++;
};
我们列出了一些常见的问题:
- 箭头函数创建的临时函数的arguments
是我们预料的那样工作
console.log(arguments);
- typeof
和instanceof
函数也能正常检查临时函数
func instanceof Function; // true
typeof func; // function
func.constructor == Function; // true
- 把箭头函数放在括号内是无效的
// 有效的常规语法
(function (x, y){
x= x * 2;
return x + y;
} (3, "B") ); // 无效的箭头函数语法
( (x, y) => {
x= x * 2;
return x + y;
} ( 3, "A" ) ); // 但是可以这样写就是有效的了:
( (x,y) => {
x= x * 2;return x + y;
} )( 3,"A" );//立即执行函数
- 尽管箭头函数会产生一个临时函数,但是这个临时函数不是一个构造函数
var instance= new func(); // TypeError: func is not a constructor
- 同样也没有原型对象
func.prototype; // undefined
作用域
这个箭头函数的作用域和其他函数有一些不同,如果不是严格模式,this
关键字就是指向window
,严格模式就是undefined
,在构造函数里的this
指向的是当前对象实例,如果this在一个对象的函数内则this
指向的是这个对象,this
有可能指向的是一个dom元素
,例如当我们添加事件监听函数时,可能这个this
的指向不是很直接,其实this
(不止是this
变量)变量的指向是根据一个规则来判断的:作用域流。下面我将演示this
在事件监听函数和在对象函数内出现的情况:
在事件监听函数中:
document.body.addEventListener('click', function(evt){
console.log(this); // the HTMLBodyElement itself
});
在构造函数里:
function Person () { let fullName = null; this.getName = function () {
return fullName;
}; this.setName = function (name) {
fullName = name;
return this;
};
} let jon = new Person();
jon.setName("Jon Doe");
console.log(jon.getName()); // "Jon Doe"
//注:this关键字这里就不解释了,大家自己google,badu吧。
在这个例子中,如果我们让Person.setName函数返回Person对象本身,我们就可以这样用:
jon.setName("Jon Doe")
.getName(); // "Jon Doe"
在一个对象里:
let obj = {
foo: "bar",
getIt: function () {
return this.foo;
}
}; console.log( obj.getIt() ); // "bar"
但是当执行流(比如使用了setTimeout)和作用域变了的时候,this也会变。
function Student(data){ this.name = data.name || "Jon Doe";
this.age = data.age>=0 ? data.age : -1; this.getInfo = function () {
return this.name + ", " + this.age;
}; this.sayHi = function () {
window.setTimeout( function () {
console.log( this );
}, 100 );
} } let mary = new Student({
name: "Mary Lou",
age: 13
}); console.log( mary.getInfo() ); // "Mary Lou, 13"
mary.sayHi();
// window
当setTimeout
函数改变了执行流的情况时,this
的指向会变成全局对象,或者是在严格模式下就是undefine
,这样在setTimeout
函数里面我们使用其他的变量去指向this
对象,比如self
,that
,当然不管你用什么变量,你首先应该在setTimeout访问之前,给self
,that
赋值,或者使用bind
方法不然这些变量就是undefined。
这是后就是箭头函数登场的时候了,它可以保持作用域,this的指向就不会变了。
让我们看下上文起先的例子,在这里我们使用箭头函数:
function Student(data){ this.name = data.name || "Jon Doe";
this.age = data.age>=0 ? data.age : -1; this.getInfo = function () {
return this.name + ", " + this.age;
}; this.sayHi = function () {
window.setTimeout( ()=>{
// the only difference is here
console.log( this );
}, 100 );
} } let mary = new Student({
name: "Mary Lou",
age: 13
}); console.log( mary.getInfo() ); // "Mary Lou, 13"
mary.sayHi();
// Object { name: "Mary Lou", age: 13, ... }
分析:在sayHi函数中,我们使用了箭头函数,当前作用域是在student对象的一个方法中,箭头函数生成的临时函数的作用域也就是student对象的sayHi函数的作用域。所以即使我们在setTimeout调用了箭头函数生成的临时函数,这个临时函数中的this也是正确的指向。
有趣和有用的使用
创建一个函数很容易,我们可以利用它可以保持作用域的特征:
例如我们可以这么使用:Array.forEach()
var arr = ['a', 'e', 'i', 'o', 'u'];
arr.forEach(vowel => {
console.log(vowel);
});
分析:在forEach里箭头函数会创建并返回一个临时函数 tempFun,这个tempFun你可以想象成这样的:function(vowel){ console.log(vowel);}但是Array.forEach函数会怎么去处理传入的tempFunc呢?在forEach函数里会这样调用它:tempFunc.call(this,value);所有我们看到函数的正确执行效果。
map里使用箭头函数,这里我就不分析函数执行过程了。。。。
var arr = ['a', 'e', 'i', 'o', 'u'];
arr.map(vowel => {
return vowel.toUpperCase();
});
// [ "A", "E", "I", "O", "U" ]
费布拉奇数列
var factorial = (n) => {
if(n==0) {
return 1;
}
return (n * factorial (n-1) );
} factorial(6); //
我们也可以用在Array.sort方法里:
let arr = ['a', 'e', 'i', 'o', 'u'];
arr.sort( (a, b)=> a < b? 1: -1 );
也可以在事件监听函数里使用:
document.body.addEventListener('click', event=>console.log(event, this)); // EventObject, BodyElement
推荐的链接
下面列出了一系列有用的链接,大家可以去看一看
- - Arrow Functions in MDN Documentation
- - TC39 Wiki about Arrow Function
- - ESNext
- - ES6 Tools
- - Grunt ES6 Transpiler
- - ES6 Fiddle
- - ES6 Compatibility Table
总结
尽管大家可能会认为使用箭头函数会降低你代码的可读性,但是由于它对作用域的特殊处理,它能让我们能很好的处理this的指向问题。箭头函数加上let关键字的使用,将会让我们javascript代码上一个层次!尽量多使用箭头函数,你可以再你的浏览器测试你写的箭头函数代码,大家可以再评论区留下你对箭头函数的想法和使用方案!我希望大家能享受这篇文章,就像你会不就的将来享受箭头函数带给你的快乐.
[译]ES6箭头函数和它的作用域的更多相关文章
- ES6箭头函数和它的作用域
原文来自我的前端博客: http://www.hacke2.cn/arrow-functions-and-their-scope/ http://es6rocks.com/2014/10/arrow- ...
- es6箭头函数 this 指向问题
es5中 this 的指向 var factory = function(){ this.a = 'a'; this.b = 'b'; this.c = { a:'a+', b:function(){ ...
- ES6 — 箭头函数
一 为什么要有箭头函数 我们在日常开发中,可能会需要写类似下面的代码 const Person = { 'name': 'little bear', 'age': 18, 'sayHello': fu ...
- ES6 箭头函数 this 指向
ES6 箭头函数 this 指向 箭头函数有几个使用注意点: 函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象. 不可以当作构造函数,也就是说,不可以使用new命令,否则会抛出一个 ...
- ES6箭头函数总结
1. 箭头函数基本形式 let func = (num) => num; let func = () => num; let sum = (num1,num2) => num1 + ...
- ES6 箭头函数下的this指向和普通函数的this对比
首先在网上摘抄借鉴了一段代码, 然后再这段代码里面进行分析,通过比较ES6的箭头函数和普通函数的this指指向, 分析其中的不同之处.下面就是代码片段var name = "window&q ...
- ES6 箭头函数你正确使用了吗
ES6 箭头函数你正确使用了吗 博客说明 文章所涉及的资料来自互联网整理和个人总结,意在于个人学习和经验汇总,如有什么地方侵权,请联系本人删除,谢谢! 说明 在ES6中允许使用"箭头&quo ...
- es6箭头函数讲解
es6箭头函数的用法 箭头函数是es6的一种函数的简写方法. 如下: var f = v = > v; //等同于 var f = function(v){ return v; } var su ...
- 前端分享----JS异步编程+ES6箭头函数
前端分享----JS异步编程+ES6箭头函数 ##概述Javascript语言的执行环境是"单线程"(single thread).所谓"单线程",就是指一次只 ...
随机推荐
- bzoj1724: [Usaco2006 Nov]Fence Repair 切割木板
#include <iostream> #include <cstdio> #include <cstring> #include <algorithm> ...
- IRC(Internet Relay Chat Protocol) Protocal Learning && IRC Bot
catalogue . Abstract . INTRODUCTION . 通信协议Connection Registration Action . 通信协议Channel operations Ac ...
- Linux UserSpace Back-Door、Rootkit SSH/PAM Backdoor Attack And Defensive Tchnology
catalog . 引言 . Pam后门 . SSH后门 . Hijacking SSH . Hijacking SSH By Setup A Tunnel Which Allows Multiple ...
- lua中的table、stack和registery
ok,前面准备给一个dll写wrapper,写了篇日志,看似写的比较明白了,但是其实有很多米有弄明白的.比如PIL中使用的element,key,tname,field这些,还是比较容易混淆的.今天正 ...
- cookielib和urllib2模块相结合模拟网站登录
1.cookielib模块 cookielib模块的主要作用是提供可存储cookie的对象,以便于与urllib2模块配合使用来访问Internet资源.例如可以利用 本模块的CookieJar类的对 ...
- 我所了解的JavaScript糟粕和鸡肋
糟粕 全局变量 众所周知,全局变量在很小的程序中可能会带来方便,但随着程序变得越来大,全局变量将难以处理,全局变量将降低程序的可靠性. 在js中有3种方式定义全局变量 脱离任何函数安排一个var语句 ...
- Tarjan_LCA
貌似求LCA使用倍增已经可以应付掉大多数需要LCA的题了.. 但是有些时候$O(MlogN)$的复杂度就不可接受了 Tarjan_LCA对于每个询问采用离线处理 总复杂度为$O(M+N)$ 这个复杂度 ...
- css3之自定义字体
使用@font-face自定义字体 我们在浏览国外的一些个人网站时,总是可以发现一些非常个性的字体,比如
- python 培训之Django
1.Install sudo apt-get install python-pip sudo pip install django==1.8 2. Create Project django- ...
- Python中的__init__和__new__介绍
介绍 首先我们要知道在面向对象编程中,实例化基本遵循创建实例对象.初始化实例对象.最后返回实例对象这么一个过程. Python 中的 __new__ 方法负责创建一个实例对象,__init__ 方法负 ...