深入浅出剖析JavaScript中对象的属性设置与屏蔽

2023-10-24 01:26:55

JavaScript中的属性设置：点号（.）和方括号（[]）
在JavaScript中，有两种主要方式可以设置对象的属性：点号（.）和方括号（[]）。这两种方法之间存在着一些差异，了解这些差异对于有效地操作对象属性至关重要。

点号(.)： 点号语法是设置对象属性最简单的方法。它使用对象的名称后跟属性的名称，并使用等号(=)将属性值分配给该名称。例如：

const person = {
  name: "John Doe",
  age: 30,
  city: "New York"
};

person.name = "Jane Doe";

方括号([])： 方括号语法提供了一种更灵活的方式来设置对象属性。它允许您使用变量或表达式作为属性名称。方括号语法还允许您使用点号语法无法实现的某些特性，例如访问和设置对象中不存在的属性。例如：

const person = {
  name: "John Doe",
  age: 30,
  city: "New York"
};

const propertyName = "email";
person[propertyName] = "johndoe@example.com";

JavaScript中的属性屏蔽

JavaScript中不存在传统意义上的私有属性，但我们可以通过一些技巧来实现属性屏蔽的效果。最常见的方法是使用闭包。闭包是指可以访问其创建函数作用域中的变量的函数。

function createPerson(name, age, city) {
  let email = "johndoe@example.com"; // 私有属性

  return {
    name: name,
    age: age,
    city: city,

    // 访问私有属性的方法
    getEmail: function() {
      return email;
    }
  };
}

const person = createPerson("John Doe", 30, "New York");

// 无法直接访问私有属性
console.log(person.email); // undefined

// 使用访问器方法访问私有属性
console.log(person.getEmail()); // "johndoe@example.com"

另一种实现属性屏蔽的方法是使用Symbol数据类型。Symbol是一个唯一且不可变的值，可以用来作为属性名称。

const person = {
  name: "John Doe",
  age: 30,
  city: "New York"
};

const emailSymbol = Symbol("email"); // 私有属性

person[emailSymbol] = "johndoe@example.com";

// 无法直接访问私有属性
console.log(person.email); // undefined

// 使用Symbol作为属性名称来访问私有属性
console.log(person[emailSymbol]); // "johndoe@example.com"