JavaScript箭头函数中的this详解


Posted in Javascript onJune 19, 2019

前言

箭头函数极大地简化了this的取值规则。

普通函数与箭头函数

普通函数指的是用function定义的函数:

var hello = function () {
console.log("Hello, Fundebug!");
}

箭头函数指的是用=>定义的函数:

var hello = () => {
console.log("Hello, Fundebug!");
}

JavaScript箭头函数与普通函数不只是写法上的区别,它们还有一些微妙的不同点,其中一个不同点就是this。

箭头函数没有自己的this值,箭头函数中所使用的this来自于函数作用域链。

这句话很简单,不过听着稍微有点莫名其妙,得从头说起。

this到底是什么?

关于this的文章也够多了,有时候越描越黑,我就不再添乱了,我只负责搬运一下MDN文档:this,感兴趣的可以仔细阅读一下,我摘录一些最重要的话就好了。

A function's this keyword behaves a little differently in JavaScript compared to other languages. It also has some differences between strict mode and non-strict mode.

JavaScript是一门比较奇特的语言,它的this与其他语言不一样,并且它的取值还取决于代码是否为严格模式("use strict")。

this的值是什么?

The JavaScript context object in which the current code is executing.

this就是代码执行时当前的context object。

Global context

In the global execution context (outside of any function), this refers to the global object whether in strict mode or not.

代码没有在任何函数中执行,而是在全局作用域中执行时,this的值就是global对象,对于浏览器来说,this就是window。

这一条规则还是比较容易接受的。

Function context

Inside a function, the value of this depends on how the function is called.

函数中的this值取决于这个函数是怎样被调用的,这一条规则就有点变态了,也是很容易出BUG的地方。

另外,this的值还与函数是否为严格模式("use strict")有关,这就非常的丧心病狂了...

大家如果好奇的话,出门左转看MDN文档,我多说无益,只说明一种简单的情况。

As an object method

When a function is called as a method of an object, its this is set to the object the method is called on.

当函数作为对象的方法被调用时,它的this值就是该对象。

var circle = {
radius: 10,
getRadius() {
console.log(this.radius);
}
};
circle.getRadius(); // 打印 10

self = this?

当我们需要在对象方法中嵌套一个内层函数时,this就会给我们带来实际的困扰了,大家应该写过这样的代码:

// 使用临时变量self
var circle = {
radius: 10,
outerDiameter() {
var self = this;
var innerDiameter = function() {
console.log(2 * self.radius);
};
innerDiameter();
}
};
circle.outerDiameter(); // 打印20

outerDiameter函数是circle对象的方法,因此其this值就是circle对象。

那我们直接写this.radius多好啊,可惜不能这么写,因为内层函数innerDiameter并不会继承外层函数outerDiameter的this值。outerDiameter函数的this值就是circle对象,this.radius等于10。

但是,innerDiameter函数的this值不是circle对象,那它到底是啥?它是innerDiameter函数执行时当前的context object,这个context object又是啥?其实我也晕了,所以不妨测试一下:

// innerDiameter函数中的this是window
var circle = {
radius: 10,
outerDiameter() {
var innerDiameter = function() {
console.log(this === window);
};
innerDiameter();
}
};
circle.outerDiameter(); // 打印true

innerDiameter函数中的this是window,为啥是window这个不去管它,反正不是circle对象。

因此,如果我们直接在innerDiameter函数中使用this的话,就出问题了:

// 使用普通函数
var circle = {
radius: 10,
outerDiameter() {
var innerDiameter = function() {
console.log(2 * this.radius);
};
innerDiameter();
}
};
circle.outerDiameter(); // 打印NaN

于是,我们不得不使用一个临时变量self将外层函数outerDiameter的this值搬运到内层函数innerDiameter。

.bind(this)

我们也可以使用.bind(this)来规避this变来变去的问题:

// 使用.bind(this)
var circle = {
radius: 10,
outerDiameter() {
var innerDiameter = function() {
console.log(2 * this.radius);
};
innerDiameter = innerDiameter.bind(this);
innerDiameter();
}
};
circle.outerDiameter(); // 打印20

但是,无论是使用临时变量self,还是使用.bind(this),都不是什么很简洁的方式。

总之,普通函数的this取值多少有点奇怪,尤其当我们采用面向对象的方式编程时,很多时候都需要用到this,大多数时候我们都不会去使用.bind(this),而是使用临时变量self或者that来搬运this的取值,写起来当然不是很爽,而且一不小心就会写出BUG来。

正如MDN文档所说:

Until arrow functions, every new function defined its own this value based on how the function was called。This proved to be less than ideal with an object-oriented style of programming.

箭头函数

箭头函数的this取值,规则非常简单,因为this在箭头函数中,可以看做一个普通变量。

An arrow function does not have its own this. The this value of the enclosing lexical scope is used; arrow functions follow the normal variable lookup rules.

箭头函数没有自己的this值,箭头函数中所使用的this都是来自函数作用域链,它的取值遵循普通普通变量一样的规则,在函数作用域链中一层一层往上找。

有了箭头函数,我只要遵守下面的规则,this的问题就可以基本上不用管了:

  • 对于需要使用object.method()方式调用的函数,使用普通函数定义,不要使用箭头函数。对象方法中所使用的this值有确定的含义,指的就是object本身。
  • 其他情况下,全部使用箭头函数。
