javascript_javascript 팁의 with 키워드 이해하기

js의 with 키워드에 대해 말하면, 많은 친구들의 첫인상은 with 키워드의 기능이 범위를 변경하는 것이라는 것일 수 있으며, 가장 중요한 점은 with 키워드의 사용을 권장하지 않는다는 것입니다. with 키워드가 권장되지 않는다는 말을 듣고 우리 중 많은 사람들은 with 키워드를 무시하고 그냥 사용해도 된다고 생각합니다. 하지만 가끔 코드나 인터뷰 질문을 보면 with 키워드와 관련된 질문이 나올 때가 있습니다. 한 번도 노출되지 않은 함정이 많기 때문에 여전히 with 키워드에 대해 이야기할 필요가 있습니다.

1. 기본 안내

JS 고급 프로그래밍에서는 with 키워드를 다음과 같이 설명합니다. with 문의 기능은 코드의 범위를 특정 범위로 설정하는 것입니다.

with (expression) statement;

with 키워드를 사용하는 목적은 다음 예와 같이 동일한 객체를 여러 번 작성하고 액세스하는 작업을 단순화하는 것입니다.

var qs = location.search.substring(1);
var hostName = location.hostname;
var url = location.href;

이러한 코드 줄은 위치 개체의 속성에 액세스합니다. with 키워드를 사용하면 코드가 다음과 같이 단순화될 수 있습니다.

with (location){
  var qs = search.substring(1);
  var hostName = hostname;
  var url = href;
}

이 코드에서는 with 문을 사용하여 위치 객체를 연결합니다. 이는 with 코드 블록 내에서 로컬 변수가 위치의 속성과 동일한 이름을 갖는 경우 먼저 로컬 변수로 간주된다는 의미입니다. object, 이면 이 지역 변수는 위치 개체 속성을 가리킵니다.
참고: with 문은 엄격 모드에서 사용할 수 없습니다.

2. with 키워드의 단점

이전 기본 설명에서 with의 기능 중 하나가 코드를 단순화하는 것임을 알 수 있습니다. 그런데 왜 추천하지 않는 걸까요? with의 단점에 대해 이야기해 봅시다:

1. 성능 문제
2. 의미가 불분명하고 디버깅이 어려움

3. 성능 문제

먼저 with 키워드를 사용한 성능 문제에 대해 먼저 두 가지 코드를 살펴보겠습니다.

첫 번째 코드는 with 키워드를 사용하지 않습니다:

function func() {
  console.time("func");
  var obj = {
    a: [1, 2, 3]
  };
  for (var i = 0; i < 100000; i++) {
    var v = obj.a[0];
  }
  console.timeEnd("func");//0.847ms
}
func();

두 번째 코드는 with 키워드를 사용합니다:

function funcWith() {
  console.time("funcWith");
  var obj = {
    a: [1, 2, 3]
  };
  var obj2 = { x: 2 };
  with (obj2) {
    console.log(x);
    for (var i = 0; i < 100000; i++) {
      var v = obj.a[0];
    }
  }
  console.timeEnd("funcWith");//84.808ms
}
funcWith();

with 키워드를 사용한 후에는 코드 성능이 크게 저하됩니다. 두 번째 코드 부분의 with 문은 obj2 객체에 작용하고, obj 객체는 with 블록에서 액세스됩니다. with 키워드를 사용한 후, with 블록의 변수에 접근하면 obj2에 obj라는 속성이 있는지 먼저 검색하고, 없으면 다음 검색을 진행한다는 견해가 있습니다. 성능에. 하지만 이것이 실제로 프로그램 성능이 저하되는 이유일까요?
두 번째 코드를 다음과 같이 수정해 보겠습니다.

function funcWith() {
  console.time("funcWith");
  var obj = {
    a: [1, 2, 3]
  };
  with (obj) {
    for (var i = 0; i < 100000; i++) {
      var v = a[0];
    }
  }
  console.timeEnd("funcWith");//88.260ms
}
funcWith();

