Firefox 90 的活力

对于我们北半球的人来说，随着夏季的到来，气温很高，用冰茶放松身心成为首选。幸运的是，Windows 版的后台更新功能出现了，这意味着即使 Firefox 没有运行，它也能更新。我们只需坐下来放松即可！

本版本还带来了一些不错的 JavaScript 新增功能，包括 类的私有字段和方法，以及用于 Array、String 和 TypedArray 全局对象的 at() 方法。

这篇文章只是提供了一系列亮点，要了解所有细节，请查看以下内容

• MDN 上的 Firefox 90 开发者版
• Firefox 90 最终用户发布说明

类变为私有

这是一个 JavaScript 从一开始就缺少的功能，私有字段和方法 现在在 Firefox 90 中默认启用。这允许您在类中声明私有属性。您不能从类外部引用这些私有属性；它们只能在类主体中读取或写入。

私有名称必须以“井号”（#）为前缀，以区分它们与类可能包含的任何公共属性。

这展示了如何在类中声明私有字段，而不是公共字段

class ClassWithPrivateProperties {

  #privateField;
  publicField;

  constructor() {

    // can be referenced within the class, but not accessed outside
    this.#privateField = 42;

    // can be referenced within the class aswell as outside
    this.publicField = 52;
}

  // again, can only be used within the class
  #privateMethod() {
    return 'hello world';
  }

  // can be called when using the class
  getPrivateMessage() {
    return this.#privateMethod();
  }
}

静态字段和方法也可以是私有的。要了解更多详细的概述和解释，请查看以下优秀的指南：使用私有类功能。您还可以阅读在我们的 之前博客文章“为 JavaScript 实现私有字段” 中实现此类功能需要哪些步骤。

JavaScript at() 方法

相对索引方法 at() 已添加到 Array、String 和 TypedArray 全局对象。

将正整数传递给该方法将返回该位置的项目或字符。但是，此方法的亮点在于它也接受负整数。这些整数从数组或字符串的末尾开始倒数。例如，1 将返回第二个项目或字符，而 -1 将返回最后一个项目或字符。

此示例声明了一个包含值的数组，并使用 at() 方法从末尾选择该数组中的一个项目。

const myArray = [5, 12, 8, 130, 44];

let arrItem = myArray.at(-2);

// arrItem = 130

值得一提的是，确实还有其他常见的实现方法，但这种方法看起来相当简洁。

Canvas 的圆锥渐变

2D Canvas API 有一个新的 createConicGradient() 方法，该方法会在一个点周围创建渐变（而不是像 createRadialGradient() 那样从该点创建）。此功能允许您指定要放置中心的位置以及渐变的起始方向。然后，您可以添加所需的颜色以及颜色应开始（和结束）的位置。

此示例创建了一个具有 5 个颜色停止点的圆锥渐变，我们使用它来填充一个矩形。

var canvas = document.getElementById('canvas');

var ctx = canvas.getContext('2d');

// Create a conic gradient
// The start angle is 0
// The centre position is 100, 100
var gradient = ctx.createConicGradient(0, 100, 100);

// Add five color stops
gradient.addColorStop(0, "red");
gradient.addColorStop(0.25, "orange");
gradient.addColorStop(0.5, "yellow");
gradient.addColorStop(0.75, "green");
gradient.addColorStop(1, "blue");

// Set the fill style and draw a rectangle
ctx.fillStyle = gradient;
ctx.fillRect(20, 20, 200, 200);

结果如下

新的请求头

提取元数据请求头提供有关请求起源的上下文信息。这允许服务器根据请求的来源以及资源的使用方式，对是否应允许请求做出决策。Firefox 90 默认启用以下功能

• Sec-Fetch-Site
• Sec-Fetch-Mode
• Sec-Fetch-User
• Sec-Fetch-Dest