자바스크립트 엄격 모드(Strict Mode)에 대한 심층적인 이해_자바스크립트 기술

ECMAScript5에 도입된 엄격 모드를 사용하면 JavaScript 런타임 환경이 개발 프로세스에서 가장 일반적이고 찾기 어려운 오류 중 일부를 현재와 다르게 처리할 수 있도록 하여 개발자가 "더 나은" JavaScript 언어를 사용할 수 있습니다. 오랫동안 저는 Firefox에서만 지원하는 엄격 모드에 대해 회의적이었습니다. 그러나 오늘날 모든 주요 브라우저는 최신 버전(IE10, Opera12 및 Android4, IOS5 포함)에서 엄격 모드를 지원합니다.

엄격모드는 어떤 역할을 하나요?

엄격 모드는 JavaScript에 많은 변경 사항을 도입하며 이를 두 가지 범주(명백함과 미묘함)로 나눕니다. 사소한 개선의 목표는 현재 JavaScript의 몇 가지 세부적인 문제를 해결하는 것입니다. 여기서는 깊이 다루지 않겠습니다. 관심이 있으시면 Dmitry Soshnikov가 쓴 세부 2장 Strict Mode의 훌륭한 문서 ECMA-262-5를 읽어보세요. . 여기서는 엄격 모드로 인해 도입된 명백한 변경 사항, 엄격 모드를 사용하기 전에 알아야 할 개념, 가장 도움이 될 변경 사항에 중점을 두겠습니다.

특정 기능을 배우기 전에 엄격 모드의 목표 중 하나가 더 빠르고 편리하게 디버깅할 수 있도록 하는 것임을 기억하세요. 런타임 환경이 문제를 감지하면 명시적으로 오류를 발생시키는 것이 자동으로 실패하거나 이상하게 동작하는 것보다 더 좋습니다(엄격 모드를 활성화하지 않는 JavaScript 런타임 환경의 경우가 종종 있음). 엄격 모드에서는 더 많은 오류가 발생하지만 이는 좋은 것입니다. 이러한 오류가 주의를 환기시키고 이전에 찾기 어려웠던 많은 잠재적인 문제를 해결할 것이기 때문입니다.

WITH 키워드 제거

먼저 with 문이 엄격 모드에서 제거됩니다. with 문이 포함된 코드는 엄격 모드에서 예외를 발생시킵니다. 따라서 엄격 모드를 사용하는 첫 번째 단계는 코드에서 with를 사용하지 않는지 확인하는 것입니다.

코드 복사 코드는 다음과 같습니다.

// 다음 JavaScript 코드는 엄격 모드에서 오류를 발생시킵니다.
(위치)와 함께 {
경고(href);
}

전역 변수의 실수로 할당 방지

둘째, 값을 할당하기 전에 지역 변수를 선언해야 합니다. 엄격 모드가 활성화되기 전에 선언되지 않은 지역 변수를 복사하면 동일한 이름의 전역 변수가 자동으로 생성됩니다. 이는 Javascript 프로그램에서 가장 일반적인 오류 중 하나이며 엄격 모드에서 이를 수행하려고 하면 명시적인 예외가 발생합니다.

코드 복사 코드는 다음과 같습니다.

// 엄격 모드에서는 예외가 발생합니다
(함수() {
SomeUndeclaredVar = "foo";
}());

함수의 THIS는 더 이상 기본적으로 전역을 가리키지 않습니다.

엄격 모드의 또 다른 중요한 변경 사항은 정의되지 않았거나 비어 있는(null 또는 정의되지 않음) 함수에서 이것이 더 이상 기본적으로 전역 환경(전역)을 가리키지 않는다는 것입니다. 이로 인해 다음과 같은 함수의 기본 동작에 의존하는 일부 코드 실행 시 오류가 발생합니다.

코드 복사 코드는 다음과 같습니다.

window.color = "빨간색";
함수 sayColor() {
경고(this.color);
}
// 엄격 모드에서는 오류가 보고됩니다. 엄격 모드가 아닌 경우 "red"
메시지가 표시됩니다. sayColor();
// 엄격 모드에서는 오류가 보고됩니다. 엄격 모드가 아닌 경우 "red"
메시지가 표시됩니다. sayColor.call(null);