이 코드는 with 문을 obj 객체에 적용한 후 a를 사용하여 obj의 a 속성에 직접 액세스합니다. 앞서 언급한 관점에 따르면 a 속성에 액세스하면 다음의 obj에서 해당 속성을 찾을 수 있습니다. 그런데 왜 코드 성능이 여전히 저하됩니까?
실제 이유는 with 키워드를 사용한 후에는 JS 엔진이 이 코드를 최적화할 수 없기 때문입니다.
JS 엔진에는 코드가 실행되기 전에 컴파일 단계가 있습니다. with 키워드가 사용되지 않으면 JS 엔진은 a가 obj의 속성임을 알고 코드를 정적으로 분석하여 식별자 구문 분석을 향상시켜 최적화할 수 있습니다. 따라서 코드 실행의 효율성이 향상됩니다. with 키워드를 사용한 후 js 엔진은 a 변수가 지역 변수인지 obj의 속성인지 알 수 없습니다. 따라서 js 엔진이 with 키워드를 만난 후에는 이 코드 최적화를 포기하므로 ​​실행 효율성이 떨어집니다. .
성능에 대한 with 키워드 사용의 또 다른 영향은 이 코드를 압축할 수 없는 js 압축 도구이며, 이는 성능에 영향을 미치는 요소이기도 합니다.

4. 의미가 불분명하고 디버깅이 어려움

앞서 언급했듯이 with는 성능 문제 외에도 의미가 불분명하고 디버깅이 어려워 코드를 읽기 어렵게 만들고 잠재적인 버그를 유발할 수 있다는 단점도 있습니다.

function foo(obj) {
  with (obj) {
    a = 2;
  }
}

var o1 = {
  a: 3
};
var o2 = {
  b: 3
};

foo(o1);
console.log(o1.a); // 2

foo(o2);
console.log( o2.a ); // undefined
console.log( a ); // 2

이 코드는 이해하기 쉽습니다. foo 함수에서 with 키워드는 전달된 obj 객체에 액세스한 다음 a 속성을 수정하는 데 사용됩니다. o1 객체가 전달되면 o1 객체에 a 속성이 있으므로 문제가 없습니다. o2 객체가 전달될 때 a 속성이 수정되면 o2 객체에는 a 속성이 없으므로 수정된 a 속성이 전역 변수가 됩니다. 이로 인해 잠재적인 버그가 발생합니다.

5. 확장 분석

이전에 많이 말했지만 with 키워드를 사용하는 것이 권장되지 않는 이유와 발생할 수 있는 문제를 모두가 이해했다고 믿습니다. 좀 더 복잡한 상황을 살펴보겠습니다. 다음 코드를 살펴보세요.

var obj = {
  x: 10,
  foo: function () {
    with (this) {
      var x = 20;
      var y = 30;
      console.log(y);//30
    }
  }
};
obj.foo();
console.log(obj.x);//20
console.log(obj.y);//undefined

在这段代码中，分别输出30，20，undefined的。涉及的知识点也比较多：with关键字，this关键字，变量提升等等，我们来一一解释一下。
1、this关键字
关于this关键字的文章google上面相当多，这里不再赘述，我们只需记住一点：this关键字始终指向调用函数的对象。在这里，foo函数中，this指向的就是obj对象。因此在with(this)语句块里面，可以直接通过x变量来访问obj的x属性。
2、变量提升
js中的变量提升也是一个经常遇到的问题，我们可以简单理解成在js中，变量声明会被提升到函数的顶部，尽管有的时候，它是在后面声明的。

所以上面的代码可以解析为：

var obj = {
  x: 10,
  foo: function () {
    var x;//声明局部变量x
    var y;//声明局部变量y
    with (obj) {
      x = 20;//访问变量x，在obj上找到x，则修改为20
      y = 30;//访问变量y，在bojg上找不到y，则进一步查找，找到局部变量y，修改为30
      console.log(y);//30//直接输出局部变量y，
    }
  }
};
obj.foo();
console.log(obj.x);//20，obj.x已被修改为20
console.log(obj.y);//undefined，obj不存在y属性，则为undefined

上面的注释中，解释了代码的执行过程，相信大家已经理解了为什么会出处30,20，undefined的原因。

有兴趣的同学可以看看下面这段代码：

({
x: 10,
foo: function () {
  function bar() {
    console.log(x);
    console.log(y);
    console.log(this.x);
  }
  with (this) {
    var x = 20;
    var y = 30;
    bar.call(this);
  }
}
}).foo();

这段代码会输出什么？为什么呢？

总结

本文总结了with语句的特点和弊端，总的来说，强烈不推荐使用with关键字。其实在日常编码中，我们只需要知道不去使用with就可以了，但是有的时候我们可能会遇到一些关于with的奇奇怪怪的问题，想要找出真正的原因，就要深入理解with关键字，这有助于我们去深入学习JS这门语言，同时也是学习JS的一个乐趣。