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 相关文章推荐
11款基于Javascript的文件管理器
Oct 25 Javascript
FF火狐下获取一个元素同类型的相邻元素实现代码
Dec 15 Javascript
js抽奖实现随机抽奖代码效果
Dec 02 Javascript
javascript关于open.window子页面执行完成后刷新父页面的问题分析
Apr 27 Javascript
js基础知识(公有方法、私有方法、特权方法)
Nov 06 Javascript
layer弹出层显示在top顶层的方法
Sep 11 Javascript
微信小程序可滑动周日历组件使用详解
Oct 21 Javascript
vue移动端模态框(可传参)的实现
Nov 20 Javascript
详解vue或uni-app的跨域问题解决方案
Feb 21 Javascript
微信小程序实现上传照片代码实例解析
Aug 04 Javascript
node.js基础知识汇总
Aug 25 Javascript
微信小程序实现左滑删除效果
Nov 18 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
PHP内存缓存Memcached类实例
2014/12/08 PHP
PHP中使用Imagick读取pdf并生成png缩略图实例
2015/01/21 PHP
ThinkPHP中html:list标签用法分析
2016/01/09 PHP
Laravel框架中自定义模板指令总结
2017/12/17 PHP
php微信开发之关注事件
2018/06/14 PHP
Three.js源码阅读笔记(Object3D类)
2012/12/27 Javascript
jQuery.clean使用方法及思路分析
2013/01/07 Javascript
JS中的prototype与面向对象的实例讲解
2013/05/22 Javascript
JavaScript获得url查询参数的方法
2015/07/02 Javascript
JS实现横向与竖向两个选项卡Tab联动的方法
2015/09/27 Javascript
第三篇Bootstrap网格基础
2016/06/21 Javascript
浅谈JavaScript的自动垃圾收集机制
2016/12/15 Javascript
JS对象深度克隆实例分析
2017/03/16 Javascript
Vue.js 插件开发详解
2017/03/29 Javascript
微信小程序自定义toast实现方法详解【附demo源码下载】
2017/11/28 Javascript
为什么说JavaScript预解释是一种毫无节操的机制详析
2018/11/18 Javascript
小程序开发踩坑:页面窗口定位(相对于浏览器定位)(推荐)
2019/04/25 Javascript
Python简单格式化时间的方法【strftime函数】
2016/09/18 Python
详解Python中表达式i += x与i = i + x是否等价
2017/02/08 Python
使用TensorFlow实现二分类的方法示例
2019/02/05 Python
Python-openpyxl表格读取写入的案例详解
2020/11/02 Python
基于CSS3制作立体效果导航菜单
2016/01/12 HTML / CSS
向全球直邮输送天然健康产品:iHerb.com
2020/05/03 全球购物
李开复演讲稿
2014/05/24 职场文书
社区清明节活动总结
2014/07/04 职场文书
学雷锋活动倡议书
2014/08/30 职场文书
党支部三会一课计划
2014/09/24 职场文书
意外死亡赔偿协议书
2014/10/14 职场文书
护士个人年终总结
2015/02/13 职场文书
勇敢的心观后感
2015/06/09 职场文书
《领导干部从政道德启示录》学习心得体会
2016/01/20 职场文书
PyTorch 如何自动计算梯度
2021/05/23 Python
python pygame入门教程
2021/06/01 Python
简单聊聊Vue中的计算属性和属性侦听
2021/10/05 Vue.js
python中字符串String及其常见操作指南(方法、函数)
2022/04/06 Python
Python pyecharts案例超市4年数据可视化分析
2022/08/14 Python