JavaScript 里 window, document, screen, body 这几个名词的区别

简介: JavaScript 里 window, document, screen, body 这几个名词的区别

在下面这个 StackOverflow 的线索里进行了讨论:


https://stackoverflow.com/questions/9895202/what-is-the-difference-between-window-screen-and-document-in-javascript

image.png

window

Window is the main JavaScript object root, aka the global object in a browser, also can be treated as the root of the document object model. You can access it as window


相当于 浏览器 JavaScript 编程环境里的 root 对象,也可以看成是 document 对象模型的父节点。作为全局对象被访问。


window.screen

window 全局对象的一个属性,包含了物理屏幕的尺寸信息。


window.screen or just screen is a small information object about physical screen dimensions.


window.document

window.document or just document is the main object of the potentially visible (or better yet: rendered) document object model/DOM.


页面被渲染后的可见部分对应的 DOM 对象。


body

是上文描述的 document 对象中一个名为 body 的子节点。


Since window is the global object you can reference any properties of it with just the property name - so you do not have to write down window. - it will be figured out by the runtime.


因为 window 是全局对象,因此访问其属性时,可以省略 window. 的写法。


因此通过下列方式访问 window 里的属性,同样有效:

image.png

相关文章
|
15天前
|
JavaScript 前端开发 索引
问js的forEach和map的区别
JavaScript中的`forEach`和`map`都是数组迭代方法。`forEach`遍历数组但不修改原数组,无返回值;它接受回调函数处理元素。`map`则遍历数组并返回新数组,新数组元素为回调函数处理后的结果。两者都接收元素、索引和数组作为回调函数参数。
18 7
|
18天前
|
JavaScript 前端开发
JS require 与 import 的区别
JS require 与 import 的区别
14 1
|
26天前
|
JavaScript
js开发:请解释什么是ES6的类(class),并说明它与传统构造函数的区别。
ES6的类提供了一种更简洁的面向对象编程方式,对比传统的构造函数,具有更好的可读性和可维护性。类使用`class`定义,`constructor`定义构造方法,`extends`实现继承,并可直接定义静态方法。示例展示了如何创建`Person`类、`Student`子类以及它们的方法调用。
21 2
|
27天前
|
自然语言处理 JavaScript 网络架构
js开发:请解释什么是ES6的箭头函数,以及它与传统函数的区别。
ES6的箭头函数以`=>`定义,简化了函数写法,具有简洁语法和词法作用域的`this`。它无`arguments`对象,不能用作构造函数,不支持`Generator`,且不改变`this`、`super`、`new.target`绑定。适用于简短表达式,常用于异步编程和高阶函数。
17 5
|
28天前
|
JavaScript 前端开发
js开发:请解释原型继承和类继承的区别。
JavaScript中的原型继承和类继承用于共享对象属性和方法。原型继承利用原型链查找属性,节省内存但不支持私有成员。类继承通过ES6的class和extends实现,支持私有成员但占用更多内存。两者各有优势,适用于不同场景。
18 0
|
1月前
|
JavaScript 前端开发 网络架构
JavaScript 谈谈对箭头函数的理解及其与普通函数的区别。
JavaScript 谈谈对箭头函数的理解及其与普通函数的区别。
17 1
|
4天前
|
存储 JavaScript 前端开发
JavaScript DOM 操作:解释一下 cookie、sessionStorage 和 localStorage 的区别。
Cookie是服务器发送至客户端的文本信息,会随每个请求发送回服务器,适合控制会话状态但可能暴露隐私。SessionStorage仅在当前会话中存储数据,关闭浏览器后清除,适合临时存储如登录状态。LocalStorage则持久保存数据,即使关闭浏览器也不会清除,适用于存储长期设置。三种方式各有侧重,应按需求选择。
10 0
|
7天前
|
JavaScript 前端开发
JQuery和JS的区别有哪些?
JQuery和JS的区别有哪些?
11 0
|
7天前
|
JavaScript 前端开发
js中浅拷贝和深拷贝的区别
js中浅拷贝和深拷贝的区别
12 1
|
10天前
|
JavaScript 前端开发 算法
JavaScript 中前置自增与后置自增:区别、应用场景
【4月更文挑战第6天】JavaScript中的前置自增`++a`先增后用,返回新值,适合复合赋值和循环计数;后置自增`a++`先用后增,返回原值,适用于保留变量原值的操作。二者差异在于运算时机和返回值,选择时要考虑递增时机和表达式中使用的值。在复杂表达式中应避免混用,注重代码清晰度和一致性。理解这些差异能提高代码效率,避免逻辑错误。
15 1