由于多层函数嵌套引起的this指向问题

LELELE__LE

已于 2024-04-14 11:13:57 修改

阅读量419

点赞数 7

文章标签： javascript

于 2024-04-14 11:12:10 首次发布

本文链接：https://blog.csdn.net/LELELE__LE/article/details/137738797

版权

文章讲述了在使用uniapp开发小程序时，上传头像时遇到的问题，主要原因是嵌套函数中this的丢失。文章提供了两种解决方案：一是使用`that`控制this指向，二是利用ES6的箭头函数保持this的外部作用域。作者花费大量时间找到并解决了这个问题。

摘要由CSDN通过智能技术生成

问题背景简介

写小程序上传头像时，

首先，通过点击事件绑定showActionSheet()方法显示更换头像的弹框，同时使用了uniapp的api

uni.chooseImage（从本地相册选择图片或使用相机拍照。）

由于在给后端传图片时需要转换为base64格式，因此在里面还要调用函数pathToBase64

由于以上的层层嵌套导致，虽然uni.request接口调用成功，但是转换失败，因为现在this.urlPaths已经找不到了（undefined）

问题原因

以上bug出现的原因就是由于

嵌套函数中的this不会从外层函数中继承

例子

举一个简单的栗子

var myObj = {
  myName: "jiale", 
  showThis: function(){
    console.log(this.myName); // 输出啥？
    function bar(){
      console.log(this.myName); // 输出啥？
    }
    bar();
  },
};
myObj.showThis();

答案是：

jiale
undefined

解决方案

方案一

通过that控制this指向

var myObj = {
  myName: "jiale", 
  showThis: function(){
    console.log(this.myName); // 输出啥？
    let that = this;
    function bar(){
      console.log(that.myName); // 输出啥？
    }
    bar();
  },
};
myObj.showThis();

这样就都输出jiale了

方案二

通过ES6的箭头函数

var myObj = {
  myName: "jiale", 
  showThis: function(){
    console.log(this.myName); // 输出啥？
    const bar = () => {
      console.log(this.myName); // 输出啥？
    }
    bar();
  },
};
myObj.showThis();

这样也就都输出jiale了

这是因为箭头函数中的 this 取决于它的外部函数，即谁调用它 this 就继承自谁。