JavaScript에 대한 심층적인 대화

TypeScript가 JavaScript를 대체할까요?

1. TypeScript는 오랫동안 변수, 함수 매개변수 등에 대한 유형 제한이 없었기 때문에 유형 사고만 제공합니다. 이로 인해
2. 나중에 JavaScript에 일련의 유형 제한 체계가 나타났습니다
.
3. 지역 사회.
   2014년에 Facebook은 JavaScript에서 유형 검사를 수행하는 흐름을 시작했습니다.

3. Type은 JavaScript에서 유래되었으며

JavaScript 엔진이 필요한 이유는 무엇입니까

실제로 실행하려면 고급 프로그래밍 언어가 필요합니다. , 우리가 작성한 JavaScript가 브라우저 또는 노드 실행으로 전달되는지 여부에 관계없이 결국 CPU에 의해 실행되어야 하므로 JavaScript 코드를 CPU 명령으로 변환하여

관계를

브라우저 커널과 JS 엔진 사이에서

WebKit은 실제로 두 부분으로 구성됩니다.
WebCore: HTML 구문 분석, 레이아웃, 렌더링 및 기타 관련 작업을 담당합니다.
JavaScriptCore: JavaScript 코드

변수 환경을 구문 분석 및 실행하고 VO(Variable Object) 변수 개체를 기록합니다

. 최신 ECMA 표준에서 VO에는 이미 변수 환경 VE

GO(Clobal Object) 전역 개체 및 전역 실행 컨텍스트

AO(Activation Object)

))에는 함수 실행 컨텍스트

메모리 관리 및 클로저

1. 인식 메모리 관리가

JS 메모리 관리

JavaScript는 변수를 정의할 때 메모리를 할당합니다.
JS는 실행 중에 기본 데이터 유형에 대한 메모리를 스택 공간에 직접 할당합니다.
JS의 복잡한 데이터 유형에 대한 메모리 할당은 힙 메모리에 공간을 열고 이 공간의 포인터 반환 값 변수를 참조합니다.

JS의 가비지 수집

메모리 크기가 제한되어 있으므로 메모리가 더 이상 없을 때입니다. 더 많은 메모리 공간을 확보하려면 이를 해제해야 합니다.

영어로 Garbage Collection은 Garbage Collection 또는 GC입니다.
더 이상 사용되지 않는 객체의 경우 더 많은 메모리 공간을 확보하기 위해 재활용해야 합니다. Java 런타임 환경 JVM 및 JavaScript 런타임 환경 js 엔진과 같은 언어 런타임 환경은 메모리 가비지 수집기를 사용합니다. 가비지 수집기, 줄여서 GC라고도 부르므로 많은 곳에서 GC가 실제로 가비지 수집기를 참조하는 것을 볼 수 있습니다.

심층 폐쇄는

컴퓨터 과학에서 폐쇄의 정의입니다(Wikipedia).
클로저(영어: Closure), 어휘 폐쇄(Lexical Closure) 또는 기능 폐쇄(function closures)라고도 함.
일류 기능을 지원하는 프로그래밍 언어에서 어휘 바인딩을 구현하는 기술입니다.
구현에서 클로저는 기능 및 관련 환경(기호 조회 테이블과 동일)을 저장하는 구조입니다.
클로저와 함수의 가장 큰 차이점은 클로저를 캡처할 때 자유 변수가 캡처 시 결정되므로 캡처 시 컨텍스트를 벗어나더라도 평소대로 실행할 수 있다는 것입니다

. 클로저 개념은 1960년대에 등장했습니다. 클로저를 구현한 최초의 프로그램은 Scheme이므로 JavaScript에 클로저가 있는 이유를 이해할 수 있습니다.
JavaScript의 많은 디자인은 Scheme에서 파생되기 때문입니다.

