5个 JavaScript 怪异行为及其原因

a: 3,

foo: function() {

console.log(this.a);

}

}

var objFoo = obj.foo;

objFoo();

答案为 5。在调用函数时，它内部的 this 指向的是调用对象，例如 obj.foo() this 指向的是 obj 对象。如果在全局调用函数时， this 指向的是全局对象，在浏览器中为 window。objFoo 相当于是在获取了 obj 对象的 foo 方法引用后，在全局进行调用，所以 this 指向的是 window 对象。使用 var 在顶级作用域中定义的变量会添加到 window 中，所以 objFoo() 调用打印的是全局中的 a，即 5。

3、数组长度

---

问题：

const arr = [1, 2, 3, 4];

arr.length = 0;

console.log(arr[0]);

结果为 undefined, 因为 array 的 length 属性同时也能反过来控制数组的元素数量，在给 arr.length 设置为 0 时，arr 就变成了空数组，再访问里边的元素就都是 undefined 了。

4、提升（Hoisting)

---

问题：

function bar() {

return foo;

foo = 10;

function foo() {}

var foo = ‘11’;

}

console.log(typeof bar());

结果为 function。使用 var 声明的变量和使用 funtion 定义的函数会提升到当前作用域的顶部，所以变量可以先赋值，后使用 var 进行声明，而函数则可以先调用后定义。但是要注意的是，使用 var 定义（指在声明的同时进行赋值）的变量，只会提升声明部分，赋值部分不会被提升，例如示例中的 var foo = '11' 会提升 var foo，但 foo = 11 保留在原位。在定义 bar() 函数时，同时会创建一个作用域，提升会把相关变量和函数放到 bar() 函数的第一行。 综合上边的规则，可以知道 foo() 函数和 foo 变量的声明进行了提升，因为 foo 变量与同名，但是只有声明，所以不会覆盖函数的值，foo 仍然指向的是函数。之后就直接使用 return 语句返回了结果，后边的代码就不会再执行了。bar() 中的代码其实是下边这种形式：

function bar() {

function foo() {}

var foo;

return foo;

foo = 10;

var foo = ‘11’;

}

5、作用域与闭包

---

问题：

for(var i = 0; i < 3; i++) {

setTimeout(() => {

console.log(i);

});

}

你可能会认为上方代码的结果为 0 1 2，但实际上是 3 3 3，这是因为使用 var 关键字定义的变量没有块级作用域，在 for 循环中定义的 i 相当于是全局变量，它会添加到 window 变量中，即使在 for 循环退出后也能访问 i 的值。这样就导致了一个问题，使用 setTimeout() 推迟的函数会在 for 循环结束后才执行，此时 i 的值已经变成 3 了，所以 3 个 setTimeout() 中的函数都会打印出 3。要解决这个问题有两种方法。

第 1 种是使用 let 关键字定义变量 i，这样在每次循环时，都会创建一个新的作用域，因此每个作用域中的 i 是相互独立的，这样就能打印出 0 1 2。

第 2 种方法是使用自执行函数，例如下边代码这样：

for(var i = 0; i < 3; i++) {

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）

最后

前端校招精编面试解析大全点击这里免费获取完整版pdf查看

且会持续更新！**

如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）

[外链图片转存中…(img-uQkNw9Ll-1713452375915)]

最后

前端校招精编面试解析大全点击这里免费获取完整版pdf查看