JavaScript에서 with를 사용하는 방법

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

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

with는 일반적으로 객체 자체를 반복적으로 참조하지 않고 동일한 객체의 여러 속성을 반복적으로 참조하는 지름길로 사용됩니다.

---

예를 들어 현재 다음과 같은 객체가 있습니다:

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

obj에서 각 항목의 값을 변경하려는 경우 일반적인 쓰기 방법은 다음과 같을 수 있습니다.

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

그리고 with의 쓰기 방법을 사용하면

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

  이 코드에서 with 문은 obj 객체를 연결하는 데 사용됩니다. 즉, with 코드 블록 내에서 각 변수는 먼저 로컬 변수로 간주됩니다. obj 객체의 속성이 있으면 이 지역 변수는 obj 객체 속성을 가리킵니다.

with

의 단점   위의 예에서 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과 o2가 생성됩니다. 그 중 하나에는 속성이 있고 다른 하나에는 속성이 없습니다. foo(obj) 함수는 객체 참조인 obj의 형식 매개변수를 받아들이고 객체에 대해 with(obj) {...}를 수행합니다. with 블록 내부에는 실제로 LHS 참조인 a에 대한 어휘 참조가 있으며 여기에 2가 할당됩니다.

 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의 운영이 데이터 유출로 이어지는 걸까요?

여기서는 LHS 쿼리 메커니즘으로 돌아가야 합니다(자세한 내용은 JavaScript의 LHS 및 RHS 쿼리를 참조하세요).

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

with가 권장되지 않는 또 다른 이유는 다음과 같습니다. 엄격 모드에서는 eval(…)을 간접적으로 또는 안전하지 않게 사용하는 것과 마찬가지로 with도 완전히 금지됩니다.

성능 저하

 with는 런타임에 새 범위를 수정하거나 생성하여 작성 시 정의된 다른 어휘 범위를 속입니다. 위의 데이터 유출 가능성이 있지만 조금만 주의하면 좋은 기능을 만들 수 있지 않을까요?

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

다음 코드를 복사하여 직접 실행할 수 있습니다

<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 중국어 웹사이트를 참고하세요.

관련 권장사항:

js 및 php 중첩

js은 기본 이벤트를 방지하고 js는 이벤트 버블링 이벤트를 방지합니다. js가 버블링 이벤트를 차단하는 예를 공유하세요

js 함수의 일반적인 쓰기 및 호출 방법

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