JavaScript基础之this和箭头函数详析


Posted in Javascript onSeptember 05, 2019

箭头函数不会创建自己的this,它只会从自己的作用域链的上一层继承this。

由于箭头函数没有自己的this指针,通过 call() 或 apply() 方法调用一个函数时,只能传递参数(不能绑定this),他们的第一个参数会被忽略。

前言

阅读下面的内容要先看下《你不知道的javascript(上)》中的第二部分:this和对象原型(里面对于this指向的理论部分主要来源于该书)。

问题

这周在写代码的时候,听同事在说箭头函数无法更改this的指向,并且使用下面代码进行验证:

// (1) 使用箭头函数,this一直指向window
var a = 0
var obj1 = {
  a: 1,
  fn: () => { console.log(this.a) }
}
obj1.fn() // 结果:0

var obj2 = {
  a: 2
}
obj2.fn = obj1.fn
obj2.fn() // 结果:0
// (2)不使用箭头函数,this的指向会更改
var obj3 = {
  a: 3,
  fn: function() { console.log(this.a) }
}
obj3.fn() // 结果:3

第一段代码,无论fn绑定在哪个对象上,this.a始终指向全局的a(在非严格模式下的浏览器中我们可认为是window)

然而,这种说法是有问题(我认为)。

先理解this

this代表什么取决于:

  1. 调用位置
  2. 四种绑定规则
var a = 0
test() // 调用位置在此,通过【默认绑定规则】,可知test的this绑定到了window上
function test() {
  console.log(this) // this是window
  var obj1 = {
    a: 1,
    fn: function() {
      console.log(this) // this是obj1
      console.log(this.a) 
    }
  }
  obj1.fn() // 调用位置在此,通过【隐式绑定规则】,可知fn中的this绑定到了obj1上
  var obj2 = {
    a: 2
  }
  obj2.fn = obj1.fn
  obj2.fn() // 调用位置在此,【隐式绑定规则】,可知fn内的this绑定到了obj2
}

箭头函数中的this

其实这么起标题不太准确(然而想不出好的名字),因为箭头函数是不会创建自己的this的(MDN),那么下面代码的this是来源于哪里的呢?

var obj3 = {
  a: 3,
  fn: () => {
    console.log(this.a)
  }
}
obj3.fn() // 调用位置在此,this指向window
arrowFoo1() // (1)此处是调用位置,使用【默认的绑定规则】,this = window
function arrowFoo1() {
  var obj1 = {
    vv: 'svv1',
    fn: () => {
      console.log(this.vv, 'vv的值是')
    }
  }
  // (2)调用位置是此处,若fn不是箭头函数,那么这里也会有自己的this(即【隐式调用规则】,this绑定为obj1),而fn是箭头函数,则它没有this,那么fn内部调用的this是谁?
  // 这时候需要根据作用域的规则,往外层查找,找到哪里?找到调用obj1.fn的调用栈,即arrowFoo1函数的this,那么从(1)中可知,那个this指向的是window
  obj1.fn()
  var obj2 = {
    vv: 'svv2',
  }
  obj2.fn = obj1.fn
  obj2.fn()
}
function arrowFoo2() {
  var vv = '哦哦哦哦哦'
  console.log(this.vv, 'vv的值是')
}

因此,箭头函数里面要是用到了this,那么其实它是通过作用域链,往外进行查找的,找到了就直接返回咯。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
JavaScript的document对象和window对象详解
Dec 30 Javascript
javascript简易缓动插件(源码打包)
Feb 16 Javascript
JavaScript中Math对象方法使用概述
Jan 02 Javascript
vue,angular,avalon这三种MVVM框架优缺点
Apr 27 Javascript
Bootstrap导航条学习使用(一)
Feb 08 Javascript
jQuery实现遍历复选框的方法示例
Mar 06 Javascript
ReactJs设置css样式的方法
Jun 08 Javascript
JavaScript实现鼠标滚轮控制页面图片切换功能示例
Oct 14 Javascript
layui table 参数设置方法
Aug 14 Javascript
利用chrome浏览器进行js调试并找出元素绑定的点击事件详解
Jan 30 Javascript
es6中let和const的使用方法详解
Feb 24 Javascript
JavaScript中window和document用法详解
Jul 28 Javascript
layer.js open 隐藏滚动条的例子
Sep 05 #Javascript
Layui数据表格跳转到指定页的实现方法
Sep 05 #Javascript
使用easyui从servlet传递json数据到前端页面的两种方法
Sep 05 #Javascript
BootStrap表单验证中的非Submit类型按钮点击时触发验证的坑
Sep 05 #Javascript
利用d3.js制作连线动画图与编辑器的方法实例
Sep 05 #Javascript
javascript之分片上传,断点续传的实际项目实现详解
Sep 05 #Javascript
layui 实现table翻页滚动条位置保持不变的例子
Sep 05 #Javascript
You might like
typecho插件编写教程(二):写一个新插件
2015/05/28 PHP
PHP number_format函数原理及实例解析
2020/07/14 PHP
ExtJS 简介 让你知道extjs是什么
2008/12/29 Javascript
基于jquery的拖动布局插件
2011/11/25 Javascript
javascript一元操作符(递增、递减)使用示例
2013/08/07 Javascript
JS 获取滚动条高度示例代码
2013/10/24 Javascript
js数组中如何随机取出一个值
2014/06/13 Javascript
JavaScript中的parse()方法使用简介
2015/06/12 Javascript
AngularJs表单验证实例详解
2016/05/30 Javascript
JS实现的打字机效果完整实例
2016/06/20 Javascript
jQuery悬停文字提示框插件jquery.tooltipster.js用法示例【附demo源码下载】
2016/07/19 Javascript
轻松实现jquery选项卡切换效果
2016/10/10 Javascript
webpack常用配置项配置文件介绍
2016/11/07 Javascript
jQuery中$.grep() 过滤函数 数组过滤
2016/11/22 Javascript
手动初始化Angular的模块与控制器
2016/12/26 Javascript
vue组件学习教程
2017/09/09 Javascript
小程序实现单选多选功能
2018/11/04 Javascript
webpack + vue 打包生成公共配置文件(域名) 方便动态修改
2019/08/29 Javascript
vue框架中props的typescript用法详解
2020/02/17 Javascript
微信小程序个人中心的列表控件实现代码
2020/04/26 Javascript
[01:00:30]TFT vs VGJ.T Supermajor 败者组 BO3 第一场 6.5
2018/06/06 DOTA
Python中index()和seek()的用法(详解)
2017/04/27 Python
Python3 实现随机生成一组不重复数并按行写入文件
2018/04/09 Python
替换python字典中的key值方法
2018/07/06 Python
对Python通过pypyodbc访问Access数据库的方法详解
2018/10/27 Python
对python自动生成接口测试的示例讲解
2018/11/30 Python
Python实现读取txt文件中的数据并绘制出图形操作示例
2019/02/26 Python
Python实现删除某列中含有空值的行的示例代码
2020/07/20 Python
CSS3属性 line-clamp控制文本行数的使用
2020/03/19 HTML / CSS
外国语学院毕业生自荐信
2013/10/28 职场文书
上班离岗检讨书
2014/01/27 职场文书
大学生实习证明范本
2014/09/19 职场文书
展览会邀请函
2015/02/02 职场文书
2015年骨干教师工作总结
2015/05/26 职场文书
2019年暑期法院实习报告
2019/12/18 职场文书
JS封装cavans多种滤镜组件
2022/02/15 Javascript