JavaScript 中的 with 语句学习笔记及用法

with 语句是 JavaScript 中的一个语法结构，可以方便地访问同一个对象中的多个属性或方法，从而简化代码。但是，使用 with 语句会在某些情况下引发一些不容易被发现的“错误”，所以在使用时需要注意。

语法

with 语句的基本语法如下：

with (object) {
  // code block
}

其中，object 是一个 JavaScript 对象，代表被访问的对象。在 with 语句的代码块中，可以直接访问 object 中的属性和方法，而不需要像通常那样使用 object.xxx 的方式。

用法

简化访问同一对象的多个属性或方法

下面是一个简单的示例，说明如何使用 with 语句简化对同一个对象的多个属性或方法的访问：

const person = {
  name: 'Tom',
  age: 18,
  sayHi() {
    console.log('Hi, my name is ' + this.name + '.');
  },
  sayBye() {
    console.log('Bye from ' + this.name + '.');
  }
};

// 普通写法
console.log(person.name); // Tom
console.log(person.age); // 18
person.sayHi(); // Hi, my name is Tom.
person.sayBye(); // Bye from Tom.

// 使用 with 语句
with (person) {
  console.log(name); // Tom
  console.log(age); // 18
  sayHi(); // Hi, my name is Tom.
  sayBye(); // Bye from Tom.
}

上面的示例中，使用了 with 语句可以方便地访问 person 对象中的多个属性和方法，避免了重复书写 person. 的麻烦。

避免命名冲突

下面是一个使用 with 语句可能会带来问题的示例，说明了在使用 with 语句时需要注意避免命名冲突：

const x = 10;
const y = 20;
const person = {
  x: 100,
  y: 200
};

with (person) {
  console.log(x); // 100，而不是外层的 10
  console.log(y); // 200，而不是外层的 20
}

在上面的示例中，使用 with 语句会导致访问到的 x 和 y 不是外层的变量，而是 person 对象中的属性。这种情况有可能会引发不易察觉的错误。

注意事项

在使用 with 语句时，需要注意以下几点：

• 在 with 语句中访问的属性或方法，必须存在于被访问的对象中。否则会报错；
• 在 with 语句代码块中声明的变量，会成为全局变量。这可能会导致变量覆盖和命名冲突的问题；
• 由于使用 with 语句容易引起代码中的歧义，因此在编写代码时建议谨慎使用，以免产生不必要的麻烦。

结语

本文介绍了 JavaScript 中的 with 语句的用法和注意事项，并给出了两个示例来说明 with 语句的使用。在编写 JavaScript 代码时，需要根据实际情况慎重考虑是否使用 with 语句，以避免因使用不当带来的麻烦。