In Vue 3/Nuxt 3, one may occur the error TypeError: Cannot read properties of null (reading 'insertBefore') which has little information and is hard to solve. In the following, we summerize some tips that help you solve this error :1. Change v-if to v-show , or change all v-if , v-else to v-show. Sometimes, the error appears because there are v-if or v-if, v-else pairs.2. Change katex auto-render. The error may appear because you use katex auto-render. To solve this, you could either change katex to mathjax, or change document.body in the auto-render function to a specific area document.getElementById(Id) as follows :<script> var node = document.getElementById(Id) document.addEventListener("DOMContentLoaded", function() { renderMathInElement(node, { // customised options // • auto-render specific keys, e.g.: delimiters: [ {left: '$$', right: '$$', display: true}, {left: '$', right: '$', display: false}, {left: '\\(', right: '\\)', display: false}, {left: '\\[', right: '\\]', display: true} ], // • rendering keys, e.g.: throwOnError : false }); }); </script>If katex render all corresponding symbols in document.body, it may also influence some normal part. So you need to restrict it to a specific area.3. Change your dialog component. If you are using SSR, like Nuxt.js, the error may occur due to your dialog component in the UI library. You could either try to wrap the dialog with ClientOnly <ClientOnly> <Dialog> </Dialog> </ClientOnly>or try to use another UI library.

When running npm run build , an error may occur which looked like :<--- Last few GCs ---> [2656:000001DF58927940] 511573 ms: Mark-sweep 2013.9 (2091.6) -> 2012.7 (2091.4) MB, 1022.4 / 0.0 ms (average mu = 0.211, current mu = 0.009) allocation failure; scavenge might not succeed [2656:000001DF58927940] 513611 ms: Mark-sweep 2028.4 (2091.4) -> 2027.2 (2117.4) MB, 2021.5 / 0.0 ms (average mu = 0.083, current mu = 0.008) allocation failure; scavenge might not succeed <--- JS stacktrace ---> FATAL ERROR: Reached heap limit Allocation failed - JavaScript heap out of memory 1: 00007FF60B131B7F node_api_throw_syntax_error+203775 2: 00007FF60B0B1556 v8::internal::wasm::WasmCode::safepoint_table_offset+63558 3: 00007FF60B0B28C2 v8::internal::wasm::WasmCode::safepoint_table_offset+68530 4: 00007FF60BB547F4 v8::Isolate::ReportExternalAllocationLimitReached+116 5: 00007FF60BB3FB52 v8::Isolate::Exit+674 6: 00007FF60B9C1BBC v8::internal::EmbedderStackStateScope::ExplicitScopeForTesting+124 7: 00007FF60B9BEDDB v8::internal::Heap::CollectGarbage+3963 8: 00007FF60B9D5013 v8::internal::HeapAllocator::AllocateRawWithLightRetrySlowPath+2099 9: 00007FF60B9D58BD v8::internal::HeapAllocator::AllocateRawWithRetryOrFailSlowPath+93 10: 00007FF60B9E50F3 v8::internal::Factory::NewFillerObject+851 11: 00007FF60B6D6825 v8::internal::DateCache::Weekday+1349 12: 00007FF60BBF1E81 v8::internal::SetupIsolateDelegate::SetupHeap+558193 13: 00007FF5AD7902ACTo solve this error, you could try to change your package.json as follows ://package.json "scripts": { "build": "node --max-old-space-size=8192 node_modules/nuxt/bin/nuxt.mjs build", "dev": "nuxt dev", "generate": "nuxt generate", "preview": "nuxt preview", "postinstall": "nuxt prepare" }Or you could set your nuxt.config.ts ://nuxt.config.ts export default defineNuxtConfig({ sourcemap: false })

In Vue.js, we can define an anchor by RouterLink or HTML tag <a> , while in Nuxt.js, we can additionally use NuxtLink which is similar to RouterLink .<a href="#content">My Link</a> <RouterLink to="#content">My Link</RouterLink> <NuxtLink to="#content">My Link</NuxtLink>However, on loading a page, the above ways would change the url which makes it slow to go to #content . To speed up anchor link and not change the url, there are two ways.The first way is to use pure javascript method scrollIntoView to scroll to the specified div id, which is fast and would not change url.function scrollSmoothTo(Id) { var node = document.getElementById(Id); node.scrollIntoView({ behavior: 'smooth' }); } <a @click="scrollSmoothTo('content')"> Scroll to userdiv </a> <RouterLink @click="scrollSmoothTo('content')"> Scroll to userdiv </RouterLink> <NuxtLink @click="scrollSmoothTo('content')"> Scroll to userdiv </NuxtLink> <div id="content"> example </div>Note that adding behavior: 'smooth' can add animation when scrolling. However, using this way, a could not have attribute href, i.e. <a href="#content" @click="scrollSmoothTo('content')" /> <RouterLink href="#content" @click="scrollSmoothTo('content')" /> <NuxtLink href="#content" @click="scrollSmoothTo('content')" />would not perform the click event. This is not SEO friendly.Therefore, the second way is the improvement of the first that is SEO friendly, which can smoothly go to #content without changing the url. We should use Vue's event modifiers for v-on.<a href="#content" @click.native.prevent="scrollSmoothTo('content')"> Scroll to userdiv </a> <div id="content"> example </div>This way, we could prevent the default href action when clicking and perform the scrollSmoothTo function. However, It seems that using RouterLink or NuxtLink in the same way could not prevent the default action, i.e.<RouterLink href="#content" @click.native.prevent="scrollSmoothTo('content')"> Scroll to userdiv </RouterLink> <NuxtLink href="#content" @click.native.prevent="scrollSmoothTo('content')"> Scroll to userdiv </NuxtLink>not work.

In Vue.js, if you simply add multiple whitespaces in a string, it eventually displays a single whitespace.//This will display a single whitespace. 'ab c'If you want to display multiple whitespaces, you could use unicode to represent whitespace.let str1 = 'ab\u00A0\u00A0\u00A0 c'; let str2 = 'ab\u0020\u0020\u0020 c'; let str3 = 'ab\u3000\u3000\u3000 c';These will output multiple whitespaces in strings.

我在JSON parse函数中使用转义引号时，遇到了一个常见的问题。如果存在转义引号，在本例中为“test”，则会导致以下错误'SyntaxError: JSON Parse error: Unterminated string'.var information = JSON.parse('[{"-1":"24","0":"","1":"","2":"","3":"0.0000","4":"","5":"0.00","6":"0.00","7":"1.00","8":"0","9":"false","10":"false","11":[""],"12":"","13":"","14":"test\""}]');JSON Lint验证该JSON为有效的。

什么是JavaScript中的箭头函数（arrow functions）？1. 引言箭头函数（Arrow Functions）是ES6（ECMAScript 2015）引入的一种简洁的函数定义方式。它们不仅在语法上更加简洁，还在行为上与传统的函数表达式有所不同。本文将详细介绍箭头函数的语法、特点、与普通函数的区别，以及使用场景和注意事项。2. 箭头函数的语法2.1 基本语法箭头函数使用=>符号来定义，语法形式如下：(param1, param2, ..., paramN) => { /* function body */ }如果只有一个参数，可以省略括号：param => { /* function body */ }如果函数体只有一个表达式，可以省略大括号和return关键字：(param1, param2) => param1 + param2;2.2 示例// 无参数的箭头函数 const greet = () => { console.log('Hello, World!'); }; // 一个参数的箭头函数 const square = x => x * x; // 多个参数的箭头函数 const add = (a, b) => a + b; // 调用箭头函数 greet(); // 输出: Hello, World! console.log(square(5)); // 输出: 25 console.log(add(2, 3)); // 输出: 53. 箭头函数的特点3.1 简洁的语法箭头函数的语法更为简洁，适合用于编写简短的回调函数和内联函数。减少了函数声明的样板代码，使代码更加简洁明了。3.2 没有this绑定箭头函数不会创建自己的this，它会捕获外部上下文的this值。传统函数的this值是在调用时确定的，而箭头函数的this值是在定义时确定的。function Person() { this.age = 0; setInterval(() => { this.age++; console.log(this.age); }, 1000); } const p = new Person(); // 每秒输出递增的age值在上述示例中，箭头函数内部的this指向Person实例，而不是setInterval的调用者。3.3 不能用作构造函数箭头函数不能用作构造函数，不能使用new关键字调用。如果尝试使用new调用箭头函数，会抛出错误。const Foo = () => {}; const foo = new Foo(); // TypeError: Foo is not a constructor3.4 没有arguments对象箭头函数没有arguments对象，如果需要使用参数，可以使用剩余参数语法...args。const sum = (...args) => args.reduce((acc, val) => acc + val, 0); console.log(sum(1, 2, 3, 4)); // 输出: 103.5 不能使用yield关键字箭头函数不能用作生成器函数，不能使用yield关键字。const generator = () => { yield 1; // SyntaxError: Unexpected number };4. 与普通函数的区别4.1 语法差异箭头函数的语法更加简洁，省略了function关键字，并且在只有一个参数和一个返回值表达式时，可以省略括号和大括号。4.2 this绑定普通函数的this值是在调用时确定的，而箭头函数的this值是在定义时确定的。箭头函数没有自己的this，它会捕获外部上下文的this。4.3 arguments对象普通函数有arguments对象，箭头函数没有。如果需要在箭头函数中访问参数，可以使用剩余参数语法...args。4.4 构造函数普通函数可以用作构造函数，箭头函数不能用作构造函数。4.5 生成器函数普通函数可以用作生成器函数，可以使用yield关键字。箭头函数不能用作生成器函数，不能使用yield关键字。5. 使用场景5.1 简化回调函数箭头函数非常适合用于简化回调函数的写法，特别是在处理数组方法如map、filter和reduce时。const numbers = [1, 2, 3, 4, 5]; const squares = numbers.map(n => n * n); console.log(squares); // 输出: [1, 4, 9, 16, 25]5.2 保留上下文的this在需要保留上下文this的场景中，箭头函数非常有用，比如在事件处理程序和定时器回调中。class Timer { constructor() { this.seconds = 0; setInterval(() => { this.seconds++; console.log(this.seconds); }, 1000); } } const timer = new Timer(); // 每秒输出递增的seconds值5.3 简化内联函数箭头函数可以简化内联函数的写法，使代码更加简洁和易读。const add = (a, b) => a + b; console.log(add(2, 3)); // 输出: 56. 注意事项6.1 避免滥用虽然箭头函数语法简洁，但在一些场景中使用普通函数可能更合适，特别是在需要动态绑定this或使用arguments对象的情况下。6.2 可读性在一些复杂的逻辑中，使用箭头函数可能会影响代码的可读性。在这种情况下，可以考虑使用普通函数来提高代码的清晰度。6.3 兼容性箭头函数是ES6引入的特性，如果需要兼容旧版本的JavaScript环境，可能需要使用Babel等工具进行转译。7. 总结箭头函数（Arrow Functions）是ES6引入的一种简洁的函数定义方式。它们不仅在语法上更加简洁，还在行为上与传统的函数表达式有所不同，特别是在this绑定和arguments对象的处理上。箭头函数非常适合用于简化回调函数、保留上下文this以及内联函数的写法。然而，在一些场景中，使用普通函数可能更合适。通过理解箭头函数的特点和使用场景，开发者可以更好地编写简洁、易读和高效的JavaScript代码。原文链接：https://blog.csdn.net/JHXL_/article/details/140141821

1、定义filter()创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。2、语法array.filter(function(currentValue,index,arr), thisValue);3、参数说明返回4、用法filter() 方法用于把Array中的某些元素过滤掉，然后返回剩下的未被过滤掉的元素。5、注意事项1、filter() 不会对空数组进行检测；2、filter() 不会改变原始数组。6、使用实例1.返回数组array中所有元素都大于等于14的元素、返回等于14、返回大于某个值和小于某个值的元素的元素。const array = [14, 17, 18, 32, 33, 16, 40]; const newArr = array.filter(num => num > 14) console.log(newArr);//打印 [17,18,32,33,16,40] // 查找某个值------------------------- const array = [14, 17, 18, 32, 33, 16, 40]; const newArr = array.filter(num => num == 14) console.log(newArr);//打印 [14] //返回大于某个值和小于某个值的元素 const array = [14, 17, 18, 32, 33, 16, 40]; const newArr = array.filter(num => num > 14 && num < 33) console.log(newArr);//打印 [17, 18, 32, 16]2.数组去重操作：对数组array中所有相同的元素进行去重复操作。const array = [2, 2, 'a', 'a', true, true, 15, 17] const newArr = array.filter((item, i, arr) => { return arr.indexOf(item) === i }) console.log(newArr);//打印 [2, 'a', true, 15, 17] //------------------------------------------------------------------------- const array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 4, 5, 6, 7, 9,] const newArr = array.filter((item, i, arr) => { return arr.indexOf(item) === i }) console.log(newArr);// 打印 [1, 2, 3, 4, 5, 6, 7, 8, 9]3、数组中保留奇数或者偶数。//保留偶数---------------------------------------- const array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] const newArr = array.filter((item, i, arr) => { return item % 2 === 0 }) console.log(newArr);// 打印 [2, 4, 6, 8, 10] //保留奇数---------------------------------------- const array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] const newArr = array.filter((item, i, arr) => { return item % 2 !== 0 }) console.log(newArr);// 打印 [1, 3, 5, 7, 9]4、去掉数组中的假值，比如：空字符串、undefined、null、0、false。const array = [ { id: 3 }, { id: 4 }, { id: null }, { id: undefined }, { id: '' }, { id: 0 }, { id: false } ] const newArr = array.filter(({ id }) => id) console.log(newArr);// 打印 [{ "id": 3 },{ "id": 4 }] //------------------------------------------------------------------- const array = [undefined, null, 3, 5, 'a', false, 0] const newArr = array.filter(item => item) console.log(newArr);// 打印 [3, 5, 'a']5、把对象数组array中的某个属性值取出来存到数组newArr中。const array = [ { name: "a", type: "letter" }, { name: '1', type: "digital" }, { name: 'c', type: "letter" }, { name: '2', type: "digital" }, ]; const newArr = array.filter((item, i, arr) => { return item.type === "letter" }) console.log(newArr); // 打印 [{ "name": "a", "type": "letter" }, { "name": "c", "type":"letter" }]6、filter结合find方法，实现两个数组的补集的解决方法，oldArr的元素newArr中都有，在newArr中去掉所有的oldArr。find() 方法返回数组中满足提供的测试函数的第一个元素的值。这里有四个元素，那么就会返回两个数组元素相等的值，这里取反就返回不相等的值， 不取反的时候因为30的元素不符合，所以不返回30的值。const array = [32, 4, 11, 55, 46, 99, 104, 54, 16, 33, 78, 43, 40] const oldArr = [32, 33, 16, 40, 30] function myfunction() { const result = array.filter(item1 => { //此处取反去掉，将变换元素状态 return !oldArr.find(item2 => { return item1 === item2 }) }) return result } const newArr = myfunction() console.log(newArr); // 取反打印 [4, 11, 55, 46, 99, 104, 54, 78, 43] // 不取反打印 [32, 16, 33, 40] 此处30的元素不符合，所以不返回30的值原文链接：https://blog.csdn.net/a15220216758/article/details/124993673

在Vue项目开发中，有时候我们需要在style标签中使用我们所定义的JS变量来编写CSS。根据官方文档，我们可以使用v-bind来实现这个目的选项式API：<template> <div class="text">hello</div> </template> <script> export default { data() { return { color: 'red' } } } </script> <style> .text { color: v-bind(color); } </style>组合式API：<script setup> import { ref } from 'vue' const theme = ref({ color: 'red', }) </script> <template> <p>hello</p> </template> <style scoped> p { color: v-bind('theme.color'); } </style>还有一个问题，如果我们的变量是数字，但是我们想要设置像素px怎么办？以下以组合式API为例（选项式API方法大同小异），提供两种解决方案。一种是使用 computed 计算属性改变它<script setup> import { computed } from 'vue'; const props = defineProps({ size: Number }); const sizePx = computed(() => `${props.size}px`) </script> <template> <p>hello</p> </template> <style scoped> p { font-size: v-bind(sizePx); } </style>还有一种方式是使用 CSS 计算属性calc<script setup> defineProps({ size: Number }); </script> <template> <p>hello</p> </template> <style scoped> p { font-size: calc(1px * v-bind(size)); } </style>那么如何在代码中使用style属性呢？也很简单，根据官方文档，在style标签中加上module，然后就能通过$style来使用style中的CSS属性。<template> <p :class="$style.red">This should be red</p> </template> <style module> .red { color: red; } </style>还可以给style的module attribute设置不同的名字，从而调用不同style标签中的属性<template> <p :class="classes1.red">This should be red</p> </template> <style module="classes1"> .red { color: red; } </style> <style module="classes2"> .red { color: green; } </style>如果想要在<script setup>中使用，可以使用 useCssModuleimport { useCssModule } from 'vue'; const classes1 = useCssModule('classes1'); const classes2 = useCssModule('classes2');

JS数组去重的方式例：将下面数组去除重复元素（以多种数据类型为例）const arr = [1, 2, 2, 'abc', 'abc', true, true, false, false, undefined, undefined, NaN, NaN]1.利用Set()+Array.from()Set对象：是值的集合，你可以按照插入的顺序迭代它的元素。 Set中的元素只会出现一次，即Set中的元素是唯一的。Array.from() 方法：对一个类似数组或可迭代对象创建一个新的，浅拷贝的数组实例。const result = Array.from(new Set(arr)) console.log(result) // [ 1, 2, 'abc', true, false, undefined, NaN ]注意：以上去方式对NaN和undefined类型去重也是有效的，是因为NaN和undefined都可以被存储在Set中， NaN之间被视为相同的值（尽管在js中：NaN !== NaN）。2.利用两层循环+数组的splice方法通过两层循环对数组元素进行逐一比较，然后通过splice方法来删除重复的元素。此方法对NaN是无法进行去重的，因为进行比较时NaN !== NaN。function removeDuplicate(arr) { let len = arr.length for (let i = 0; i < len; i++) { for (let j = i + 1; j < len; j++) { if (arr[i] === arr[j]) { arr.splice(j, 1) len-- // 减少循环次数提高性能 j-- // 保证j的值自加后不变 } } } return arr } const result = removeDuplicate(arr) console.log(result) // [ 1, 2, 'abc', true, false, undefined, NaN, NaN ]3.利用数组的indexOf方法新建一个空数组，遍历需要去重的数组，将数组元素存入新数组中，存放前判断数组中是否已经含有当前元素，没有则存入。此方法也无法对NaN去重。indexOf() 方法：返回调用它的String对象中第一次出现的指定值的索引，从 fromIndex 处进行搜索。如果未找到该值，则返回 -1。function removeDuplicate(arr) { const newArr = [] arr.forEach(item => { if (newArr.indexOf(item) === -1) { newArr.push(item) } }) return newArr // 返回一个新数组 } const result = removeDuplicate(arr) console.log(result) // [ 1, 2, 'abc', true, false, undefined, NaN, NaN ]4.利用数组的includes方法此方法逻辑与indexOf方法去重异曲同工，只是用includes方法来判断是否包含重复元素。includes()方法：用来判断一个数组是否包含一个指定的值，根据情况，如果包含则返回 true，否则返回 false。function removeDuplicate(arr) { const newArr = [] arr.forEach(item => { if (!newArr.includes(item)) { newArr.push(item) } }) return newArr } const result = removeDuplicate(arr) console.log(result) // [ 1, 2, 'abc', true, false, undefined, NaN ]注意：为什么includes能够检测到数组中包含NaN，其涉及到includes底层的实现。如下图为includes实现的部分代码，在进行判断是否包含某元素时会调用sameValueZero方法进行比较，如果为NaN，则会使用isNaN()进行转化。具体实现可参考：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/includes简单测试includes()对NaN的判断：const testArr = [1, 'a', NaN] console.log(testArr.includes(NaN)) // true5.利用数组的filter()+indexOf()filter方法会对满足条件的元素存放到一个新数组中，结合indexOf方法进行判断。filter() 方法：会创建一个新数组，其包含通过所提供函数实现的测试的所有元素。function removeDuplicate(arr) { return arr.filter((item, index) => { return arr.indexOf(item) === index }) } const result = removeDuplicate(arr) console.log(result) // [ 1, 2, 'abc', true, false, undefined ]注意：这里的输出结果中不包含NaN，是因为indexOf()无法对NaN进行判断，即arr.indexOf(item) === index返回结果为false。测试如下：const testArr = [1, 'a', NaN] console.log(testArr.indexOf(NaN)) // -16.利用Map()Map对象是JavaScript提供的一种数据结构，结构为键值对形式，将数组元素作为map的键存入，然后结合has()和set()方法判断键是否重复。Map 对象：用于保存键值对，并且能够记住键的原始插入顺序。任何值（对象或者原始值）都可以作为一个键或一个值。function removeDuplicate(arr) { const map = new Map() const newArr = [] arr.forEach(item => { if (!map.has(item)) { // has()用于判断map是否包为item的属性值 map.set(item, true) // 使用set()将item设置到map中，并设置其属性值为true newArr.push(item) } }) return newArr } const result = removeDuplicate(arr) console.log(result) // [ 1, 2, 'abc', true, false, undefined, NaN ]注意：使用Map()也可对NaN去重，原因是Map进行判断时认为NaN是与NaN相等的，剩下所有其它的值是根据 === 运算符的结果判断是否相等。7.利用对象其实现思想和Map()是差不多的，主要是利用了对象的属性名不可重复这一特性。function removeDuplicate(arr) { const newArr = [] const obj = {} arr.forEach(item => { if (!obj[item]) { newArr.push(item) obj[item] = true } }) return newArr } const result = removeDuplicate(arr) console.log(result) // [ 1, 2, 'abc', true, false, undefined, NaN ]原文链接：https://blog.csdn.net/qq_52732369/article/details/121877897

1. 认识箭头函数es6 新增了使用胖箭头（=>）语法定义函数表达式的能力，很大程度上，箭头函数实例化的函数对象与正式的函数表达式创建的函数对象行为是相同的。任何可以使用函数表达式的地方，都可以使用箭头函数：// 普通函数 let sum = function(a, b) { return a + b; } // 箭头函数 let sum1 = (a, b) => { return a + b; }箭头函数简洁的语法对开发者来说是十分友好的，从上面的例子可以得知箭头函数的简单用法：(参数) => { 函数体 }2. 箭头函数的一些用法1. 省略包含参数的小括号如果只有一个参数，那也可以不用括号。只有没有参数，或者多个参数的情况下，才需要使用括号：// 有效 let sum = (x) => { return x; }; // 有效 let sum1 = x => { return x; }; // 没有参数需要括号 let sum2 = () => { return 1; }; // 有多个参数需要括号 let sum3 = (a, b) => { return a + b; };2. 省略包含函数体的大括号箭头函数也可以不用大括号，但这样会改变函数的行为。使用大括号就说明包含“函数体”，可以在一个函数中包含多条语句，跟常规的函数一样。省略大括号箭头后面就只能有一行代码；省略大括号会隐式返回这行代码的值；省略大括号不能写return。// 有效 let sum = (a, b) => { return a + b; }; // 有效 let sum1 = (a, b) => a + b; // 相当于 return a + b; // 无效的写法 let sum2 = (a, b) => return a + b;3. 嵌入函数箭头函数简洁的语法非常适合嵌入函数的场景：let arr = [1, 2, 3, 4, 5]; arr.map(val => val * 2); // [2, 4, 6, 8, 10]3. 箭头函数不能使用arguments如果函数是使用箭头语法定义的，那么传给函数的参数将不能使用 arguments 关键字访问：// 普通函数 let sum = function() { return arguments.length; } sum(1, 2, 3); // 3 // 箭头函数 let sum1 = () => { return arguments.length; } sum1(1, 2); // Uncaught ReferenceError: arguments is not defined虽然箭头函数中没有 arguments 对象，但可以在包装函数中把它提供给箭头函数：function foo() { let bar = () => { console.log(arguments.length); } bar(); } foo(5, 5, 5); // 34. 箭头函数中this 指向let num = 11; const obj1 = { num: 22, fn1: function() { let num = 33; const obj2 = { num: 44, fn2: () => { console.log(this.num); } } obj2.fn2(); } } obj1.fn1(); // 22fn2中得到的结果为：22原因箭头函数没有this，箭头函数的this是继承父执行上下文里面的this ，这里箭头函数的执行上下文是函数fn1()，所以它就继承了fn1()的this，obj1调用的fn1，所以fn1的this指向obj1， 所以obj1.num 为 22。注意：简单对象（非函数）是没有执行上下文的！如果fn1也是个箭头函数呢？let num = 11; // const obj1 = { num: 22, fn1: () => { let num = 33; const obj2 = { num: 44, fn2: () => { console.log(this.num); } } obj2.fn2(); } } obj1.fn1();上述结果为undefined，因为fn1也是一个箭头函数，所以它就只能继续向上找也就是window了。那为什么是undefined而不是11呢？这里涉及到var和let声明变量的一个区别：使用 let 在全局作用域中声明的变量不会成为 window 对象的属性，var 声明的变量则会(不过，let 声明仍然是在全局作用域中发生的，相应变量会在页面的生命周期内存续，所以使用window访问会为undefined)：var a = 1; window.a; // 1 let b = 1; window.b; // undefined将let改成var后：var num = 11; // const obj1 = { num: 22, fn1: () => { let num = 33; const obj2 = { num: 44, fn2: () => { console.log(this.num); } } obj2.fn2(); } } obj1.fn1();此时结果为window.num => 11原文链接：https://blog.csdn.net/weixin_45112114/article/details/123358639