할당될 때까지 정의되지 않은 상태로 유지됩니다. 즉, 생성자가 실행될 때 이전에 명확한 새 키워드가 없으면 예외가 발생합니다.

코드 복사 코드는 다음과 같습니다.

함수 사람(이름) {
This.name = 이름;
}
//엄격 모드에서는 오류가 보고됩니다
var me = Person("니콜라스");

위 코드에서 Person 생성자가 실행되면 이전에 new가 없기 때문에 함수에 this가 정의되지 않은 상태로 유지됩니다. 정의되지 않은 속성을 설정할 수 없으므로 위 코드에서 오류가 발생합니다. 비엄격 모드 환경에서 복사되지 않은 이는 기본적으로 창 전역 변수를 가리키며, 작업 결과 실수로 창 전역 변수에 대한 이름 속성을 설정하게 됩니다.

이름 중복 방지

많은 코드를 작성할 때 실수로 개체 속성과 함수 매개변수를 중복된 이름으로 설정하기 쉽습니다. 이 경우 엄격 모드에서는 명시적으로 오류가 발생합니다

코드 복사 코드는 다음과 같습니다.

//중복된 변수 이름은 엄격 모드에서 오류를 보고합니다
함수 doSomething(값1, 값2, 값1) {
//코드
}
//중복된 객체 속성 이름은 엄격 모드에서 오류를 보고합니다:
var 객체 = {
foo: "바",
foo: "바즈"
};

위 코드는 엄격 모드에서 구문 오류로 간주되어 실행 전에 메시지가 표시됩니다.

안전한 EVAL()

eval() 문이 최종적으로 제거되지는 않았지만 엄격 모드에서는 여전히 일부 개선이 이루어졌습니다. 가장 큰 변화는 eval()에서 실행된 변수 및 함수 선언이 현재 범위에서 해당 변수나 함수를 직접 생성하지 않는다는 것입니다. 예를 들면 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

(함수() {
eval("var x = 10;");
// 비엄격 모드에서는 경고 10
// 엄격 모드에서는 x가 정의되지 않았기 때문에 예외가 발생합니다.
경고(x);
}());

eval() 실행 중에 생성된 모든 변수나 함수는 eval()에 유지됩니다. 그러나 eval() 문의 반환 값에서 eval()의 실행 결과를 명확하게 얻을 수 있습니다. 예를 들면 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

(함수() {
var result = eval("var x = 10, y = 20; x y");
//나머지 명령문은 엄격 또는 비엄격 모드에서 올바르게 실행될 수 있습니다(결과는 30)
경고(결과);
}());

읽기 전용 속성을 수정할 때 예외 발생

ECMAScript5에는 객체의 특정 속성을 읽기 전용으로 설정하거나 전체 객체를 수정할 수 없게 만드는 기능도 도입되었습니다. 그러나 엄격하지 않은 모드에서는 읽기 전용 속성을 수정하려는 시도가 자동으로 실패합니다. 일부 브라우저 기본 API를 처리할 때 이러한 상황이 발생할 수 있습니다. 이 경우 엄격 모드에서는 명시적으로 예외를 발생시켜 이 속성을 수정하는 것이 허용되지 않음을 상기시킵니다.

코드 복사 코드는 다음과 같습니다.

var 사람 = {};
Object.defineProperty(사람, "이름" {
쓰기 가능: false,
값: "니콜라스"
});
// 비엄격 모드에서는 자동 실패가 발생하고, 엄격 모드에서는 예외가 발생합니다.
person.name = "John";

위 예에서는 이름 속성이 읽기 전용으로 설정되어 있습니다. 비엄격 모드에서 이름 속성을 수정하면 오류가 발생하지 않지만 수정이 성공하지 못합니다. 그러나 엄격 모드에서는 명시적으로 예외가 발생합니다.

참고: ECMAScript 속성 특성 사양을 사용할 때는 엄격 모드를 활성화하는 것이 좋습니다.

