window 对象
店里有一只铃。它是段落 #bell，一开始是 blank。这一页没有表单。
window 是这个标签页的对象。文档、视口宽度，以及普通脚本里的 var，都挂在它上面。let 不挂。页面读四样东西再拼起来。这一行是 same / 4 / undefined / number。
不是那张茶单
上一页拒绝空的客人和 1 到 3 以外的杯数。那一行是 need guest / ok。这一页不看 #guest，也不看字段 #cups。这里的 cups 是一个 var，不是输入框。
问题换了：通过 window 能碰到什么？
文档只有一个
document 不是第二份。它就是 window.document。从 window.document 找到的铃，和从 document 找到的是同一只。
let bell = window.document.getElementById("bell");
let also = document.getElementById("bell");
bell.textContent = window.document === document ? "same" : "no";
console.log(bell.textContent);
console.log(bell === also);
日志先是 same，然后是 true。一个文档，一只铃。
var 挂在窗口上
这个脚本里 var cups = 4 会做出 window.cups。读出来是数字 4。String 只是为了写到铃上，把它变成文本。
var cups = 4;
let bell = document.getElementById("bell");
bell.textContent = String(window.cups);
console.log(bell.textContent);
日志是 4。这个 4 是变量，不是表单字段。
let 留在外面
let kettle = 1 是存在的。它不是 window 的属性。window.kettle 是 undefined，String 把它变成单词 undefined。
let kettle = 1;
let bell = document.getElementById("bell");
bell.textContent = String(window.kettle);
console.log(bell.textContent);
console.log(kettle);
日志是 undefined，然后是 1。水壶在。它只是不挂在 window 上。
宽度是数字
window.innerWidth 是视口横向上有多少 CSS 像素。这个值的 typeof 是 "number"。它不是文本，输入框的 value 才是文本。
let bell = document.getElementById("bell");
bell.textContent = typeof window.innerWidth;
console.log(bell.textContent);
日志是 number。像素数会随窗口变。类型不变。
别去写地址
window.location.href 是这个标签页的地址，它是字符串。读它没有事。写进一个新地址，页面就离开了。没有一段代码往 href 里写。
四次读取，不是表单
这里不修剪名字，也不检查范围。四次读取是：文档是不是同一个对象、那个 var、缺席的 let、宽度的类型。String(undefined) 是单词 undefined，不是一只空铃。
铃下面的那一行
脚本在 body 末尾。它声明 var cups = 4 和 let kettle = 1，然后放进四次读取：文档是否相同、window.cups、window.kettle、typeof window.innerWidth。
<!DOCTYPE html>
<html>
<head>
<title>shop-bell — page</title>
</head>
<body>
<p id="bell">blank</p>
<p id="line">…</p>
<script>
var cups = 4;
let kettle = 1;
let seen = [];
seen.push(window.document === document ? "same" : "no");
seen.push(String(window.cups));
seen.push(String(window.kettle));
seen.push(typeof window.innerWidth);
document.getElementById("line").textContent = seen.join(" / ");
</script>
</body>
</html>
这一行是 same / 4 / undefined / number。文档对上了。var 在 window 上看得到。let 看不到。宽度的类型是 number。blank 没了。need guest / ok 是上一页。
在柜台
- 把
window.document和document比一比。铃显示 same。 - 声明
var cups = 4，读window.cups。铃显示 4。 - 声明
let kettle = 1，读window.kettle。铃显示 undefined。kettle本身仍是 1。 - 读
typeof window.innerWidth。铃显示 number。 - 读页面那一行：same / 4 / undefined / number。
柜台上看错的地方
铃显示的是这些词里的一个，不是客人的名字。
- 以为
window.kettle是 1 - 以为
window.cups是 undefined - 把
innerWidth当成文本 - 往
location.href里写，于是离开页面 - 把这一行读成 need guest / ok
记住这些
window.document和document是同一个对象var cups = 4可以当成window.cups来读let kettle = 1不会造出window.kettletypeof window.innerWidth是 number- 页面这一行是 same / 4 / undefined / number
🧠 测试您的知识
测试您的知识
通过这个互动测验挑战自己，看看你对这个主题的理解程度如何
📝 说明
- 仔细阅读每个问题
- 为每个问题选择最佳答案
- 您可以随时重新参加测验
- 您的进度将显示在顶部