深入理解this机制系列第三篇——箭头函数
前面的话
this机制与函数调用有关,而作用域则与函数定义有关。有没有什么是可以将this机制和作用域联系起来的呢?本文将介绍ES6新增的内容——箭头函数
痛点
对于闭包的痛点在于,闭包的this默认绑定到window对象,但又常常需要访问嵌套函数的this,所以常常在嵌套函数中使用var that = this,然后在闭包中使用that替代this,使用作用域查找的方法来找到嵌套函数的this值
var a = 0;
function foo(){
function test(){
console.log(this.a);
}
return test;
};
var obj = {
a : 2,
foo:foo
}
obj.foo()();//0
var a = 0;
function foo(){
var that = this;
function test(){
console.log(that.a);
}
return test;
};
var obj = {
a : 2,
foo:foo
}
obj.foo()();//2
解决
而箭头函数的出现就可以很好的解决该问题。箭头函数根据当前的词法作用域而不是根据this机制顺序来决定this,所以,箭头函数会继承外层函数调用的this绑定,而无论this绑定到什么
var test = () => {
console.log(this.a);
}
//形式上等价于
var test = function(){
console.log(this.a);
}
//实质上等价于
function fn(){
var that = this;
var test = function(){
console.log(that.a);
}
}
var a = 0;
function foo(){
var test = () => {
console.log(this.a);
}
return test;
};
var obj = {
a : 2,
foo:foo
}
obj.foo()();//2
基本用法
ES6允许使用“箭头”(=>)定义函数,一般称为胖箭头
var f = v => v;
console.log(f(1));//1
//等同于
var f = function(v) {
return v;
};
console.log(f(1));//1
如果箭头函数不需要参数或需要多个参数,就使用一个圆括号代表参数部分
var f = () => 5;
// 等同于
var f = function () { return 5 };
var sum = (num1, num2) => num1 num2;
// 等同于
var sum = function(num1, num2) {
return num1 num2;
};
如果箭头函数的代码块部分多于一条语句,就要使用大括号将它们括起来
var sum = (num1, num2) => {
var restult = num1 num2;
return result;
}
由于大括号被解释为代码块,所以如果箭头函数直接返回一个对象,必须在对象外面加上括号
var getTempItem = id => ({ id: id, name: "Temp" });
回调函数
箭头函数最常用于回调函数,如事件处理器或定时器中
function foo() {
setTimeout(() => {
console.log( this.a );
},100);
}
var obj = {
a: 2
};
foo.call( obj ); // 2
//等价于
function foo() {
var that = this;
setTimeout( function(){
console.log( that.a );
}, 100 );
}
var obj = {
a: 2
};
foo.call( obj ); // 2
注意事项
【1】this在箭头函数中被绑定,4种绑定规则中的无论哪种都无法改变其绑定
var a = 0;
function foo(){
var test = () => {
console.log(this.a);
}
return test;
};
var obj1 = {
a : 1,
foo:foo
}
var obj2 = {
a : 2,
foo:foo
}
obj1.foo()();//1
var bar = foo.call(obj1);
//由于上一条语句已经把this绑定到obj1上,且无法修改。所以本条语句call(obj2)无效,返回的值是obj1.a的值1
bar.call(obj2);//1
【2】箭头函数不可以当作构造函数,也就是不可以使用new命令,否则会报错
var foo = () =>{return 1;}
foo();//1
var obj = new foo();//Uncaught TypeError: foo is not a constructor
【3】箭头函数中不存在arguments对象
var foo = () =>{
console.log(arguments);//Uncaught ReferenceError: arguments is not defined
return 1;
}
foo();
最后
虽然箭头函数可以把作用域和this机制联系起来,但是却容易混淆,使代码难以维护。应该在作用域和this机制中二选一,否则它们就真的汇成一锅粥了。或者只使用词法作用域,或者只使用this机制,必要时使用bind()。尽量避免使用that=this和箭头函数
this机制系列介绍完了。最重要的还是第一篇this机制的绑定原则,第二篇this机制的优先级属于要点,而本篇则是拓展部分。如有不妥之处,欢迎交流
以上
更多专业前端知识,请上 【猿2048】www.mk2048.com
深入理解this机制系列第三篇——箭头函数相关推荐
- 深入理解javascript作用域系列第三篇
前面的话 一般认为,javascript代码在执行时是由上到下一行一行执行的.但实际上这并不完全正确,主要是因为声明提升的存在.本文是深入理解javascript作用域系列第三篇--声明提升(hois ...
- javascript面向对象系列第三篇——实现继承的3种形式
前面的话 学习如何创建对象是理解面向对象编程的第一步,第二步是理解继承.开宗明义,继承是指在原有对象的基础上,略作修改,得到一个新的对象.javascript主要包括类式继承.原型继承和拷贝继承这三种 ...
- 深入理解javascript作用域系列第四篇——块作用域
前面的话 尽管函数作用域是最常见的作用域单元,也是现行大多数javascript最普遍的设计方法,但其他类型的作用域单元也是存在的,并且通过使用其他类型的作用域单元甚至可以实现维护起来更加优秀.简洁的 ...
- [深度][PyTorch] DDP系列第三篇:实战与技巧
[深度][PyTorch] DDP系列第三篇:实战与技巧 转自:https://zhuanlan.zhihu.com/p/250471767 零. 概览 想要让你的PyTorch神经网络在多卡环境上跑 ...
- “睡服”面试官系列第十三篇之函数的扩展(建议收藏学习)
目录 1. 函数参数的默认值 1.1基本用法 1.2与解构赋值默认值结合使用 1.3参数默认值的位置 1.4函数的 length 属性 1.5作用域 1.6应用 2. rest 参数 3. 严格模式 ...
- [转]OllyDBG 入门系列(三)-函数参考
标 题: [原创]OllyDBG 入门系列(三)-函数参考 作 者: CCDebuger 时 间: 2006-02-14,23:34 链 接: http://bbs.pediy.com/showthr ...
- JavaScript/ES6 从this开始理解apply() call() bind()、 class 、箭头函数
一 this 关键字 1.1 概念 this 简单来说指的是属性或方法或全局的当前对象,始终会返回一个对象. 在全局上下文的执行环境中,this的值会指向全局变量,在浏览器中则引用windows对象: ...
- 【Windows编程】系列第三篇:文本字符输出
2019独角兽企业重金招聘Python工程师标准>>> 上一篇我们展示了如何使用Windows SDK创建基本控件,本篇来讨论如何输出文本字符. 在使用Win32编程时,我们常常要输 ...
- c语言初阶(第三篇)—函数
来到我们的第三篇,让我们来简单认识一下函数. 目录 1.main函数 2.自定义函数 2.1 函数的的封装和面向过程的思维 3.函数的组成 3.1函数的命名法 3.2函数的返回值 3.21v ...
最新文章
- 我哭了,工业界AI项目落地有多难?
- 做网页需要学哪些计算机知识,网页美工设计需要掌握的电脑常识
- sqlserver select 数值精度_SQL Server读懂语句运行 (二) SET STATISTICS IO ON
- ECharts 联动效果
- 编程体系结构(04):JavaIO流文件管理
- 浅谈Nginx性能调优
- 在32位的linux平台上为Oracle配置1.7GB的SGA
- 自学PL/SQL 第一讲decalring variables
- SFB 项目经验-15-配置会议邀请中企业信息
- c语言产品信息管理课程设计,商品信息管理系统(C语言课程设计).doc
- 博图可以用c语言编程吗,S7300能用C语言编程吗?
- 虚拟机安装的Ubuntu下载速度慢怎么办
- OJ 2315 Problem E	Strawberry
- The word 'jsp' is not correctly spelled. Eclipse 拼写检查出错处理办法
- 如何防止你的爬虫被网管一巴掌拍死
- java createfile,Java Filer.createSourceFile方法代碼示例
- Linux uptime 命令(75)
- 有限元方法入门:有限元方法简单的二维算例(三角形剖分)
- 用爬虫批量采集淘宝宝贝评论
- Altium desiger 使用 功能整理【不定时更新】
热门文章
- 【超级鼠标键盘锁】之实现思路(非驱动实现)
- linux cat 文本颜色,linux文本文件查看、展示命令 :cat head tail grep more less nl
- mysql自定义函数多参数_自定义mysql函数 - 无法传递参数
- atom自动补全html代码,Atom - Emmet插件的使用详解(HTML/CSS代码自动补全)
- 绘制Nine-Patch图片
- linux常用操作符,Shell常用操作符总结
- linux服务器带宽设置,linux 系统查看服务器带宽使用
- [Swift]LeetCode1147. 段式回文 | Longest Chunked Palindrome Decomposition
- pthread vs openMP之我见
- ]remove-duplicates-from-sorted-list-ii (删除)