建站须知
企业网站建设的流程主要有哪些

UI设计、域名服务器、写代码、后台开发

js中window对象常用的方法分类

时间:2025-04-14   查看:100次

Window 对象是浏览器环境中的全局对象,代表浏览器窗口。以下是 Window 对象最常用的方法分类介绍:


一、对话框方法

1. alert() - 显示警告对话框

window.alert('这是一个警告消息');

js中window对象常用的方法分类

2. confirm() - 显示确认对话框

const result = window.confirm('您确定要删除吗?');

if(result) {

  // 用户点击了确定

}

js中window对象常用的方法分类

3. prompt() - 显示提示输入对话框

const name = window.prompt('请输入您的名字', '默认值');

js中window对象常用的方法分类


对话框方法相关面试题:

1. 列举 Window 对象提供的三种对话框方法,并说明它们各自的用途和区别。

2. 为什么在现代前端开发中不推荐使用这些对话框方法?


二、定时器方法

1. setTimeout() - 延迟执行,执行1次。

const timerId = setTimeout(() => {

  console.log('延迟执行');

}, 1000);


2. setInterval() - 循环执行,执行无数次。

const intervalId = setInterval(() => {

  console.log('每隔1秒执行');

}, 1000);


3. clearTimeout()/clearInterval() - 清除定时器

clearTimeout(timerId);

clearInterval(intervalId);


定时器方法相关面试题:

请解释 setTimeout 和 setInterval 的区别,并写出清除它们的对应方法。

什么是"零延时 setTimeout"(setTimeout(fn, 0))?它有什么实际应用场景?


三、窗口控制方法

1. open() - 打开新窗口

const newWindow = window.open('https://www.html20.com', '_blank', 'width=500,height=500');


2. close() - 关闭窗口

window.close(); // 关闭当前窗口


3. moveTo()/moveBy() - 移动窗口

window.moveTo(100, 100); // 移动到指定坐标

window.moveBy(50, 50);   // 相对当前位置移动


4. resizeTo()/resizeBy() - 调整窗口大小

window.resizeTo(800, 600); // 调整到指定尺寸

window.resizeBy(-100, -50); // 相对当前尺寸调整


窗口控制方法相关面试题

如何使用 Window 方法打开一个新窗口?如何确保它在大多数浏览器中不会被弹出拦截器阻止?

window.open() 方法的返回值是什么?如何通过这个返回值控制新打开的窗口?


四、滚动控制方法

1. scrollTo() - 滚动到指定位置。scroll() - scrollTo()的别名

window.scrollTo(0, 1000); // 滚动到Y轴1000px位置

window.scrollTo({ top: 1000, behavior: 'smooth' }); // 平滑滚动


2. scrollBy() - 相对当前位置滚动

window.scrollBy(0, 100); // 向下滚动100px


滚动控制方法相关面试题

列举三种控制窗口滚动行为的 Window 方法,并简要说明它们的作用。

如何实现平滑滚动到页面顶部的功能?请写出代码示例。


五、请求动画帧

1. requestAnimationFrame() - 动画优化方法

function animate() {

  // 动画逻辑

  requestAnimationFrame(animate);

}

requestAnimationFrame(animate);


2. cancelAnimationFrame() - 取消动画帧请求


请求动画帧相关面试题:

requestAnimationFrame 相比 setTimeout 或 setInterval 实现动画有什么优势?

请写出使用 requestAnimationFrame 实现一个简单动画的代码框架。


六、事件相关方法

1. addEventListener() - 添加事件监听

window.addEventListener('resize', () => {

  console.log('窗口大小改变了');

});


2. removeEventListener() - 移除事件监听


3. dispatchEvent() - 触发事件


事件监听相关面试题:

window.addEventListener 和直接给 window.onEvent 赋值有什么区别?

如何监听浏览器窗口大小变化事件?请写出代码示例。


七、存储相关方法

1. localStorage - 本地持久存储

localStorage.setItem('key', 'value');

const data = localStorage.getItem('key');


2. sessionStorage - 会话期存储

sessionStorage.setItem('sessionKey', 'tempValue');


储存方法相关面试题:

window.localStorage 和 window.sessionStorage 有什么区别?

如何监听其他标签页对 localStorage 的修改?


想通过面试题更进一步了解window方法的,移步js中window方法相关面试题及答案