// 使用箭头函数
var circle = {
radius: 10,
outerDiameter() {
var innerDiameter = () => {
console.log(2 * this.radius);
};
innerDiameter();
}
};
circle.outerDiameter(); // 打印20

对于内层函数innerDiameter,它本身并没有this值,其使用的this来自作用域链,来自更高层函数的作用域。innerDiameter的外层函数outerDiameter是普通函数,它是有this值的,它的this值就是circle对象。因此,innerDiameter函数中所使用的this来自outerDiameter函数,其值为circle对象。

结论

JavaScript是Brendan Eich花了10天时间设计出来的,因此各种莫名其妙的特性,this也算是其中一个奇葩。好在这些年ECMAScript标准发展很快也很稳定,每年撸一个新的标准,多少可以弥补一下JS的先天不足。

箭头函数对于this取值规则的简化,其实也就是为了少给大家添乱,谁能记得住普通函数this取值的那么多条条框框啊。。。

另外,MDN文档绝对是一个宝藏,大家可以多看看。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js活用事件触发对象动作
Aug 10 Javascript
jQuery学习笔记(1)--用jQuery实现异步通信(用json传值)具体思路
Apr 08 Javascript
jquery利用ajax调用后台方法实例
Aug 23 Javascript
jquery实现点击页面计算点击次数
Jan 23 Javascript
JavaScript数组合并的多种方法
May 22 Javascript
js实现日历与定时器
Feb 22 Javascript
javascript 正则表达式分组、断言详解
Apr 20 Javascript
gulp教程_从入门到项目中快速上手使用方法
Sep 14 Javascript
vue实现样式之间的切换及vue动态样式的实现方法
Dec 19 Javascript
微信小程序模板(template)使用详解
Jan 31 Javascript
Vue.js样式动态绑定实现小结
Jan 24 Javascript
JavaScript 格式化数字、金额、千分位、保留几位小数、舍入舍去
Jul 23 Javascript
基于Node.js的大文件分片上传示例
Jun 19 #Javascript
详解在Angular4中使用ng2-baidu-map的方法
Jun 19 #Javascript
了解Javascript中函数作为对象的魅力
Jun 19 #Javascript
利用vue-i18n实现多语言切换效果的方法
Jun 19 #Javascript
使用JQuery自动完成插件Auto Complete详解
Jun 18 #jQuery
使用异步controller与jQuery实现卷帘式分页
Jun 18 #jQuery
使用jQuery mobile NuGet让你的网站在移动设备上同样精彩
Jun 18 #jQuery
You might like
PHP对象的浅复制与深复制的实例详解
2017/10/26 PHP
Laravel框架实现简单的学生信息管理平台案例
2019/05/07 PHP
JavaScript中的new的使用方法与注意事项
2007/05/16 Javascript
web的各种前端打印方法之jquery打印插件PrintArea实现网页打印
2013/01/09 Javascript
jquery滚动组件(vticker.js)实现页面动态数据的滚动效果
2013/07/03 Javascript
Array 重排序方法和操作方法的简单实例
2014/01/24 Javascript
JavaScript加入收藏夹功能(兼容IE、firefox、chrome)
2014/05/05 Javascript
javascript实现复选框选中属性
2015/03/25 Javascript
原生JS实现响应式瀑布流布局
2015/04/02 Javascript
js实现div模拟模态对话框展现URL内容
2016/05/27 Javascript
基于jQuery实现表格的查看修改删除
2016/08/01 Javascript
微信小程序wx.request实现后台数据交互功能分析
2017/11/25 Javascript
使用Angular CLI进行单元测试和E2E测试的方法
2018/03/24 Javascript
一个简单的node.js界面实现方法
2018/06/01 Javascript
快速解决处理后台返回json数据格式的问题
2018/08/07 Javascript
js实现提交前对列表数据的增删改查
2020/01/16 Javascript
JS深入学习之数组对象排序操作示例
2020/05/01 Javascript
JS代码简洁方式之函数方法详解
2020/07/28 Javascript
Antd-vue Table组件添加Click事件,实现点击某行数据教程
2020/11/17 Javascript
vue 在服务器端直接修改请求的接口地址
2020/12/19 Vue.js
使用Python的Scrapy框架编写web爬虫的简单示例
2015/04/17 Python
自己使用总结Python程序代码片段
2015/06/02 Python
pycharm设置鼠标悬停查看方法设置
2019/07/29 Python
pytorch 限制GPU使用效率详解(计算效率)
2020/06/27 Python
Python 存取npy格式数据实例
2020/07/01 Python
HTML5新增加标签和功能概述
2016/09/05 HTML / CSS
日本网路线上商品代购服务:转送JAPAN
2016/08/05 全球购物
清明节网上祭英烈活动总结
2014/04/30 职场文书
医院护士见习期自我鉴定
2014/09/15 职场文书
泸县召开党的群众路线教育实践活动总结大会新闻稿
2014/10/21 职场文书
2015安全保卫工作总结
2015/04/25 职场文书
爱心捐款活动总结
2015/05/09 职场文书
python获取对象信息的实例详解
2021/07/07 Python
分享3个非常实用的 Python 模块
2022/03/03 Python
Python 中面向接口编程
2022/05/20 Python
Python 读取千万级数据自动写入 MySQL 数据库
2022/06/28 Python