Google I/O를 시청해 주셔서 감사합니다. 주문형 콘텐츠를 확인하세요.

이 페이지는 Cloud Translation API를 통해 번역되었습니다.

부록

원형 상속

null와 undefined를 제외하고 각 프리미티브 데이터 유형에는 prototype - 작업을 위한 메서드를 제공하는 해당 객체 래퍼 있습니다. 프리미티브에서 메서드 또는 속성 조회가 호출되면 JavaScript는 백그라운드에서 프리미티브를 래핑하고 는 래퍼 객체에 대한 속성 조회를 수행합니다.

예를 들어 문자열 리터럴에는 그 자체의 메서드가 없지만, 상응하는 String 객체 덕분에 .toUpperCase() 메서드가 호출됩니다. 래퍼:

"this is a string literal".toUpperCase();
> THIS IS A STRING LITERAL

이를 프로토타입 상속이라고 하며 속성과 메서드를 상속합니다. 값을 제공합니다.

Number.prototype
> Number { 0 }
>  constructor: function Number()
>  toExponential: function toExponential()
>  toFixed: function toFixed()
>  toLocaleString: function toLocaleString()
>  toPrecision: function toPrecision()
>  toString: function toString()
>  valueOf: function valueOf()
>  <prototype>: Object { … }

단순히 정의하는 대신 이러한 생성자를 사용하여 프리미티브를 만들 수 있습니다. 가치를 매깁니다. 예를 들어 String 생성자를 사용하면 문자열 리터럴이 아닌 문자열 객체: 문자열을 포함할 뿐만 아니라 값이 포함되지만 생성자의 상속된 모든 속성과 메서드가 포함됩니다.

const myString = new String( "I'm a string." );

myString;
> String { "I'm a string." }

typeof myString;
> "object"

myString.valueOf();
> "I'm a string."

대부분의 경우 결과 객체는 이전에 사용한 값처럼 정의할 수 있습니다 예를 들어 new Number 생성자는 모든 메서드와 Number 프로토타입의 속성이 있는 경우 숫자 리터럴에서와 마찬가지로 다음과 같습니다.

const numberOne = new Number(1);
const numberTwo = new Number(2);

numberOne;
> Number { 1 }

typeof numberOne;
> "object"

numberTwo;
> Number { 2 }

typeof numberTwo;
> "object"

numberOne + numberTwo;
> 3

이러한 생성자는 거의 사용하지 않아도 됩니다. JavaScript의 내장 API가 프로토타입 상속은 실질적인 이점을 제공하지 않습니다. 생성 중 생성자를 사용하는 프리미티브를 사용해도 예기치 않은 결과가 발생할 수 있습니다. 결과는 단순한 리터럴이 아닌 객체입니다.

let stringLiteral = "String literal."

typeof stringLiteral;
> "string"

let stringObject = new String( "String object." );

stringObject
> "object"

이로 인해 엄격한 비교 연산자의 사용이 복잡해질 수 있습니다.

const myStringLiteral = "My string";
const myStringObject = new String( "My string" );

myStringLiteral === "My string";
> true

myStringObject === "My string";
> false

자동 세미콜론 삽입 (ASI)

스크립트를 파싱하는 동안 자바스크립트 인터프리터는 생략된 경우를 수정하기 위해 자동 세미콜론 삽입 (ASI) 세미콜론은 포함되지 않습니다. JavaScript 파서가 허용되지 않는 토큰을 발견하면 는 다음 조건 중 하나 이상을 충족하는 경우에 한합니다.

이 토큰은 줄바꿈으로 이전 토큰과 구분됩니다.
토큰은 }입니다.
이전 토큰은 )이며 삽입된 세미콜론은 끝부분입니다. do...while 문의 세미콜론

자세한 내용은 ASI 규칙을 참조하세요.

예를 들어 다음 문 다음에 세미콜론을 생략해도 구문 오류:

const myVariable = 2
myVariable + 3
> 5

그러나 ASI는 같은 줄에 있는 여러 문을 설명할 수 없습니다. 만약 같은 줄에 둘 이상의 문을 작성하는 경우 다음과 같이 구분해야 합니다. 세미콜론:

const myVariable = 2 myVariable + 3
> Uncaught SyntaxError: unexpected token: identifier

const myVariable = 2; myVariable + 3;
> 5

ASI는 오류를 수정하려는 시도이며 일종의 구문적 유연성이 아닙니다. 자바스크립트로 변환합니다. 필요한 경우 세미콜론을 사용하여 올바른 코드를 생성합니다.

