浅谈JS中几种轻松处理'this'指向方式


Posted in Javascript onSeptember 16, 2019

我喜欢在JS中更改函数执行上下文的指向,也称为 this 指向。

例如,咱们可以在类数组对象上使用数组方法:

const reduce = Array.prototype.reduce;

function sumArgs() {
 return reduce.call(arguments, (sum, value) => {
  return sum += value;
 });
}

sumArgs(1, 2, 3); // => 6

另一方面,this 很难把握。

咱们经常会发现自己用的 this 指向不正确。下面的教你如何简单地将 this 绑定到所需的值。

在开始之前,我需要一个辅助函数execute(func),它仅执行作为参数提供的函数。

function execute(func) {
 return func();
}

execute(function() { return 10 }); // => 10

现在,继续理解围绕this错误的本质:方法分离。

1.方法分离问题

假设有一个类Person包含字段firstName和lastName。此外,它还有一个方法getFullName(),该方法返回此人的全名。如下所示:

function Person(firstName, lastName) {
 this.firstName = firstName;
 this.lastName = lastName;

 this.getFullName = function() {
  this === agent; // => true
  return `${this.firstName} ${this.lastName}`;
 }
}

const agent = new Person('前端', '小智');
agent.getFullName(); // => '前端 小智'

可以看到Person函数作为构造函数被调用:new Person('前端', '小智')。 函数内部的 this 表示新创建的实例。

getfullname()返回此人的全名:'前端 小智'。正如预期的那样,getFullName()方法内的 this 等于agent。

如果辅助函数执行agent.getFullName方法会发生什么:

execute(agent.getFullName); // => 'undefined undefined'

执行结果不正确:'undefined undefined',这是 this 指向不正确导致的问题。

现在在getFullName() 方法中,this的值是全局对象(浏览器环境中的 window )。 this 等于 window,${window.firstName} ${window.lastName} 执行结果是 'undefined undefined'。

发生这种情况是因为在调用execute(agent.getFullName)时该方法与对象分离。 基本上发生的只是常规函数调用(不是方法调用):

execute(agent.getFullName); // => 'undefined undefined'

// 等价于:

const getFullNameSeparated = agent.getFullName;
execute(getFullNameSeparated); // => 'undefined undefined'

这个就是所谓的方法从它的对象中分离出来,当方法被分离,然后执行时,this 与原始对象没有连接。

为了确保方法内部的this指向正确的对象,必须这样做

  1. 以属性访问器的形式执行方法:agent.getFullName()
  2. 或者静态地将this绑定到包含的对象(使用箭头函数、.bind()方法等)

方法分离问题,以及由此导致this指向不正确,一般会在下面的几种情况中出现:

回调

// `methodHandler()`中的`this`是全局对象
setTimeout(object.handlerMethod, 1000);

在设置事件处理程序时

// React: `methodHandler()`中的`this`是全局对象
<button onClick={object.handlerMethod}>
 Click me
</button>

接着介绍一些有用的方法,即如果方法与对象分离,如何使this指向所需的对象。

2. 关闭上下文

保持this指向类实例的最简单方法是使用一个额外的变量self:

function Person(firstName, lastName) {
 this.firstName = firstName;
 this.lastName = lastName;

 const self = this;

 this.getFullName = function() {
  self === agent; // => true
  return `${self.firstName} ${self.lastName}`;
 }
}

const agent = new Person('前端', '小智');

agent.getFullName();    // => '前端 小智'
execute(agent.getFullName); // => '前端 小智'

getFullName()静态地关闭self变量,有效地对this进行手动绑定。

现在,当调用execute(agent.getFullName)时,一切工作正常,因为getFullName()方法内 this 总是指向正确的值。

3.使用箭头函数

有没有办法在没有附加变量的情况下静态绑定this? 是的,这正是箭头函数的作用。

使用箭头函数重构Person:

function Person(firstName, lastName) {
 this.firstName = firstName;
 this.lastName = lastName;

 this.getFullName = () => `${this.firstName} ${this.lastName}`;
}

const agent = new Person('前端', '小智');

agent.getFullName();    // => '前端 小智'
execute(agent.getFullName); // => '前端 小智'

箭头函数以词法方式绑定this。 简单来说,它使用来自其定义的外部函数this的值。

建议在需要使用外部函数上下文的所有情况下都使用箭头函数。

4. 绑定上下文

现在让咱们更进一步,使用ES6中的类重构Person。

class Person {
 constructor(firstName, lastName) {
  this.firstName = firstName;
  this.lastName = lastName;
 }

 getFullName() {
  return `${this.firstName} ${this.lastName}`;
 }
}

const agent = new Person('前端', '小智');

agent.getFullName();    // => '前端 小智'
execute(agent.getFullName); // => 'undefined undefined'

不幸的是,即使使用新的类语法,execute(agent.getFullName)仍然返回“undefined undefined”。

在类的情况下,使用附加的变量self或箭头函数来修复this的指向是行不通的。

但是有一个涉及bind()方法的技巧,它将方法的上下文绑定到构造函数中:

class Person {
 constructor(firstName, lastName) {
  this.firstName = firstName;
  this.lastName = lastName;

  this.getFullName = this.getFullName.bind(this);
 }

 getFullName() {
  return `${this.firstName} ${this.lastName}`;
 }
}

const agent = new Person('前端', '小智');

agent.getFullName();    // => '前端 小智'
execute(agent.getFullName); // => '前端 小智'

