목차
eval
에서 논의할 것이며 다른 하나는
catch
성능
요약
웹 프론트엔드 JS 튜토리얼 JavaScript는 어휘 평가, 캐치 및 성능 문제를 속입니다.

JavaScript는 어휘 평가, 캐치 및 성능 문제를 속입니다.

Feb 28, 2017 pm 02:58 PM

일반적으로 실행 컨텍스트의 범위 체인은 변경되지 않습니다

자바스크립트의 어휘 범위는 정적이 아닙니다
(어휘 범위/정적 범위: 범위는 함수에 의해 결정됩니다. 코드 작성 시 선언 위치)
어휘를 속일 수 있는 여러 가지 메커니즘이 있습니다
with(), eval() 및 try-catch 문의 catch 절이 있습니다
with와 eval이 있어야 하는 곳 사용하지 않음(많은 문제 발생)
어휘를 속인다는 것은 어휘 범위를 속이는 것을 의미합니다
즉, 런타임에 범위 체인을 변경합니다
아래에서 설명하겠습니다. 어휘를 속일 수 있는 메커니즘

eval

eval() 함수는 문자열을 매개 변수로 받아들이고 문자열을 구문 분석하여 코드를 생성합니다

var a = 123;eval('console.log(a)');// 123
로그인 후 복사

그래서 콘솔은 123을 인쇄했습니다.
eval 함수를 실행한 후
js 엔진은 이 코드가 동적으로 삽입되었고 스코프 체인이 수정되었음을 알지 못합니다
엔진은 평소와 같이 스코프 체인을 찾습니다
아래 코드를 참조하세요