JavaScript 클로저에 대한 MDN의 설명을 살펴보겠습니다.
함수는 주변 상태(어휘적 환경)에 대한 참조와 함께 번들로 제공됩니다(또는 함수가 참조로 둘러싸여 있음). 즉, 클로저를 사용하면 내부 함수 내에서 해당 함수에 액세스할 수 있습니다. 그것의 외부 기능;
JavaScript에서는 함수가 생성될 때마다 함수가 생성되는 동시에 클로저도 생성됩니다

.
    변수 이름 = '왜'
    변수 연령 = 18
    함수 바() {
        console.log('바',이름)
    }
    return bar}var fun = foo()fun()

요약:
일반 함수 함수는 외부 레이어가 작동하는 자유 변수에 액세스할 수 있는 경우 클로저입니다.
넓은 관점에서 보면 JavaScript의 함수는 클로저입니다.
좁은 관점에서 보면 JavaScript의 함수가 외부 변수에 액세스하는 경우 이는

전역 범위를

가리키는

브라우저: 창
노드 환경: {}

화살표 함수 화살표 함수

화살표 함수는 ES6 이후에 추가된 함수 작성 방법으로, 함수 표현식보다 더 간결합니다.
화살표 함수는 this 및 인수 속성을 바인딩하지 않습니다.
화살표 함수는 생성자로 사용할 수 없습니다(new와 함께 사용할 수 없으며 오류가 발생합니다).

인수 이해

인수는 함수에 전달되는 매개변수에 해당하는 (유사) 배열(배열과 유사한)

JavaScript 순수 함수

함수를

순수 함수에 대한 Wikipedia 정의

도 있습니다.

프로그래밍에서 함수가 다음 조건을 충족하면 이 함수를 순수 함수라고 합니다. 함수의 입력 값이 동일하면 함수의 출력은 다른 숨겨진 정보와 관련이 없습니다. 또는 입력 값 이외의 상태 I/O 장치에 의해 생성된 외부 출력과 관련되지 않은 기능은 "이벤트 트리거", 출력 장치의 출력 유발 또는 출력 값 이외의 객체 내용 변경과 같은 의미상 관찰 가능한 기능 부작용을 가질 수 없습니다. . 요약:
결정된 입력은 특정 출력을 생성해야 합니다.
함수 실행 중에는 부작용이 발생할 수 없습니다

.

JavaScript 커링

커링은 함수형 프로그래밍에서도 매우 중요한 개념입니다. Wikipedia에서는 다음과 같이 설명합니다.
컴퓨터 과학에서 커링(Currying), 커링(Currying)이라고도 번역되는 커링(Currying)은 여러 매개변수를 받아들이는 함수로, 단일 매개변수(원래 함수의 첫 번째 매개변수)를 받아 반환하는 함수가 된다. 남은 인수를 입력하고 결과를 반환합니다. 커리 클레임: 특정 인수를 수정하면

나머지 인수를 허용하는 함수 요약을 얻게 됩니다.
매개변수 중 일부만 함수에 전달하여 호출하고, 함수 영역을 반환하여 나머지 매개변수를 처리하도록 합니다.
이 프로세스를 커링이라고 합니다.

커링이 필요한 이유는 다음과 같습니다.
함수형 프로그래밍에서는

function foo(x,y,c) {
    x + y + c를 반환합니다.
}
console.log(foo(10,20,30))

//카리 함수 sum(x) {
    반환 함수(y) {
        반환 함수(z) {
            x + y + z를 반환
        }
    }
}
var a = 합계(10)(20)(30)
console.log(a)

//커링 단순화 var sum2 = x => y => z => {
    x + y + z를 반환
}
console.log(sum2(10)(20)(30))

결합된 함수Combined

function(Compose) 함수는 JavaScript 개발에서 함수를 사용하기 위한 기술 및 모드입니다.
예를 들어, 이제 특정 데이터에 대해 함수를 호출하고 fn1과 fn2 두 함수를 실행해야 합니다. 이 두 함수는 매번 두 함수를 호출해야 하는 경우 작업이 반복적으로 나타납니다. 이 두 함수를 결합하여 자동으로 차례로 호출하려면?