사용방법

최신 브라우저에서는 엄격 모드를 켜는 것이 매우 쉽습니다. JavaScript 코드에 다음 명령을 입력하기만 하면 됩니다

"엄격한 사용";

위 코드는 변수에 할당되지 않은 문자열인 것처럼 보이지만 실제로는 JavaScript 엔진에 엄격 모드로 전환하도록 지시합니다(엄격 모드를 지원하지 않는 브라우저는 위 코드를 무시하고 어떠한 작업도 수행하지 않습니다). 후속 실행에 영향을 미침). 이 지시문을 전역적으로 적용하거나 특정 기능에 적용할 수 있지만 전역 환경에서는 엄격 모드를 활성화하지 않도록 주의해야 합니다.

코드 복사 코드는 다음과 같습니다.

// 이렇게 사용하지 마세요
"엄격한 사용";
함수 doSomething() {
// 코드의 이 부분은 엄격 모드에서 실행됩니다
}
함수 doSomethingElse() {
// 코드의 이 부분은 엄격 모드에서도 실행됩니다
}

위의 코드는 큰 문제는 없어 보이지만. 하지만 페이지에 소개된 모든 코드를 유지 관리할 책임이 없는 경우 이러한 방식으로 엄격 모드를 사용하면 엄격 모드에 준비되지 않은 타사 코드로 인해 발생하는 문제에 노출됩니다.

따라서 함수에서 엄격 모드를 활성화하라는 명령을 적용하는 것이 가장 좋습니다. 예를 들면 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

함수 doSomething() {
"엄격한 사용";
//이 함수의 코드는 엄격 모드에서 실행됩니다
}
함수 doSomethingElse() {
//이 함수의 코드는 엄격 모드에서 실행되지 않습니다
}

둘 이상의 함수에서 엄격 모드를 활성화하려면 즉시 호출되는 함수 표현식(IIFE)을 사용하세요.

코드 복사 코드는 다음과 같습니다.

(함수() {
"엄격한 사용";
함수 doSomething() {
                // 이 함수는 엄격 모드에서 실행됩니다.
}
함수 doSomethingElse() {
               // 이 함수는 엄격 모드에서도 실행됩니다
}
}());

결론

지금부터 JavaScript 엄격 모드를 활성화하는 것이 좋습니다. 그러면 코드에서 눈에 띄지 않는 오류를 찾는 데 도움이 될 수 있습니다. 전역적으로 활성화하지는 않지만 IIFE(함수 표현식 즉시 실행)를 최대한 많이 사용하여 여러 함수 범위에 엄격 모드를 적용할 수 있습니다. 처음에는 이전에 발생하지 않은 오류 메시지가 표시됩니다. 이는 정상적인 현상입니다. 엄격 모드를 활성화할 때 지원되는 브라우저에서 테스트하여 새로운 잠재적인 문제를 식별하십시오. 코드에 "use strict" 줄을 추가하고 나머지 코드가 작동할 것이라고 가정하지 마십시오. 마지막으로, 엄격 모드에서 더 나은 코드 작성을 시작하세요.

참고:
다음은 다양한 브라우저의 엄격 모드 지원에 대한 요약입니다.
이 페이지에서 현재 브라우저의 엄격 모드 지원을 테스트할 수 있습니다.

엄격 모드의 장점:

자바스크립트를 더욱 강력하게
1. 이것은 더 이상 캡슐화되지 않습니다. 일반 모드에서는 항상 객체입니다.
2. Fun.caller 및 fun.arguments는 삭제할 수 있는 속성이 아니며 설정하거나 검색할 수도 없습니다.
3. Arguments.caller 역시 삭제할 수 없고 설정하거나 검색할 수 없는 속성입니다.

향후 ECMAScript 버전을 위한 기반 마련
1. Implements, Interface, Let, Package, Private, protected, Public, Static 및 Yield 예약어가 추가되었습니다.
2. 메소드 선언은 if, for 등의 문장 중간이 아닌 스크립트나 메소드의 맨 앞에 위치해야 합니다.