var a = 1;function demo(){
    eval('var a = 2;');//欺骗词法
    console.log(a);// 2}
demo();
로그인 후 복사

eval 함수가 실행되면 변수 a가 데모 함수 실행 환경의 최상위 범위에 추가됩니다.
이 로컬 환경의 A는 전역 환경의 a를 "그림자"로 만듭니다.
궁극적으로 프로그램은 2를 인쇄하게 됩니다

eval() 함수는 현재 범위를 수정할 수 있을 뿐만 아니라 전역 범위도 수정할 수 있습니다.
무슨 일이 있어도 런타임에 어휘 범위를 수정할 수 있습니다

ES5의 엄격 모드 이 함수에 몇 가지 제한 사항을 추가했습니다. 위 코드

var a = 1;function demo(){    'use strict';    eval('var a = 2;');
    console.log(a);// 1}
demo();
로그인 후 복사

에 로컬 엄격 모드를 추가했습니다. 이번에는 콘솔이 1을 인쇄한 것을 발견했습니다.
이는 엄격 모드에서 eval()이 자체적으로 독립적이기 때문입니다. 실행 시 어휘 범위(실행 환경의 범위 체인을 엉망으로 만드는 것을 방지하기 위해)
이런 방식으로 선언은 자신이 위치한 범위를 수정할 수 없습니다.

이것은 두 가지가 있습니다
타이머 setTimeout() 및 setInterval()과 매우 유사한 코드를 동적으로 생성하는 다른 방법입니다. 첫 번째 매개변수는 코드 문자열
일 수 있으며 함수 생성자 new Function()의 마지막 매개변수는 동일합니다. 코드 문자열
을 사용하는 것은 eval()과 동일합니다. 이 사용법은 심각한 성능 문제를 일으킬 수 있습니다. 이 문제는 나중에

에서 논의할 것이며 다른 하나는

입니다. 권장되지 않는 기만적인 어휘 구문은 with 키워드입니다.
with는 일반적으로 객체의 여러 속성을 반복적으로 참조하는 지름길로 사용됩니다.
장점은 객체 자체를 반복적으로 참조할 필요가 없다는 것입니다
. 예를 들어 재사용하려는 경우 콘솔 개체

console.log(1);console.info(2);console.warn(3);
로그인 후 복사

는 with 키워드

with(console){    log(1);    info(2);    warn(3);
}
로그인 후 복사

JavaScript는 어휘 평가, 캐치 및 성능 문제를 속입니다.

를 사용합니다. with에는 문제가 없는 것 같지만, 살펴보면 다음

function demo(obj){
    with(obj){
        a = 5;
    }
}var obj1 = {a:1};var obj2 = {b:2};

demo(obj1);
console.log(obj1.a);// 5demo(obj2);
console.log(obj2.a);// undefinedconsole.log(a);//5 -->变量a居然泄漏到了全局环境
로그인 후 복사

에서 The 키워드를 사용하면 obj1
의 a가 수정되지만 obj2에 a가 추가되지 않을 뿐만 아니라 부작용이 발생하고 전역
에 누출이 발생한다는 것을 알 수 있습니다. with는 객체를 완전히 분리된 어휘 범위로 처리할 수 있기 때문입니다(도메인 체인의 앞부분에 있는 범위에 넣음)
그래서 그 내부에서 실행이 발생합니다a = 5;
스코프 체인을 내려다보지만 그렇지 않습니다. 발견되었으므로 a 변수가 전역적으로 생성됩니다(var 선언 없이)

참고: with가 어휘 범위를 생성하더라도 with 내부의 일반 var 선언은 이 블록 범위로 제한되지 않습니다
즉, , with 외부 범위의 선언
이렇게

function demo(){
    var obj = {};    with(obj){        var b = 1;
        console.log(b); // 1
    }
    console.log(b); // 1}
demo();
console.log(b);// Uncaught ReferenceError: b is not defined
로그인 후 복사

그리고 with 키워드는 단순히 ES5의 엄격 모드에서 사용할 수 없습니다
사용하려고 하면 다음과 같은 오류가 표시됩니다. this:

JavaScript는 어휘 평가, 캐치 및 성능 문제를 속입니다.

catch

eval 및 with 외에도 try-catch 문의 catch 절은 실행 환경의 범위 체인을 수정할 수도 있습니다.
try 코드 블록에서 오류가 발생하면 실행 흐름이 즉시 catch 절로 점프합니다
. 그런 다음 예외 객체를 변경 가능한 객체에 푸시하고 이를 범위 체인의 맨 앞에 놓습니다. 이는 다음과 매우 유사합니다. with
catch 절이 실행되면 범위 체인이 원래 상태로 복원됩니다.

그러나 eval 및 with와 달리 try-catch는 여전히 상대적으로 유용하며 필요하지 않습니다. (사용하지는 않았지만)

성능

스푸핑 어휘가 발생합니다. 성능 문제
js 엔진은 컴파일 단계에서 성능 최적화를 수행합니다. 코드 어휘를 기반으로 정적 분석을 수행하는 기능
식별자를 빠르게 찾기 위해 변수와 함수의 정의 위치가 미리 결정되어 있습니다.
그러나 eval이나 with는 식별자의 위치를 ​​결정할 수 없습니다. 정적으로 분석됨)
즉, eval과 with 앞에서 js 엔진의 모든 최적화는 의미가 없습니다. (간단히 멋지네요)
무의미하므로 js 엔진이 단순히 승리합니다. 최적화하지 마세요
이로 인해 프로그램이 더 느리게 실행됩니다

의 경우 고유한 성능 문제도 있습니다...
범위가 생성되어 함수의 모든 지역 변수가 발생합니다. 체인 객체의 두 번째 범위에 위치
액세스 비용이 더 높습니다

try-catch 문을 사용하려면 이렇게 하면 됩니다

try{    ...}catch(e){
    handleError(e);
}
로그인 후 복사

catch 문에서 코드 조각만 실행되고 오류를 처리하는 함수에 위임됩니다
이 방법으로 지역 변수에 액세스할 수 없습니다
스코프 체인의 일시적인 변경은 성능에 영향을 미치지 않습니다

요약

요점 요약

  • 어휘 범위란 코드 작성 시 함수 선언 위치에 따라 범위가 결정되는 것을 의미합니다.
    컴파일 타임 어휘 분석 단계에서는 모든 식별자가 어디에 어떻게 선언되었는지 알 수 있습니다

  • eval은 코드 문자열에서 평가될 수 있으므로 런타임에 어휘 범위를 수정합니다.

  • 객체 참조를 범위로 처리하여 런타임에 어휘 범위가 생성됩니다.

  • eval은 엄격 모드에서 독립적인 어휘 범위를 생성하며 범위를 수정할 수 없습니다.

  • 엄격 모드에서는 With를 사용할 수 없습니다

  • eval 및 with(및 catch)는 실행 중에 어휘를 속이고 범위 체인을 수정할 수 있습니다.

  • eval 및 with는 js 엔진을 작동할 수 없게 만듭니다. 컴파일 단계에서 범위 검색을 최적화하여(정적으로 분석할 수 없음) 프로그램 속도를 저하시킵니다

너무 많이 말했지만 with 키를 사용하지 말라고 모든 사람에게 말하고 싶습니다. 단어 및 eval 함수 ~( ̄0 ̄)/

위 내용은 JavaScript를 속이는 lexical eval, with 및 catch 내용과 그 성능 문제에 대한 내용입니다. 자세한 내용은 PHP 중국어 홈페이지( www.php.cn)!


본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

Video Face Swap

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

WebSocket과 JavaScript를 사용하여 온라인 음성 인식 시스템을 구현하는 방법 WebSocket과 JavaScript를 사용하여 온라인 음성 인식 시스템을 구현하는 방법 Dec 17, 2023 pm 02:54 PM

WebSocket 및 JavaScript를 사용하여 온라인 음성 인식 시스템을 구현하는 방법 소개: 지속적인 기술 개발로 음성 인식 기술은 인공 지능 분야의 중요한 부분이 되었습니다. WebSocket과 JavaScript를 기반으로 한 온라인 음성 인식 시스템은 낮은 대기 시간, 실시간, 크로스 플랫폼이라는 특징을 갖고 있으며 널리 사용되는 솔루션이 되었습니다. 이 기사에서는 WebSocket과 JavaScript를 사용하여 온라인 음성 인식 시스템을 구현하는 방법을 소개합니다.

WebSocket 및 JavaScript: 실시간 모니터링 시스템 구현을 위한 핵심 기술 WebSocket 및 JavaScript: 실시간 모니터링 시스템 구현을 위한 핵심 기술 Dec 17, 2023 pm 05:30 PM

WebSocket과 JavaScript: 실시간 모니터링 시스템 구현을 위한 핵심 기술 서론: 인터넷 기술의 급속한 발전과 함께 실시간 모니터링 시스템이 다양한 분야에서 널리 활용되고 있다. 실시간 모니터링을 구현하는 핵심 기술 중 하나는 WebSocket과 JavaScript의 조합입니다. 이 기사에서는 실시간 모니터링 시스템에서 WebSocket 및 JavaScript의 적용을 소개하고 코드 예제를 제공하며 구현 원칙을 자세히 설명합니다. 1. 웹소켓 기술

JavaScript 및 WebSocket을 사용하여 실시간 온라인 주문 시스템을 구현하는 방법 JavaScript 및 WebSocket을 사용하여 실시간 온라인 주문 시스템을 구현하는 방법 Dec 17, 2023 pm 12:09 PM

JavaScript 및 WebSocket을 사용하여 실시간 온라인 주문 시스템을 구현하는 방법 소개: 인터넷의 대중화와 기술의 발전으로 점점 더 많은 레스토랑에서 온라인 주문 서비스를 제공하기 시작했습니다. 실시간 온라인 주문 시스템을 구현하기 위해 JavaScript 및 WebSocket 기술을 사용할 수 있습니다. WebSocket은 TCP 프로토콜을 기반으로 하는 전이중 통신 프로토콜로 클라이언트와 서버 간의 실시간 양방향 통신을 실현할 수 있습니다. 실시간 온라인 주문 시스템에서는 사용자가 요리를 선택하고 주문을 하면

Vue 개발 노트: 일반적인 메모리 사용 및 성능 문제 방지 Vue 개발 노트: 일반적인 메모리 사용 및 성능 문제 방지 Nov 22, 2023 pm 02:38 PM

Vue가 점점 더 널리 사용됨에 따라 Vue 개발자는 Vue 애플리케이션의 성능과 메모리 사용을 최적화하는 방법도 고려해야 합니다. 이 기사에서는 개발자가 일반적인 메모리 사용 및 성능 문제를 방지하는 데 도움이 되는 Vue 개발에 대한 몇 가지 예방 조치에 대해 설명합니다. 무한 루프 방지 구성 요소가 자체 상태를 지속적으로 업데이트하거나 구성 요소가 자체 하위 구성 요소를 계속 렌더링하는 경우 무한 루프가 발생할 수 있습니다. 이 경우 Vue의 메모리가 부족해 애플리케이션 속도가 매우 느려집니다. 이러한 상황을 방지하기 위해 Vue는 다음을 제공합니다.

WebSocket과 JavaScript를 사용하여 온라인 예약 시스템을 구현하는 방법 WebSocket과 JavaScript를 사용하여 온라인 예약 시스템을 구현하는 방법 Dec 17, 2023 am 09:39 AM

WebSocket과 JavaScript를 사용하여 온라인 예약 시스템을 구현하는 방법 오늘날의 디지털 시대에는 점점 더 많은 기업과 서비스에서 온라인 예약 기능을 제공해야 합니다. 효율적인 실시간 온라인 예약 시스템을 구현하는 것이 중요합니다. 이 기사에서는 WebSocket과 JavaScript를 사용하여 온라인 예약 시스템을 구현하는 방법을 소개하고 구체적인 코드 예제를 제공합니다. 1. WebSocket이란 무엇입니까? WebSocket은 단일 TCP 연결의 전이중 방식입니다.

JavaScript와 WebSocket: 효율적인 실시간 일기예보 시스템 구축 JavaScript와 WebSocket: 효율적인 실시간 일기예보 시스템 구축 Dec 17, 2023 pm 05:13 PM

JavaScript 및 WebSocket: 효율적인 실시간 일기 예보 시스템 구축 소개: 오늘날 일기 예보의 정확성은 일상 생활과 의사 결정에 매우 중요합니다. 기술이 발전함에 따라 우리는 날씨 데이터를 실시간으로 획득함으로써 보다 정확하고 신뢰할 수 있는 일기예보를 제공할 수 있습니다. 이 기사에서는 JavaScript 및 WebSocket 기술을 사용하여 효율적인 실시간 일기 예보 시스템을 구축하는 방법을 알아봅니다. 이 문서에서는 특정 코드 예제를 통해 구현 프로세스를 보여줍니다. 우리

간단한 JavaScript 튜토리얼: HTTP 상태 코드를 얻는 방법 간단한 JavaScript 튜토리얼: HTTP 상태 코드를 얻는 방법 Jan 05, 2024 pm 06:08 PM

JavaScript 튜토리얼: HTTP 상태 코드를 얻는 방법, 특정 코드 예제가 필요합니다. 서문: 웹 개발에서는 서버와의 데이터 상호 작용이 종종 포함됩니다. 서버와 통신할 때 반환된 HTTP 상태 코드를 가져와서 작업의 성공 여부를 확인하고 다양한 상태 코드에 따라 해당 처리를 수행해야 하는 경우가 많습니다. 이 기사에서는 JavaScript를 사용하여 HTTP 상태 코드를 얻는 방법과 몇 가지 실용적인 코드 예제를 제공합니다. XMLHttpRequest 사용

자바스크립트에서 insertBefore를 사용하는 방법 자바스크립트에서 insertBefore를 사용하는 방법 Nov 24, 2023 am 11:56 AM

사용법: JavaScript에서 insertBefore() 메서드는 DOM 트리에 새 노드를 삽입하는 데 사용됩니다. 이 방법에는 삽입할 새 노드와 참조 노드(즉, 새 노드가 삽입될 노드)라는 두 가지 매개 변수가 필요합니다.

See all articles