JavaScript에서 with를 사용하는 방법

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

with 의 기본 사용법 with 문의 원래 의도는 레벨별 개체 액세스를 위한 네임스페이스 스타일 단축 메서드를 제공하는 것입니다. 즉, 지정된 코드 영역에서 개체를 직접 호출합니다. 노드 이름.

var obj = {
    a: 1,
    b: 2,
    c: 3};

// 重复写了3次的“obj”obj.a = 2;
obj.b = 3;
obj.c = 4;

with (obj) {
    a = 3;
    b = 4;
    c = 5;
}

의 단점   위의 예에서 with가 코드를 매우 단순화하는 데 도움이 된다는 것을 알 수 있습니다. 그런데 왜 추천하지 않는 걸까요? with의 단점에 대해 이야기해 보겠습니다.

function foo(obj) {
    with (obj) {
        a = 2;
    }
}var o1 = {
    a: 3};var o2 = {
    b: 3}
foo(o1);
console.log(o1.a);  //2foo(o2);
console.log(o2.a);  //underfinedconsole.log(a);     //不好，a被泄漏到全局作用域上了

로그인 후 복사

 o1을 전달하면 a = 2 할당 작업은 o1.a를 찾아 2를 할당합니다. o2가 전달되면 o2에는 속성이 없으므로 이 속성은 생성되지 않으며 o2.a는 정의되지 않은 상태로 유지됩니다.

foo(obj) 函数接受一个 obj 的形参，该参数是一个对象引用，并对该对象医用执行了 with(obj) {...}。在 with 块内部，对 a 有一个词法引用，实际上是一个 LHS引用，将 2 赋值给了它。
  当我们将 o1 传递进去，a = 2 赋值操作找到了 o1.a 并将 2 赋值给它。而当 o2 传递进去，o2 并没有 a 的属性，因此不会创建这个属性，o2.a 保持 undefined。

  但为什么对 o2的操作会导致数据的泄漏呢？
  这里需要回到对 LHS查询 的机制问题（详情可移步 JavaScript中的LHS和RHS查询）。
  当我们传递 o2 给 with 时，with 所声明的作用域是 o2, 从这个作用域开始对 a 进行 LHS查询。o2 的作用域、foo(…) 的作用域和全局作用域中都没有找到标识符 a，因此在非严格模式下，会自动在全局作用域创建一个全局变量），在严格模式下，会抛出ReferenceError  그런데 왜 O2의 운영이 데이터 유출로 이어지는 걸까요?

o2를 with에 전달하면 with에 의해 선언된 범위는 o2이고 a에 대한 LHS 쿼리는 이 범위에서 시작됩니다. o2 범위, foo(...) 범위 및 전역 범위에서 식별자 a를 찾을 수 없으므로 비엄격 모드에서는 전역 변수가 전역 변수에 자동으로 생성됩니다. 범위), 엄격 모드에서는 ReferenceError 예외가 발생합니다.

성능 저하

 답은 '아니요'입니다. 구체적인 이유에 대해 코드의 다음 부분을 살펴보겠습니다.

<script>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");
}
func();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");
}
funcWith();</script>

그런 다음 테스트 효과는 다음과 같습니다.

동일한 로직을 처리하는 코드에서 with가 없는 실행 시간은 4.63ms에 불과합니다. with 사용 시 사용 시간은 최대 81.87ms입니다.


이게 왜죠?
 그 이유는 JavaScript 엔진이 컴파일 단계에서 여러 가지 성능 최적화를 수행하기 때문입니다. 이러한 최적화 중 일부는 어휘집을 기반으로 코드를 정적으로 분석하고 실행 중에 식별자를 빠르게 찾을 수 있도록 모든 변수와 함수가 정의되는 위치를 미리 결정하는 기능에 의존합니다.
 그러나 엔진이 코드에서 with를 찾으면 식별자의 위치에 대한 모든 판단이 유효하지 않다고 간단하게 가정할 수 있습니다. 왜냐하면 새로운 어휘 범위를 생성하는 데 사용된 with로 전달된 객체의 내용이 무엇인지 알 수 있는 방법이 없기 때문입니다. 이다.
 가장 비관적인 경우는 with가 나타나면 모든 최적화가 의미가 없을 수 있다는 것입니다. 따라서 엔진이 취하는 가장 간단한 접근 방식은 최적화를 전혀 수행하지 않는 것입니다. 코드에서 with 또는 eval()을 많이 사용하면 확실히 매우 느리게 실행됩니다. 이러한 비관적인 상황의 부작용을 최소화하기 위해 엔진이 아무리 똑똑하더라도 이러한 최적화가 없으면 코드가 더 느리게 실행된다는 사실을 피할 수 없습니다 . 이 글에서는 JavaScript에서의 with 사용법을 설명합니다. 더 많은 관련 내용을 보려면 PHP 중국어 웹사이트를 참고하세요.

관련 권장사항:

위 내용은 JavaScript에서 with를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!