엄격 모드

JavaScript 작성 방식을 제어하는 표준은 지금까지 모두 고려한 것입니다. 새로운 변경사항이 JavaScript의 예상 동작은 이전 웹사이트에서 오류를 일으키지 않도록 해야 합니다.

ES5는 JavaScript 시맨틱스와 관련된 몇 가지 오래된 문제를 '엄격 모드'를 도입하여 기존 구현을 중단하고 선택 방법 보다 제한적인 언어 규칙 집합으로 변환하고 개별 함수를 사용하는 것이 좋습니다 엄격 모드를 사용 설정하려면 문자열 리터럴을 사용합니다. "use strict", 스크립트 첫 줄의 세미콜론 또는 함수:

"use strict";

function myFunction() {
  "use strict";
}

엄격 모드는 특정 '안전하지 않음'을 방지합니다. 지원 중단된 기능, throws '음소거'가 아닌 규정하고 있으며 향후 언어 기능과 충돌할 수 있는 문법을 제공합니다. 예를 들어, 변수 범위에 대한 설계 결정 개발자가 실수로 '오염'하거나 전역 범위를 포함하는 컨텍스트에 관계없이 var 키워드:

(function() {
  mySloppyGlobal = true;
}());

mySloppyGlobal;
> true

최신 JavaScript 런타임은 사용하는 웹사이트를 실수로 또는 고의로 망가뜨리는 행위 대신 최신 JavaScript는 개발자가 엄격 모드는 기본적으로 다음과 같은 새로운 언어 기능을 제공합니다.

(function() {
    "use strict";
    mySloppyGlobal = true;
}());
> Uncaught ReferenceError: assignment to undeclared variable mySloppyGlobal

"use strict"을 문자열 리터럴. 템플릿 리터럴 (use strict)이 작동하지 않습니다. 또한 앞에 "use strict"를 포함해야 합니다. 실행 가능한 코드가 생성됩니다. 그렇지 않으면 인터프리터가 무시합니다.

(function() {
    "use strict";
    let myVariable = "String.";
    console.log( myVariable );
    sloppyGlobal = true;
}());
> "String."
> Uncaught ReferenceError: assignment to undeclared variable sloppyGlobal

(function() {
    let myVariable = "String.";
    "use strict";
    console.log( myVariable );
    sloppyGlobal = true;
}());
> "String." // Because there was code prior to "use strict", this variable still pollutes the global scope

참조 기준, 값 기준

객체의 속성을 포함한 모든 변수는 함수 매개변수 및 배열, set 또는 map은 프리미티브나 값 또는 참조 값입니다.

원시 값이 한 변수에서 다른 변수로 할당되면 엔진이 해당 값의 사본을 만들어 변수에 할당합니다.

객체 (클래스 인스턴스, 배열, 함수)를 해당 객체의 새 복사본을 만드는 대신, 변수에는 해당 객체의 새 복사본을 만드는 대신 객체의 메모리 내 저장된 위치를 참조합니다. 따라서 변수에 의해 참조되는 객체는 참조되는 객체를 변경할 뿐 아니라 해당 변수에 포함된 값입니다. 예를 들어 새 포드를 초기화하는 경우 변수를 객체 참조가 포함된 변수로 만든 다음 새 변수를 사용하여 해당 객체에 속성을 추가하면 속성과 해당 값이 추가됩니다. 를 원래 객체에 추가합니다.

const myObject = {};
const myObjectReference = myObject;

myObjectReference.myProperty = true;

myObject;
> Object { myProperty: true }

이는 객체를 변경할 때뿐만 아니라 엄격한 객체 간의 엄격한 동등성을 위해서는 두 변수가 모두 동일한 객체를 참조하여 true로 평가합니다. 참조 불가 구조적으로 동일한 경우에도 서로 다른 객체에 적용됩니다.

const myObject = {};
const myReferencedObject = myObject;
const myNewObject = {};

myObject === myNewObject;
> false

myObject === myReferencedObject;
> true

메모리 할당

JavaScript는 자동 메모리 관리를 사용하므로 개발 과정에서 명시적으로 할당되거나 할당이 취소될 수 있습니다. 동안 Kubernetes Engine의 메모리 관리에 대한 접근 방식은 이 모듈의 범위, 메모리 할당 방법을 이해하면 사용할 수 있습니다.

