关于this指向的一些问题

关于this指向的一些问题

以前不是写js的,看了很多资料但是对js的this指向还是很晕。搜索了一下this指向相关的文章,基本思路就是1、无任何调用时this指向windows 2、调用函数时this指向调用当前函数的对象 3、如果是对象链式调用,那么this指向最近一次调用它的对象 4、普通回调函数中的this指向windows 5、如果是以箭头函数作为回调函数,这是this指向回调函数外部作用域的this。

那么按这个说法来讲,judge函数中的this指的就是judger的实例对象。judge函数调用成员变量fenceGroup对象的each方法,那么这时候this不是应该重新指向了fenceGroup了么,为什么这时候在each回调函数里还能用this.findPotainalPath这个方法呢?

因为我查到的很多资料只是说回调函数中的this是回调函数外层作用域的this,并没有提到对象嵌套调用回调函数的问题,所以不是很清楚这个外层作用域是怎么个外层法

正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

2回答
冼星扉 2021-03-08 22:06:01

这是由于this丢失导致的问题,我们打印this显示undefined,式因为小程序默认开启use strict模式导致,如果在非严格模式下,这个this会绑定window/global对象。也就是默认绑定。


这里至少有三种方法解决:

  1. 把this作为参数传入eachCelleachCell(this, cell, x, y)只是不够优雅,而且阅读eachCell源码的时候,如果不知道Judge细节,会觉得莫名其妙

  2. 箭头回调函数方式,就是老师讲的方法。ES6箭头函数的this:ES6中的箭头函数并不会使用四条标准的绑定规则,而是根据当前的词法作用域来决定this,具体来说,箭头函数会继承外层函数调用的this绑定(无论this绑定到什么)。这其实和ES6之前代码中的self = this机制一样。——你不知道的JavaScript(上卷)

  3. bind绑定,又叫做this硬式绑定(绑定后无法修改this)。

constructor(fenceGroup) {
  this.fenceGroup = fenceGroup
  this._initPathDict()
  this._initSkuPending()
  this._changeOtherCellStatus = this._changeOtherCellStatus.bind(this)
}

最后一行,把_changeOtherCellStatus 硬式绑定到this(Judegr 的对象实例),这样哪怕_changeOtherCellStatus作为callback参数,this也不会丢失依旧绑定Judger对象。

  • 我开始也是迷糊,看了你不知道的JavaScript(上卷)关于this部分才逐渐清晰。this这个烧脑的设计说到底也是当时的错误设计。ES6/TypeScript就不会有这样的问题。

    2021-03-08 22:08:47
提问者 Suspendz 2020-02-15 03:20:34

MDN 文档,里面有一句话:“箭头函数不会创建自己的 this,它只会从自己的作用域链的上一层继承 this。"

那这段代码this.fenceGroup.eachCell((cell , x, y) => { this._findPotentialPath(cell,x,y) .......}),回调函数里面没有this所以去上一层找,上一层是fenceGroup对象,按理说this应该指的是这个对象了啊,为什么还能正常调用Judger的_findPotentialPath方法呢,这里挺晕的

问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师