자바스크립트에서 with를 사용하는 방법

JavaScript에서 with는 문의 범위 체인을 확장하는 데 사용됩니다. 일반적으로 개체 자체를 반복적으로 참조하지 않고 동일한 개체의 여러 속성을 반복적으로 참조하는 단축 방법으로 사용됩니다. 성명...}".

이 튜토리얼의 운영 환경: Windows 7 시스템, JavaScript 버전 1.8.5, Dell G3 컴퓨터.

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

with 문은 문의 범위 체인을 확장하는 데 사용됩니다. 구문은 다음과 같습니다.

with (expression) {
    statement
}

• expression

  문을 평가할 때 사용되는 범위 체인에 지정된 표현식을 추가합니다. 표현식 주위에는 괄호가 필요합니다.

• statement

  모든 문장. 여러 문을 실행하려면 블록 문({ ... })을 사용하여 문을 그룹화합니다.

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);	//2

foo(o2);
console.log(o2.a);	//underfined
console.log(a);		//2，a被泄漏到全局作用域上

먼저 위 코드를 분석해 보겠습니다. 이 예에서는 두 개의 객체 o1과 o2가 생성됩니다. 그 중 하나에는 속성이 있고 다른 하나에는 속성이 없습니다. foo(obj) 함수는 객체 참조인 obj의 형식 매개변수를 받아들이고, 객체 참조에 대해 with(obj) {...}를 수행합니다. with 블록 내부에는 실제로 LHS 참조인 a에 대한 어휘 참조가 있으며 여기에 2가 할당됩니다. foo(obj) 函数接受一个 obj 的形参，该参数是一个对象引用，并对该对象引用执行了 with(obj) {...}。在 with 块内部，对 a 有一个词法引用，实际上是一个 LHS引用，将 2 赋值给了它。

当我们将 o1 传递进去，a = 2 赋值操作找到了 o1.a 并将 2 赋值给它。而当 o2 传递进去，o2 并没有 a 的属性，因此不会创建这个属性，o2.a 保持 undefined。

但为什么对 o2的操作会导致数据的泄漏呢？

这里需要回到对 LHS查询 的机制问题。

当我们传递 o2 给 with 时，with 所声明的作用域是 o2, 从这个作用域开始对 a 进行 LHS查询。o2 的作用域、foo(…) 的作用域和全局作用域中都没有找到标识符 a，因此在非严格模式下，会自动在全局作用域创建一个全局变量），在严格模式下，会抛出ReferenceError

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

그런데 왜 O2의 작동으로 인해 데이터 유출이 발생하는 걸까요?

여기서 LHS 쿼리 메커니즘으로 돌아가야 합니다.

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

에서는 전역 변수가 전역 범위에서 자동으로 생성됩니다),

엄격 모드

를 사용하면 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 또는 eval()을 많이 사용하면 확실히 매우 느리게 실행됩니다. 이러한 비관적인 상황의 부작용을 최소화하기 위해 엔진이 아무리 똑똑하더라도 이러한 최적화가 없으면 코드가 더 느리게 실행된다는 사실을 피할 수 없습니다 . 【관련 추천:

javascript 비디오 튜토리얼

, web front-end】

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