阿里前端一面必会面试题合集

最新推荐文章于 2024-06-28 13:00:49 发布

loveX001

最新推荐文章于 2024-06-28 13:00:49 发布

阅读量466

点赞数 1

文章标签：前端框架 javascript

本文链接：https://blog.csdn.net/loveX001/article/details/126801869

版权

这篇博客汇总了阿里前端面试中常见的一系列问题，涵盖DOM和BOM的基本概念，JavaScript代码输出解析，动画优化策略，回流与重绘的原理，以及函数柯里化等技术点。还讨论了箭头函数的特点，并介绍了PWA（渐进式 web 应用）中的serviceWorker工作原理。文章通过实际代码示例深入浅出地解析了前端开发中的关键知识点。

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

什么是 DOM 和 BOM？

DOM 指的是文档对象模型，它指的是把文档当做一个对象，这个对象主要定义了处理网页内容的方法和接口。
BOM 指的是浏览器对象模型，它指的是把浏览器当做一个对象来对待，这个对象主要定义了与浏览器进行交互的法和接口。BOM的核心是 window，而 window 对象具有双重角色，它既是通过 js 访问浏览器窗口的一个接口，又是一个 Global（全局）对象。这意味着在网页中定义的任何对象，变量和函数，都作为全局对象的一个属性或者方法存在。window 对象含有 location 对象、navigator 对象、screen 对象等子对象，并且 DOM 的最根本的对象 document 对象也是 BOM 的 window 对象的子对象。

代码输出结果

var myObject = {
   
    foo: "bar",
    func: function() {
   
        var self = this;
        console.log(this.foo);  
        console.log(self.foo);  
        (function() {
   
            console.log(this.foo);  
            console.log(self.foo);  
        }());
    }
};
myObject.func();

输出结果：bar bar undefined bar

解析：

首先func是由myObject调用的，this指向myObject。又因为var self = this;所以self指向myObject。
这个立即执行匿名函数表达式是由window调用的，this指向window 。立即执行匿名函数的作用域处于myObject.func的作用域中，在这个作用域找不到self变量，沿着作用域链向上查找self变量，找到了指向 myObject对象的self。

代码输出结果

const p1 = new Promise((resolve) => {
   
  setTimeout(() => {
   
    resolve('resolve3');
    console.log('timer1')
  }, 0)
  resolve('resovle1');
  resolve('resolve2');
}).then(res => {
   
  console.log(res)  // resolve1
  setTimeout(() => {
   
    console.log(p1)
  }, 1000)
}).finally(res => {
   
  console.log('finally', res)
})

执行结果为如下：

resolve1
finally  undefined
timer1
Promise{
   <resolved>: undefined}

需要注意的是最后一个定时器打印出的p1其实是.finally的返回值，我们知道.finally的返回值如果在没有抛出错误的情况下默认会是上一个Promise的返回值，而这道题中.finally上一个Promise是.then()，但是这个.then()并没有返回值，所以p1打印出来的Promise的值会是undefined，如果在定时器的下面加上一个return 1，则值就会变成1。

代码输出结果

// a
function Foo () {
   
 getName = function () {
   
   console.log(1);
 }
 return this;
}
// b
Foo.getName = function () {
   
 console.log(2);
}
// c
Foo.prototype.getName = function () {
   
 console.log(3);
}
// d
var getName = function () {
   
 console.log(4);
}
// e
function getName () {
   
 console.log(5);
}

Foo.getName();           // 2
getName();               // 4
Foo().getName