JS知识点总结（四）

最新推荐文章于 2024-09-02 17:47:20 发布

Mr.Groooooooot

最新推荐文章于 2024-09-02 17:47:20 发布

阅读量308

点赞数

本文链接：https://blog.csdn.net/wdhxs/article/details/115603022

版权

JS知识点总结

文章目录

JS知识点总结
一、getComputedStyle()用法
二、WebWork工作者线程
- 特点
- 类型：Web 工作者线程规范中定义了三种主要的工作者线程：专用工作者线程、共享工作者线程和服务工作者线程。
三、关于new的一道面试题
四、关于ES6的面试题

一、getComputedStyle()用法

style 对象中包含支持 style 属性的元素为这个属性设置的样式信息，但不包含从其他样式表层叠继承的同样影响该元素的样式信息。DOM2 Style在document.defaultView上增加了getComputedStyle()方法。这个方法接收两个参数：要取得计算样式的元素和伪元素字符串（如":after"）。如果不需要查询伪元素，则第二个参数可以传 null。getComputedStyle()方法返回一个 CSSStyleDeclaration对象（与 style 属性的类型一样），包含元素的计算样式。假设有如下 HTML 页面：

<!DOCTYPE html>
	<html>
	<head>
	 <title>Computed Styles Example</title>
	 <style type="text/css">
		 #myDiv {
		 background-color: blue;
		 width: 100px;
		 height: 200px;
		 }
	 </style>
	</head>
	<body>
	 <div id="myDiv" style="background-color: red; border: 1px solid black"></div>
	</body>
</html>

这里的

元素从文档样式表（

let myDiv = document.getElementById("myDiv");
let computedStyle = document.defaultView.getComputedStyle(myDiv, null);
console.log(computedStyle.backgroundColor); // "red"
console.log(computedStyle.width); // "100px"
console.log(computedStyle.height); // "200px"
console.log(computedStyle.border); // "1px solid black"（在某些浏览器中）

关于计算样式要记住一点，在所有浏览器中计算样式都是只读的，不能修改 getComputedStyle()
方法返回的对象。而且，计算样式还包含浏览器内部样式表中的信息。因此有默认值的 CSS 属性会出现
在计算样式里。例如，visibility 属性在所有浏览器中都有默认值，但这个值因实现而不同。有些浏
览器会把 visibility 的默认值设置为"visible"，而另一些将其设置为"inherit"。不能假设 CSS 属
性的默认值在所有浏览器中都一样。如果需要元素具有特定的默认值，那么一定要在样式表中手动指定。

二、WebWork工作者线程

特点

 工作者线程是以实际线程实现的。例如，Blink 浏览器引擎实现工作者线程的 WorkerThread 就
对应着底层的线程。
 工作者线程并行执行。虽然页面和工作者线程都是单线程 JavaScript 环境，每个环境中的指令则
可以并行执行。
 工作者线程可以共享某些内存。工作者线程能够使用 SharedArrayBuffer 在多个环境间共享
内容。虽然线程会使用锁实现并发控制，但 JavaScript 使用 Atomics 接口实现并发控制。
工作者线程与线程有很多类似之处，但也有重要的区别。
 工作者线程不共享全部内存。在传统线程模型中，多线程有能力读写共享内存空间。除了 SharedArrayBuffer 外，从工作者线程进出的数据需要复制或转移。
 工作者线程不一定在同一个进程里。通常，一个进程可以在内部产生多个线程。根据浏览器引擎的实现，工作者线程可能与页面属于同一进程，也可能不属于。例如，Chrome 的 Blink 引擎对共享工作者线程和服务工作者线程使用独立的进程。
 创建工作者线程的开销更大。工作者线程有自己独立的事件循环、全局对象、事件处理程序和
其他 JavaScript 环境必需的特性。创建这些结构的代价不容忽视

类型：Web 工作者线程规范中定义了三种主要的工作者线程：专用工作者线程、共享工作者线程和服务工作者线程。

三、关于new的一道面试题

this.a = 20;
function go() {
    // 实例对象上没有就访问原型对象上的
    console.log(this.a);
    this.a = 30;
}
go.prototype.a = 40;
console.log((new go()).a);

四、关于ES6的面试题

关于for...of的简述，说法错误的是
  1. 它可以遍历所有具有iterator 接口的数据结构
  2. 不可以用break来终止循环 （×）
  3. 使用continue可以跳过当前循环
  4. 可以遍历DOM list对象

关于set结构，下面说法错误的是（2分）
  1. 创建一个实例需要用new关键字
  2. 结构成员都是唯一的，不允许重复
  3. 使用add方法添加已经存在的成员会报错（×）
  4. 初始化的时候接受数组作为参数

下面关于类class的描述，错误的是（2分）
  1. JavaScript的类class本质上是基于原型prototype的实现方式做了进一步的封装
  2. constructor构造方法是必须的
  3. 如果类的constructor构造方法有多个，后者会覆盖前者（错,只能有一个）
  4. 类的静态方法可以通过类名调用，不需要实例化

class Square extends Polygon {
    constructor(length) {
        // 在这里, 它调用了父类的构造函数, 并将 lengths 提供给 Polygon 的"width"和"height"
        super(length, length);
        // 注意: 在派生类中, 必须先调用 super() 才能使用 "this"。
        // 忽略这个，将会导致一个引用错误。
        this.name = 'Square';
    }
    get area() {
        return this.height * this.width;
    }
    set area(value) {
        // 注意：不可使用 this.area = value
        // 否则会导致循环call setter方法导致爆栈
        this._area = value;
    }
}