理解JavaScript中window对象的一些用途

简介

Window 对象是JavaScript中的顶层对象，它代表了浏览器中打开的窗口或者标签页。浏览器中打开的每一个窗口/标签页都会有一个对应的 Window 对象。在浏览器中，全局作用域的 this 就是指向 Window 对象。

用途

1. 窗口大小和位置

使用 window 对象，我们可以获取浏览器窗口的大小和位置，也可以设置浏览器窗口的大小和位置。例如，我们可以用下列代码获得浏览器窗口的高度和宽度：

var width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
var height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
console.log('Window size: width=' + width + ', height=' + height);

2. 定时器

window 对象也可以用来创建和取消定时器。setTimeout() 和 setInterval() 是 window 对象提供的两个方法，我们可以用它们来实现一些有趣的功能。例如，以下代码会在 3 秒后将页面的标题修改为 "Hello World!"。

setTimeout(function () {
    document.title = 'Hello World!';
}, 3000);

示例

1. 对话框

window 对象包含了很多用来显示对话框的方法，例如警告、确认和提示等等。以下代码会弹出一个警告框，当用户点击确认按钮时会打印 "You clicked OK"。

window.alert('This is a warning message!');
if (window.confirm('Are you sure?')) {
    console.log('You clicked OK');
} else {
    console.log('You clicked Cancel');
}

2. 计时器

以下代码会每隔一秒钟输出当前时间。我们使用一个已经定义好的 formatDate() 函数来将日期对象格式化为指定的字符串格式。

function printTime() {
    var d = new Date();
    var time = formatDate(d);
    console.log(time);
    setTimeout(printTime, 1000);
}
function formatDate(d) {
    var year = d.getFullYear();
    var month = d.getMonth() + 1;
    var day = d.getDate();
    var hours = d.getHours();
    var minutes = d.getMinutes();
    var seconds = d.getSeconds();
    return year + '-' + pad(month) + '-' + pad(day) + ' ' +
        pad(hours) + ':' + pad(minutes) + ':' + pad(seconds);
}
function pad(n) {
    return n < 10 ? '0' + n : n;
}
printTime();

总结

Window 对象是JavaScript中的顶层对象，它代表了浏览器中打开的窗口或者标签页。它包含了很多有用的属性和方法，可以用来控制浏览器的行为。在实际开发中，我们经常需要使用 window 对象来获取浏览器窗口的大小和位置，处理用户交互和实现一些有趣的特效。