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 对象中的属性。这种情况有可能会引发不易察觉的错误。