这里为什么要使用普通函数

Question

<template>
    <img ref="imgRef">
</template>
<script setup lang="ts">
import { ref, nextTick, watch } from 'vue';
import { GET_TOKEN } from '@/utils/token';
const imgRef = ref<any>();

const $props = defineProps(['url']);

watch(() => $props.url, (n) => {
    console.log(n, '变化了');
    if (n) {
        getImage(n);
    }
}, { immediate: true });

//这里为什么要使用普通函数，假如用箭头函数会提示Cannot access 'getImage' before initializationCannot access 'getImage' before initialization
function getImage(url: string | { [x: string]: any; } | URL) {
    nextTick(() => {

        let request = new XMLHttpRequest();
        request.responseType = 'blob';
        request.open('get', url, true);
        // 添加自定义请求头
        request.setRequestHeader('token', JSON.parse(GET_TOKEN() as string)?.token);
        request.onreadystatechange = e => {
            if (request.readyState == XMLHttpRequest.DONE && request.status == 200) {
                imgRef.value.src = URL.createObjectURL(request.response);
                imgRef.value.onload = () => {
                   imgRef.value && URL.revokeObjectURL(imgRef.value.src);
                }
            }
        };
        request.send(null);
    });
}
</script>

Answer 1

因为 function 在声明时会提升，预解析 js 引擎会把 js 里所有的 var 还有 function 提升到当前作用域的最前面