Web前端最全（立下flag）每日10道前端面试题-12 关于BOM十问，快速前端开发

文末

篇幅有限没有列举更多的前端面试题，小编把整理的前端大厂面试题PDF分享出来，一共有269页

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

4. location： 对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。

一些实例:

location.hostname 返回 web 主机的域名

location.pathname 返回当前页面的路径和文件名

location.port 返回 web 主机的端口 （80 或 443）

location.protocol 返回所使用的 web 协议（http: 或 https:）

location.assign(url) ： 加载 URL 指定的新的 HTML 文档。 就相当于一个链接，跳转到指定的url，当前页面会转为新页面内容，可以点击后退返回上一个页面。

location.replace(url) ： 通过加载 URL 指定的文档来替换当前文档 ，这个方法是替换当前窗口页面，前后两个页面共用一个窗口，所以是没有后退返回上一页的

5. history 对象包含浏览器的历史。

history.go(0); // go() 里面的参数为0,表示刷新页面

history.go(-1); // go() 里面的参数表示跳转页面的个数 例如 history.go(-1) 表示后退一个页面

history.go(1); // go() 里面的参数表示跳转页面的个数 例如 history.go(1) 表示前进一个页面

history.back() //方法加载历史列表中的前一个 URL。

history.forward() //方法加载历史列表中的下一个 URL。

第二问：以下代码都会输出什么呢？

---

var age = 29;

window.color = “red”;

delete window.age;

delete window.color;

alert(window.name)

alert(window.age)

alert(window.color)

答案：

var age = 29;

window.color = “red”;

// 在IE<9时抛出错误，在其他所有浏览器中都返回false

delete window.age;

// 在IE<9时抛出错误，在其他所有浏览器中都返回true

delete window.color;

alert(window.name) // ‘’

alert(window.age) //29

alert(window.color) //undefined

使用var语句添加的window属性有一个名为[[configurable]]的特性，这个特性的值被设置为false，因此这样定义的属性不可以通过delete操作符删除.

window对象中本身就有个name属性，window.name 表示当前window的名称

age没被删除，所以输出29，而color被删除了。

第三问：你知道间接调用和超时调用吗？

---

javascript是单线程语言，但它允许通过设置超时值setTimeout和间歇时间值setInterval来调度代码在特定的时刻执行。前者是在指定的时间过后执行代码，而后者则是每隔指定的时间就执行一次代码。

1. 超时调用使用window对象的setTimeout()方法，它接受两个参数：要执行的代码 和 以毫秒表示的时间。第一个参数可以是包含javascript语句的字符串（不推荐使用），也可以是函数。调用setTimeout()之后，该方法会返回一个数值ID，表示超时调用。

// 推荐

setTimeout(function(){

alert(“Hello”);

},1000);

// 不推荐

setTimeout(“alert(‘Hello’)”,1000);

2. 间歇调用与超时调用类似，只不过它会按照指定的时间间隔重复执行代码，直至间歇调用被取消或者页面被卸载。设置间歇调用的方法是setInterval()，它会接受的参数与setTimeout()相同：因为在不加干涉的情况下，间歇调用将会一直执行到页面卸载。（ps:建议少用setInterval（），可以用setIimeout（）代替）

第四问 你刚刚说建议少用setInterval（），可以用setIimeout（）代替，为什么呢？

---

对于这道题，要有 事件循环机制的只是储备，建议先看看：这一次，彻底弄懂 JavaScript 执行机制（别还不知道什么是宏任务，什么是微任务）

之所以说要替换，是因为setInterval的缺点

再次强调，定时器指定的时间间隔，表示的是何时将定时器的代码添加到消息队列，而不是何时执行代码。所以真正何时执行代码的时间是不能保证的，取决于何时被主线程的事件循环取到，并执行。

setInterval(function, N)

//即：每隔N秒把function事件推到消息队列中

上图可见，setInterval每隔100ms往队列中添加一个事件；100ms后，添加T1定时器代码至队列中，主线程中还有任务在执行，所以等待，some event执行结束后执行T1定时器代码；又过了100ms，T2定时器被添加到队列中，主线程还在执行T1代码，所以等待；又过了100ms，理论上又要往队列里推一个定时器代码，但由于此时T2还在队列中，所以T3不会被添加，结果就是此时被跳过；这里我们还可以看到，T1定时器执行结束后马上执行了T2代码，所以并没有达到定时器的效果。

综上所述，setInterval有两个缺点：

• 使用setInterval时，某些间隔会被跳过；

• 可能多个定时器会连续执行；

可以这么理解：每个setTimeout产生的任务会直接push到任务队列中；而setInterval在每次把任务push到任务队列前，都要进行一下判断(看上次的任务是否仍在队列中)。

因而我们一般用setTimeout模拟setInterval，来规避掉上面的缺点。

第五问：既然如此那该怎么用setTimeout模拟setInterval呢

---

setTimeout模拟setInterval，也可理解为链式的setTimeout。

web浏览器中的javascript

• 客户端javascript
• 在html里嵌入javascript
• javascript程序的执行
• 兼容性和互用性
• 可访问性
• 安全性
• 客户端框架
• 开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

window对象

• 计时器

• 浏览器定位和导航

• 浏览历史

• 浏览器和屏幕信息

• 对话框

• 错误处理

• 作为window对象属性的文档元素