构造函数中的this.getFullName = this.getFullName.bind(this)将方法getFullName()绑定到类实例。

execute(agent.getFullName) 按预期工作,返回'前端 小智'。

5. 胖箭头方法

bind 方式有点太过冗长,咱们可以使用胖箭头的方式:

class Person {
 constructor(firstName, lastName) {
  this.firstName = firstName;
  this.lastName = lastName;
 }

 getFullName = () => {
  return `${this.firstName} ${this.lastName}`;
 }
}

const agent = new Person('前端', '小智');

agent.getFullName();    // => '前端 小智'
execute(agent.getFullName); // => '前端 小智'

胖箭头方法getFullName =() =>{…}绑定到类实例,即使将方法与其对象分离。

这种方法是在类中绑定this的最有效和最简洁的方法。

6. 总结

与对象分离的方法会产生 this 指向不正确问题。静态地绑定this,可以手动使用一个附加变量self来保存正确的上下文对象。然而,更好的替代方法是使用箭头函数,其本质上是为了在词法上绑定this。

在类中,可以使用bind()方法手动绑定构造函数中的类方法。当然如果你不用使用 bind 这种冗长方式,也可以使用简洁方便的胖箭头表示方法。

原文:https://github.com/valentinogagliardi/Little-JavaScript-Book/blob/v1.0.0/manuscript/chapter5.md

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

Javascript 相关文章推荐
JQuery里选择超链接的实现代码
May 22 Javascript
Javascript 浮点运算精度问题分析与解决
Mar 26 Javascript
jQuery中[attribute=value]选择器用法实例
Dec 31 Javascript
浅谈JavaScript正则表达式分组匹配
Apr 10 Javascript
基于javascript实现tab选项卡切换特效调试笔记
Mar 30 Javascript
jquery插件方式实现table查询功能的简单实例
Jun 06 Javascript
jQuery右下角悬浮广告实例
Oct 17 Javascript
bootstrap实现图片自动轮播
Dec 21 Javascript
Swiper实现轮播图效果
Jul 03 Javascript
vue中v-cloak解决刷新或者加载出现闪烁问题(显示变量)
Apr 20 Javascript
vue 中滚动条始终定位在底部的方法
Sep 03 Javascript
layui自定义ajax左侧三级菜单
Jul 26 Javascript
使用xampp将angular项目运行在web服务器的教程
Sep 16 #Javascript
在layui.use 中自定义 function 的正确方法
Sep 16 #Javascript
使用VUE实现在table中文字信息超过5个隐藏鼠标移到时弹窗显示全部
Sep 16 #Javascript
js实现无限瀑布流实例方法
Sep 16 #Javascript
策略模式实现 Vue 动态表单验证的方法
Sep 16 #Javascript
jQuery设置下拉框显示与隐藏效果的方法分析
Sep 15 #jQuery
Vue实现滑动拼图验证码功能
Sep 15 #Javascript
You might like
两种php调用Java对象的方法
2006/10/09 PHP
COM in PHP (winows only)
2006/10/09 PHP
PHP mail 通过Windows的SMTP发送邮件失败的解决方案
2009/05/27 PHP
ThinkPHP应用模式扩展详解
2014/07/16 PHP
PHP中上传文件打印错误错误类型分析
2019/04/14 PHP
PHP设计模式之 策略模式Strategy详解【对象行为型】
2020/05/01 PHP
jquery下div 的resize事件示例代码
2014/03/09 Javascript
js变量提升深入理解
2016/09/16 Javascript
解析预加载显示图片艺术
2016/12/05 Javascript
jquery实现异步加载图片(懒加载图片一种方式)
2017/04/24 jQuery
浅析Angular2子模块以及异步加载
2017/04/24 Javascript
PHP 实现一种多文件上传的方法
2017/09/20 Javascript
vue+vuecli+webpack中使用mockjs模拟后端数据的示例
2017/10/24 Javascript
vue拦截器实现统一token,并兼容IE9验证功能
2018/04/26 Javascript
微信小程序保存多张图片的实现方法
2019/03/05 Javascript
微信小程序实现页面浮动导航
2020/01/08 Javascript
redux处理异步action解决方案
2020/03/22 Javascript
[01:02:07]Liquid vs Newbee 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
python中threading超线程用法实例分析
2015/05/16 Python
python脚本内运行linux命令的方法
2015/07/02 Python
python 计算数组中每个数字出现多少次--“Bucket”桶的思想
2017/12/19 Python
python中sort和sorted排序的实例方法
2019/08/26 Python
Python 实现黑客帝国中的字符雨的示例代码
2020/02/20 Python
详解python第三方库的安装、PyInstaller库、random库
2021/03/03 Python
软件测试工程师结构化面试题库
2016/11/23 面试题
文字自荐书范文
2014/02/10 职场文书
大一工商管理职业生涯规划:有梦最美,行动相随
2014/09/18 职场文书
领导班子党的群众路线对照检查材料
2014/09/25 职场文书
四风问题查摆剖析材料
2014/10/11 职场文书
人民调解协议书范本
2014/10/11 职场文书
老公保证书
2015/01/17 职场文书
2019毕业论文致谢词
2019/06/24 职场文书
导游词之介休绵山
2019/12/31 职场文书
PHP判断是否是json字符串
2021/04/01 PHP
Python基础之字符串格式化详解
2021/04/21 Python
Python采集爬取京东商品信息和评论并存入MySQL
2022/04/12 Python