두 개의 '영역' 메모리 내: '스택' 그리고 '힙'입니다. 스택은 원시 값과 객체에 대한 참조인 정적 데이터는 이 데이터를 저장하기 위해 필요한 일정량의 공간이 할당될 수 있으며, 스크립트가 실행됩니다. 힙은 동적으로 할당된 공간이 필요한 객체를 저장함 실행 중에 크기가 변경될 수 있기 때문입니다. 프로세스에 의해 메모리가 확보됨 '가비지 컬렉션'이라고 하는 이는 참조가 없는 객체를 사용할 수 있습니다

기본 스레드

JavaScript는 "동기식" 즉, 하나의 작업만 실행할 수 있습니다. 할 수 있습니다. 이러한 순차 실행 컨텍스트를 기본 스레드라고 합니다.

기본 스레드는 HTML 파싱과 같은 다른 브라우저 작업에 의해 공유됩니다. CSS 애니메이션 실행 및 간단한 사용자 상호작용 (예: 텍스트 강조 표시)부터 (예: 양식 요소와의 상호작용) 브라우저 공급업체에서 기본 스레드에서 수행하는 작업을 최적화하는 방법이지만 더 복잡합니다. 스크립트가 여전히 기본 스레드의 리소스를 너무 많이 사용하여 확인할 수 있습니다.

일부 작업은 Cloud Shell에서 웹 워커라고 하는 백그라운드 스레드를 지원합니다. 다음과 같은 몇 가지 제한사항이 있습니다.

작업자 스레드는 독립형 JavaScript 파일에서만 작동할 수 있습니다.
브라우저 창과 UI에 대한 액세스가 심각하게 축소되었거나 전혀 없습니다.
기본 스레드와 통신할 수 있는 방법이 제한됩니다.

이러한 제약으로 인해 머신러닝은 집중적이고 리소스 집약적인 작업에 적합하며 그렇게 하지 않으면 기본 스레드를 차지할 수 있습니다.

호출 스택

"실행 컨텍스트"를 관리하는 데 사용되는 데이터 구조, 즉 능동적으로 실행되는데 이는 호출 스택이라는 목록입니다 (종종 '스택'). 스크립트가 처음 실행될 때 JavaScript 인터프리터는 '전역 실행 컨텍스트'를 생성합니다. 호출 스택으로 푸시합니다. 해당 전역 컨텍스트 내에서 한 번에 하나씩 실행되며 있습니다. 인터프리터가 '함수 실행 컨텍스트'를 푸시합니다. 해당 호출을 전역 실행 컨텍스트를 일시중지하고 함수를 실행합니다. 실행할 수 있습니다

함수가 호출될 때마다 해당 호출에 대한 함수 실행 컨텍스트는 스택 상단, 현재 실행 컨텍스트 바로 위에 푸시됩니다. 호출 스택은 '선입 선출' 기반으로 하며, 이는 스택에서 가장 높은 최근 함수 호출이 실행되고 문제가 해결될 때까지 확인할 수 있습니다 이 함수가 완료되면 인터프리터는 이를 삭제합니다. 호출 스택 및 해당 함수 호출이 포함된 실행 컨텍스트에서 추출 다시 스택에서 가장 높은 항목이 되고 실행을 재개합니다.

이러한 실행 컨텍스트는 실행에 필요한 모든 값을 캡처합니다. 그들은 이 API의 범위 내에서 사용할 수 있는 변수와 함수를 함수를 기반으로 하며, 함수 컨텍스트에서 this 키워드

이벤트 루프 및 콜백 큐

이렇게 순차적으로 실행하면 콜백이 포함된 비동기 작업이 서버로부터 데이터 가져오기, 사용자 상호작용에 응답하기, setTimeout 또는 setInterval로 설정된 타이머를 기다리는 경우 작업을 완료하거나 예기치 않게 작업을 중단할 때까지 기본 스레드에 대한 현재 실행 컨텍스트, 콜백 함수의 실행 컨텍스트 스택에 추가됩니다 이 문제를 해결하기 위해 JavaScript는 이벤트 기반 '동시 실행 모델' 사용 '이벤트 루프'로 구성되어 및 '콜백 큐' ('메시지 큐'라고도 함)

비동기 작업이 메인 스레드에서 실행될 때 콜백은 함수의 실행 컨텍스트는 호출 스택을 표시합니다. 이벤트 루프는 경우에 따라서는 리액션으로, 호출 스택 및 콜백 큐의 상태를 폴링합니다. 만약 콜백 대기열 및 이벤트 루프가 호출 스택이 비어 있다고 판단한 다음 콜백 큐의 태스크가 한 번에 하나씩 스택으로 푸시되어 실행됩니다