과정

이라고

불리는 함수들의 조합입니다

.

with

문은 혼동 오류 및 호환성 문제의 원인이 될 수 있으므로 사용하지 않는 것이 좋습니다.

'}

// var 메시지 = "hello world"

함수 foo() {
함수 표시줄() {
     와(obj2) {
          console.log(메시지)
     }
}
술집()
}
foo()

eval 함수

eval은 수신 문자열을 JavaScript 코드로 실행할 수 있는 특수 함수입니다.

var strFn = 'var message = "Hello world" console.log(message);';
   eval(strFn)

개발 시 eval을 사용하지 않는 것이 좋습니다.
평가 코드의 가독성이 매우 낮습니다(코드 가독성은 고품질 코드의 중요한 원칙입니다).
eval은 문자열이므로 실행 중에 변조될 수 있으며 이로 인해 공격을 받을 위험이 있습니다.
eval의 실행은 JS 인터프리터를 거쳐야 하며 JS 엔진에 의해 최적화되어야 합니다.

엄격 모드 엄격

모드는 코드가 암시적으로 "부주의한 모드"에서 벗어나도록 만드는 제한적인 JavaScript 모드입니다.
 엄격 모드를 지원하는 브라우저가 코드에서 엄격 모드를 감지하면 보다 엄격한 방식으로 코드를 모니터링하고 실행합니다. 엄격 모드는 Js 엔진이 더 많은 최적화를 수행할 수 있도록 오류를 발생시켜 원래의 자동 오류를 제거합니다. 코드를 주기적으로 실행할 때(특수 구문을 처리할 필요 없음)

"use strict"; // 엄격 모드 켜기 var message = "hello world" console.log(message)

엄격 모드 제한 <br/ > 여기서는 몇 가지에 대해 이야기합니다. 엄격 모드의 엄격한 구문 제한:
JavaScript는 초보 개발자가 쉽게 시작할 수 있도록 설계되었으므로 잘못된 구문이 정상적으로 구문 분석되는 것으로 간주되지만 엄격 모드에서는 이러한 실수를 오류로 처리하여

1. 예상치 못한 오류를 빠르게 발견하고 수정할 수 있습니다. 전역 변수

// 1. 실수로 전역 변수를 생성했습니다. message = "Hello world"
    console.log(메시지)

    함수 foo() {
        나이=20
    }
    푸()
    Console.log(age)

2. 엄격 모드는 때때로 자동으로 실패(참고: 오류가 보고되지 않으며 효과가 없음) 할당 작업이 예외를 발생시키는 원인이 됩니다.

//Default static error true.name ='xiaoluo';
NaN = 123

3. 엄격 모드에서 삭제할 수 없는 속성을 삭제하려고 합니다.
4. 엄격 모드에서는 함수 매개변수의 이름이 같은 것을 허용하지 않습니다.

// 함수 매개변수의 이름이 같은 것은 허용되지 않습니다. function foo(x,y,x) {
    console.log(x,y,x)}foo(10,20,30)는

5. 0의 8진수 구문을 허용하지 않습니다.

var num = 0o123 // 8진수 var num2 = 0x123 // 16진수 console.log(num,num2)

6. In

var obj2 = {name:'Tom',age:18,message:'obj2'}

6. 와 함께 사용하는 엄격 모드는

와(obj2) {
      console.log(메시지)
     }

상위 계층에 대한

7. 변수 var를 참조하지 않습니다.

평가(strFn)
console.log(message)

8. 엄격 모드에서 이 바인딩은 기본적으로 객체로 변환되지 않습니다. 엄격 모드에서 자체 실행 함수는 정의되지 않은

함수 foo() {를

    console.log(this) //정의되지 않음
}
푸()