温馨提示×

const和readonly有何区别

小樊
81
2024-10-12 17:08:19
栏目: 编程语言

constreadonly 在 JavaScript 中都用于声明不可变的变量,但它们之间存在一些关键区别:

  1. 声明方式const 用于声明一个常量变量,其值在声明时必须被赋值,且之后不能再次修改。而 readonly 用于声明一个只读的属性,它可以用于声明对象属性或数组元素,其值在声明时可以不被赋值,但之后也不能再次修改。
  2. 作用域const 声明的变量具有块级作用域,它只在声明它的代码块内有效。而 readonly 声明的属性具有对象级作用域,它只在定义它的对象内有效。
  3. 赋值:对于 const 声明的变量,其值在声明时必须被赋值,且之后不能再次修改。而对于 readonly 声明的属性,其值在声明时可以不被赋值,但之后也不能再次修改。需要注意的是,const 变量可以是对象或数组,但它们的属性仍然是可变的。而 readonly 属性必须是对象的属性或数组的元素。

以下是一些示例代码,以更好地理解 constreadonly 的区别:

// 使用 const 声明一个常量变量
const pi = 3.14;
pi = 3.14159; // 报错:TypeError: Assignment to constant variable.

// 使用 const 声明一个具有块级作用域的变量
if (true) {
  const message = "Hello, world!";
}
console.log(message); // 报错:ReferenceError: message is not defined.

// 使用 readonly 声明一个只读的属性
const obj = {
  name: "John",
  age: 30,
  readonly address: "123 Main St",
};
obj.address = "456 Elm St"; // 报错:TypeError: Cannot assign to read only property 'address' of object 'obj'.

// 使用 readonly 声明一个具有对象级作用域的属性
const arr = [1, 2, 3];
Object.defineProperty(arr, "sum", {
  value: function () {
    return this.reduce((a, b) => a + b, 0);
  },
  writable: false, // 等同于 readonly
});
arr.sum = 6; // 报错:TypeError: Cannot assign to read only property 'sum' of object '[1, 2, 3]'.

需要注意的是,constreadonly 不能互换使用。const 声明的变量不能被重新赋值,但它的属性仍然是可变的;而 readonly 声明的属性不能被重新赋值,也不能被删除。

0