추천 무료 학습: javascript 학습 튜토리얼
1. JavaScript란
1-1. JavaScript와 ECMAScript는 기본적으로 동의어이지만 JavaScript ECMA-262가 정의한 것보다 훨씬 더 많습니다. 완전한 JavaScript 구현에는 다음이 포함됩니다.
Core(ECMAScript)
ECMAScript는 이 사양에서 설명하는 모든 측면을 구현하는 언어의 이름일 뿐입니다
. JavaScript는 ECMAScript를 구현하고 Adobe ActionScript는
1-2, DOM
문서 객체 모델(DOM, Document Object Model)은 HTML에서 확장 XML을 사용하기 위한 API(애플리케이션 프로그래밍 인터페이스)입니다. DOM은 전체 페이지를 계층적 노드 집합으로 추상화합니다. HTML 또는 XML 페이지의 각 구성 요소는 서로 다른 데이터를 포함하는 노드입니다.
DOM을 사용하면 개발자는 문서를 나타내는 트리를 생성하여 웹 페이지의 내용과 구조를 원하는 대로 제어할 수 있습니다. DOM API를 사용하면 노드를 쉽게 삭제, 추가, 교체 및 수정할 수 있습니다.IE3 및 Netscape Navigator 3은 브라우저 창 액세스 및 작동을 지원하는 Browser Object Model(BOM) API를 제공합니다. BOM을 사용하여 개발자는 브라우저에 표시되는 내용 이외의 페이지 부분을 제어할 수 있습니다. BOM의 정말 독특한 점이자 확실히 가장 문제가 되는 점은 관련 표준이 없는 유일한 JavaScript 구현이라는 것입니다. HTML5는 이러한 상황을 변화시킵니다. 이 HTML 버전은 공식 사양의 형태로 가능한 한 많은 BOM 기능을 다룹니다. HTML5의 등장으로 인해 BOM과 관련된 이전의 많은 문제가 해결되었습니다.
일반적으로 BOM은 주로 브라우저 창과 하위 창(프레임)을 대상으로 하지만 사람들은 일반적으로 BOM 범위 내에 브라우저별 확장자를 포함합니다. 다음은 이러한 확장 기능입니다.
새 브라우저 창을 팝업하는 기능
script 요소요소는 Netscape에서 만들어졌으며 Netscape Navigator 2에서 처음 구현되었습니다 . 나중에 이 요소는 공식적으로 HTML 사양에 추가되었습니다. 스크립트 요소에는 아래 나열된 8개의 속성이 있습니다.
비동기: 선택 사항. 스크립트 다운로드가 즉시 시작되어야 하지만 리소스 다운로드 또는 다른 스크립트 로드 대기와 같은 다른 페이지 작업을 막을 수는 없음을 나타냅니다. 외부 스크립트 파일에만 유효합니다. script元素
将JavaScript插入HTML的主要方法是使用 script 元素。这
个元素是由网景公司创造出来，并最早在Netscape Navigator 2中实现
的。后来，这个元素被正式加入到HTML规范。 script 元素有下
列8个属性。
async
src : 선택사항. 실행할 코드가 포함된 외부 파일을 나타냅니다.
유형 : 선택사항. 언어 대신 코드 블록에 있는 스크립팅 언어의 콘텐츠 유형(MIME 유형이라고도 함)을 나타냅니다.
스크립트에 포함된 코드는 위에서 아래로 해석됩니다
2-2,
src 속성을 사용하는 스크립트 요소는 더 이상 스크립트 및 /script 태그에 다른 JavaScript 코드를 포함해서는 안 됩니다. 둘 다 제공되면 브라우저는 인라인 코드를 무시하고 스크립트 파일을 다운로드하여 실행합니다.
스크립트 요소의 가장 강력하고 논란이 많은 기능 중 하나는 외부 도메인의 JavaScript 파일을 포함할 수 있다는 것입니다. img 요소와 마찬가지로 script 요소의 src 속성은 완전한 URL이 될 수 있으며 이 URL이 가리키는 리소스는 해당 URL이 포함된 HTML 페이지와 동일한 도메인에 있을 수 없습니다
2-3, 문서 모드
문서 모드를 doctype으로 전환하여 사용할 수 있습니다. 초기 문서 모드에는 혼합 모드(특이 모드)와 표준 모드(표준 모드)의 두 가지가 있습니다. 전자는 IE를 IE5처럼 만들고(일부 비표준 기능 지원), 후자는 IE가 표준을 준수하는 동작을 하도록 만듭니다. 두 모드의 주요 차이점은 CSS를 통해 렌더링되는 콘텐츠에만 있지만 JavaScript에는 몇 가지 관련 효과 또는 부작용도 있습니다. 이러한 부작용은 이 책에서 자주 언급될 것입니다.
IE가 문서 모드 전환을 처음 지원한 후 다른 브라우저도 이를 따랐습니다. 브라우저가 널리 구현되면서 세 번째 문서 모드인 준표준 모드(거의
표준 모드)가 등장했습니다. 이 모드의 브라우저는 많은 표준 기능을 지원하지만 표준만큼 엄격하지는 않습니다. 주요 차이점은 이미지 요소 주변의 공백이 처리되는 방식입니다(테이블에서 이미지를 사용할 때 가장 눈에 띕니다).
문서 시작 부분의 doctype 선언을 생략하면 모든 브라우저에서 무차별 모드가 켜집니다. 혼합 모드는 브라우저마다 매우 다르기 때문에 이 합의는 불합리합니다. 블랙 기술을 사용하지 않으면 기본적으로 브라우저 일관성이 전혀 없습니다.
2-4, noscript 요소
초기 브라우저가 JavaScript를 지원하지 않는다는 문제를 고려하여, 우아한 페이지 저하에 대한 솔루션이 필요합니다. 결국 해당 요소가 등장하여 JavaScript를 지원하지 않는 브라우저에 대체 콘텐츠를 제공하는 데 사용되었습니다. 오늘날의 브라우저는 이미 100% JavaScript를 지원하지만 이 요소는 JavaScript를 비활성화하는 브라우저에서 여전히 사용됩니다.
요소에는
3. 문법 기본 사항
3-1, 문법
가장 먼저 알아야 할 점은 ECMAScript의 모든 내용은 대소문자를 구분한다는 것입니다. 변수, 함수 이름, 연산자 등 대소문자를 구분합니다. 즉, test 변수와 Test 변수는 서로 다른 두 변수입니다. 마찬가지로 typeof는 키워드이기 때문에 함수 이름으로 사용할 수 없습니다(나중에 자세히 설명). 그러나 Typeof는 완벽하게 유효한 함수 이름입니다.
3-2. 식별자
소위 식별자는 변수, 함수, 속성 또는 함수 매개변수의 이름입니다. 식별자는 다음 문자 중 하나 이상으로 구성될 수 있습니다.
식별자의 문자는 확장 ASCII 또는 À 및 Æ와 같은 유니코드 알파벳 문자일 수 있습니다(그러나 이는 권장되지 않음).
관례에 따라 ECMAScript 식별자는 카멜 표기법을 사용합니다. 즉, 첫 번째 단어의 첫 글자는 소문자이고 각 후속 단어의 첫 글자는 대문자입니다.
3-3, strict 모드
ECMAScript 5는 strict를 추가합니다. 모드(엄격 모드) 개념. 엄격 모드는 다른 JavaScript 구문 분석 및 실행 모델입니다. ECMAScript 3의 일부 비표준 작성 방법은 이 모드에서 처리되며 안전하지 않은 활동
3-4, 키워드 및 예약어
ECMA에 대해 오류가 발생합니다. -262는 제어문의 시작과 끝을 나타내거나 특정 작업을 수행하는 등 특별한 용도로 사용되는 예약된 키워드 집합을 설명합니다.
ECMA-262 6판에 지정된 모든 키워드:
break do in typeof case else instanceof var catch export new void class extends return while const finally super with continue for switch yield debugger function this default if throw delete import try
사양에는 식별자나 속성 이름으로도 사용할 수 없는 미래 예약어 집합입니다. 예약어는 언어에서 특별한 목적이 없지만 키워드
3-5로 향후 사용을 위해 예약되어 있습니다. 변수
ECMAScript 변수는 느슨한 형식이므로 변수를 사용하여 모든 유형의 데이터를 저장할 수 있습니다. 각 변수는 임의의 값을 보유하는 데 사용되는 명명된 자리 표시자에 지나지 않습니다. 변수를 선언하는 키워드는 var, const, let 3가지가 있습니다. 그 중 var는 CMAScript 모든 버전에서 사용할 수 있고, const와 let은 ECMAScript 6 이상 버전
3-6, var 키워드
에서만 사용할 수 있습니다.var 선언 범위
중요한 문제는 var 연산자를 사용하여 정의된 변수가 해당 변수를 포함하는 함수의 지역 변수가 된다는 것입니다. 예를 들어, 함수 내에서 변수를 정의하기 위해 var를 사용한다는 것은 함수가 종료될 때 변수가 소멸된다는 것을 의미합니다.
var 선언 승격
var를 사용할 때 다음 코드는 오류를 보고하지 않습니다. 이 키워드를 사용하여 선언된 변수는 자동으로 함수 범위의 최상위로 승격되기 때문입니다
3-7. let 선언
let은 var와 유사한 기능을 가지고 있지만 매우 중요한 차이점이 있습니다. 가장 분명한 차이점은 let 선언의 범위는 블록 범위이고 var 선언의 범위는 함수 범위라는 것입니다.
임시 데드 존
let과 var의 또 다른 중요한 차이점은 let으로 선언된 변수가 범위에서 승격되지 않는다는 것입니다.
전역 선언
var 키워드와 달리 let을 사용하여 전역 범위에서 선언한 변수는 창 객체의 속성이 되지 않습니다(var로 선언한 변수)
조건부 선언
var를 사용하여 변수를 선언하는 경우 선언이 호이스팅되면 JavaScript 엔진은 자동으로 중복 선언을 범위 상단의 단일 선언으로 병합합니다. let의 범위는 블록이므로 이전에 let을 사용하여 동일한 이름의 변수가 선언되었는지 확인하는 것이 불가능하며, 이전에 for 루프
let 선언 let이 나타나면 for 루프에 의해 정의된 반복 변수는 루프 본문 외부로 침투합니다.
const 선언
const의 동작은 기본적으로 let과 동일합니다. 유일한 중요한 차이점은 이를 사용하여 변수를 선언할 때 동시에 변수를 초기화해야 하며 const 선언을 수정해야 합니다. 변수는 런타임 오류를 일으킬 수 있습니다.
3-8, 선언 스타일 및 모범 사례
ECMAScript 6에는 범위와 의미 체계를 더 정확하게 선언할 수 있도록 언어에 대한 더 나은 지원을 객관적으로 제공하는 let 및 const가 추가되었습니다. JavaScript 커뮤니티는 수년 동안 이상하게 동작하는 vars로 인해 발생하는 다양한 문제로 인해 어려움을 겪어 왔습니다. 이 두 가지 새로운 키워드가 등장하면서 코드 품질을 향상시키는 데 도움이 되는 새로운 모범 사례가 점차 등장하고 있습니다.
4. 데이터 유형
ECMAScript에는 정의되지 않음, Null, 부울, 숫자, 문자열 및 기호의 6가지 간단한 데이터 유형(기본 유형이라고도 함)이 있습니다. 심볼(symbol)은 ECMAScript 6의 새로운 기능입니다. Object라는 복잡한 데이터 유형도 있습니다. 객체는 이름-값 쌍의 순서가 지정되지 않은 모음입니다. ECMAScript에서는 자신만의 데이터 유형을 정의할 수 없기 때문에 모든 값은 위에서 언급한 7가지 데이터 유형 중 하나로 표현될 수 있습니다. 7가지 데이터 유형만으로는 모든 데이터를 표현하기에는 부족한 것 같습니다. 하지만 ECMAScript의 데이터 유형은 매우 유연합니다. 하나의 데이터 유형을 여러 데이터 유형으로 사용할 수 있습니다
4-1.typeof 연산자
ECMAScript의 유형 체계가 느슨하기 때문에 데이터 유형을 결정하는 방법이 필요합니다. 어떤 변수라도. 여기서 typeof 연산자가 사용됩니다. 값에 typeof 연산자를 사용하면 다음 문자열 중 하나가 반환됩니다.
"정의되지 않음"은 값이 정의되지 않음을 의미합니다.
"부울"은 값이 부울 값임을 의미합니다.
" 숫자"는 값이 숫자 값임을 의미합니다.
"객체"는 값이 객체(함수 아님) 또는 null임을 의미합니다.
"함수"는 값이 함수임을 의미하고,
"기호"는 값이 기호임을 의미합니다.
4-2. 정의되지 않은 유형
정의되지 않은 유형은 하나의 값만 가지며, 이는 특수 값 undefed 입니다. var 또는 let을 사용하여 변수를 선언했지만 초기화되지 않은 경우 변수에 정의되지 않은 값을 할당하는 것과 같습니다. 초기화되지 않은 변수에 자동으로 정의되지 않은 값이 할당되지만 선언할 때 변수를 초기화하는 것이 좋습니다. 이렇게 하면 typeof가 "정의되지 않음"을 반환할 때 해당 변수가 선언되었지만 초기화되지 않았기 때문이 아니라 아직 선언되지 않았기 때문이라는 것을 알 수 있습니다.4-3. Null 유형
Null 유형에는 특수 값인 null 하나만 있습니다. 논리적으로 말하면 null 값은 null 개체 포인터를 나타내므로 typeof에 null을 전달하면 나중에 개체 값을 보유할 변수를 정의할 때 null로 초기화하고 사용하지 않는 것이 좋습니다. 다른 가치. 이렇게 하면 이 변수의 값이 null인지 확인하기만 하면 나중에 이 변수가 객체에 대한 참조로 다시 할당되는지 여부를 알 수 있습니다
항등 연산자(==)를 사용하여 null과 정의되지 않음을 비교하면 항상 true가 반환됩니다. 그러나 이 연산자는 비교를 위해 피연산자를 변환한다는 점에 유의하세요.
null과 정의되지 않음은 서로 관련되어 있지만 용도는 완전히 다릅니다. 앞에서 언급했듯이 변수 값을 명시적으로 undefine으로 설정할 필요는 없습니다. 하지만 null은 그렇지 않습니다. 변수가 객체를 보유하고 있고 보유할 그러한 객체가 없을 때마다 변수는 null로 채워져야 합니다. 이는 null이 null 개체에 대한 포인터라는 의미를 유지하고 정의되지 않은 것과 더욱 구별됩니다.
null은 거짓 값입니다. 따라서 필요한 경우 보다 간결한 방식으로 감지할 수 있습니다. 하지만 이 외에도 거짓일 가능성이 있는 값이 많이 있다는 점을 명심하세요. 따라서 탐지하려는 것은 false 값뿐만 아니라 리터럴 값인 null이라는 점을 분명히 해야 합니다.
4-4 부울 유형
Boolean(Boolean) 유형은 ECMAScript에서 가장 자주 사용되는 유형 중 하나입니다. 두 개의 리터럴 값: true 및 false. 이 두 부울 값은 숫자 값과 다르므로 true는 1과 같지 않고 false는 0과 같지 않습니다
참고: 부울 리터럴 true와 false는 대소문자를 구분하므로 True와 False(및 기타 혼합- 사례 형식)은 유효한 식별자이지만 부울 값은 아닙니다.
4-5, 숫자 유형
ECMAScript에서 가장 흥미로운 데이터 유형은 숫자일 것입니다. Number 유형은 IEEE 754 형식을 사용하여 정수 및 부동 소수점 값(일부 언어에서는 배정밀도 값이라고도 함)을 나타냅니다. 숫자 유형에 따라 숫자 리터럴 형식도 다릅니다.
부동 소수점 값
부동 소수점 값을 정의하려면 값에 소수점이 포함되어야 하며 소수점 뒤에 최소
한 자리가 있어야 합니다. 소수점 앞에 정수가 있을 필요는 없지만 권장됩니다.
값의 범위
메모리 제한으로 인해 ECMAScript는 전 세계의 모든 값 표현을 지원하지 않습니다. ECMAScript로 표현할 수 있는 최소값은 Number.MIN_VALUE에 저장됩니다. 대부분의 브라우저에서 표현할 수 있는 최대값은 1.797 693 134 862 315입니다. 브라우저.7e+308. 계산의 수치 결과가 JavaScript가 표현할 수 있는 범위를 초과하는 경우 해당 값은 자동으로 특별한 Infinity 값으로 변환됩니다. 표현 불가능한 음수는 -Infinity(음의 무한대)로 표시되고, 표현 불가능한 양수는 Infinity(양의 무한대)로 표시됩니다. 계산에서 양수 Infinity 또는 음수 Infinity 를 반환하는 경우 해당 값은 어떤 계산에서도 더 이상 사용할 수 없습니다. 이는 Infinity에는 계산에 사용할 수 있는 숫자 표현이 없기 때문입니다. 값이 유한한지(즉, JavaScript가 나타낼 수 있는 최소값과 최대값 사이) 확인하려면 isFinite() 함수
NaN
를 사용할 수 있습니다. NaN이라는 특수 값이 있는데, 이는 " 숫자 값이 아님" ”(숫자 아님), 숫자를 반환해야 하는 작업이 실패했음을 나타내는 데 사용됩니다(오류를 발생시키는 대신). 예를 들어 숫자를 0으로 나누면 일반적으로 다른 언어에서는 오류가 발생하여 코드 실행이 중단됩니다. 하지만 ECMAScript에서는 0, +0 또는 -0으로 나누면 NaN
숫자 변환
이 반환됩니다. 숫자가 아닌 값을 숫자 값으로 변환할 수 있는 3가지 함수가 있습니다: Number() , parseInt() 및 parseFloat( ) . Number()는 모든 데이터 유형에 사용할 수 있는 변환 함수입니다. 후자의 두 함수는 주로 문자열을 숫자 값으로 변환하는 데 사용됩니다. 동일한 매개변수에 대해 이 세 가지 기능은 서로 다른 작업을 수행합니다.
4-6, NaN
NaN이라는 특별한 값이 있는데, 이는 "숫자가 아님(Not aNumber)"을 의미합니다. 값을 반환해야 했던 작업이 실패했음을 나타내는 데 사용됩니다( 오류를 발생시키는 대신).
4-7. 숫자 변환
숫자가 아닌 값을 숫자 값으로 변환할 수 있는 함수는 Number(),parseInt(),parseFloat() 3가지가 있습니다. Number()는 모든 데이터 유형에 사용할 수 있는 변환 함수입니다. 후자의 두 함수는 주로 문자열을 숫자 값으로 변환하는 데 사용됩니다. 동일한 매개변수에 대해 이 세 가지 기능은 서로 다른 작업을 수행합니다. Number() 함수는 다음 규칙에 따라 변환을 수행합니다. 부울 값, true는 1로 변환되고 false는 0으로 변환됩니다.
숫자 값, 직접 반환됨. null 은 0을 반환합니다. 정의되지 않은 경우 NaN을 반환합니다.
4-8. 문자열 유형
문자열(문자열) 데이터 유형은 0개 이상의 16비트 유니코드 문자 시퀀스를 나타냅니다. 문자열은 큰따옴표("), 작은따옴표(') 또는 역따옴표(`)로 표시할 수 있습니다.
문자 리터럴
문자열 데이터 유형에는 인쇄할 수 없는 문자나 기타 목적 문자를 나타내는 데 사용되는 일부 문자 리터럴이 포함되어 있습니다.
문자열의 특성
ECMAScript의 문자열은 변경할 수 없습니다. 즉, 일단 생성되면 해당 값을 변경할 수 없습니다. 변수의 문자열 값을 수정하려면 먼저 원래 문자열을 삭제한 다음 다른 문자열을 저장해야 합니다.
문자열로 변환
값을 문자열로 변환하는 방법에는 두 가지가 있습니다. 첫 번째는 거의 모든 값을 반환하는 것입니다. 현재 값에 해당하는 문자열
템플릿 리터럴
ECMAScript 6에는 템플릿 리터럴을 사용하여 문자열을 정의하는 기능이 추가되었습니다. 작은따옴표나 큰따옴표를 사용하는 것과 달리 템플릿 리터럴은 개행 문자를 유지하고 여러 줄에 걸쳐 문자열을 정의할 수 있습니다
문자열 보간
템플릿 리터럴의 가장 일반적으로 사용되는 기능 중 하나는 문자열 보간을 지원하는 것입니다. 연속 에 하나 이상의 값을 삽입합니다. 기술적으로 말하면 템플릿 리터럴은 문자열이 아니라 특별한 JavaScript 구문 표현식이지만 평가 후 결과는 문자열입니다. 템플릿 리터럴은 정의되면 즉시 평가되고 문자열 인스턴스로 변환됩니다.
템플릿 리터럴 태그 함수
템플릿 리터럴은 태그 함수(태그 함수) 정의도 지원합니다. 보간 동작은 태그 기능을 통해 사용자 정의할 수 있습니다. 레이블 함수는 보간 토큰으로 구분된 템플릿과 각 표현식을 평가한 결과를 받습니다. 태그 함수 자체는 템플릿 리터럴(
원래 문자열
)에 접두사를 추가하여 사용자 정의 동작을 적용하는 일반 함수입니다. 템플릿 리터럴을 사용하면 원래 템플릿 리터럴 콘텐츠(예: 개행 문자 또는 유니코드 문자)를 직접 얻을 수도 있습니다. , 변환된 문자로 표시되지 않습니다. 이를 위해 기본 String.raw 태그 기능을 사용할 수 있습니다.
5. 연산자
ECMA-262는 수학 연산자(예: 추가, 빼기), 비트 연산자, 관계 연산자 및 항등 연산자 등 ECMAScript의 연산자는 문자열, 숫자, 부울 값, 심지어 객체를 포함한 다양한 값에 사용할 수 있다는 점에서 독특합니다. 객체에 적용될 때 연산자는 일반적으로 valueOf() 및/또는 toString() 메서드를 호출하여 계산 가능한 값을 얻습니다. 3.5.1 단항 연산자 하나의 값에만 작동하는 연산자를 단항 연산자라고 합니다. 단항 연산자는 ECMAScript에서 가장 간단한 연산자입니다.
5-1. 단항 연산자
2. 단항 덧셈과 뺄셈
단항 덧셈과 뺄셈 연산자는 대부분의 개발자에게 적합하지 않습니다. 고등학교 수학에서와 마찬가지로 ECMAScript에서도 동일한 목적을 가지고 있습니다. 단항 덧셈은 변수 앞에 더하기 기호(+)가 표시되며 값에 영향을 주지 않습니다. 5-2. 비트 연산자
비트 NOT 연산자는 물결표 기호를 사용합니다. (~)는 그 기능이 값의 보수를 반환하는 것임을 의미합니다. 비트별 NOT은 ECMAScript
Bitwise AND
비트 OR
비트별 XOR
왼쪽 시프트
부호 있는 오른쪽 시프트
부호 없는 오른쪽 시프트
논리적 NOT
논리 NOT 연산자는 느낌표( ! )로 표시되며 ECMAScript의 모든 값에 적용됩니다. 이 연산자는 적용되는 데이터 유형에 관계없이 항상 부울 값을 반환합니다. 논리 NOT 연산자는 먼저 피연산자를 부울 값으로 변환한 다음 이를 반전시킵니다.
Logical AND
Logical Or
곱셈 연산자
곱셈 연산자는 별표( * )로 표시되며, 계산에 사용할 수 있습니다. 두 값의 곱.
나누기 연산자
모듈로 연산자
6. 명령문
ECMA-262는 일부 명령문(흐름 제어 명령문이라고도 함)을 설명하며 ECMAScript의 구문 대부분은 명령문에 반영됩니다. 명령문은 일반적으로 하나 이상의 키워드를 사용하여 주어진 작업을 수행합니다. 명령문은 간단할 수도 있고 복잡할 수도 있습니다. 함수를 종료하라고 지시하는 것만큼 간단할 수도 있고, 반복적으로 실행될 명령을 나열하는 것만큼 복잡할 수도 있습니다.
6-1. do-while 문
do-while 문은 테스트 후 루프 문입니다. 즉, 루프 본문의 코드가 실행된 후에만 종료 조건이 평가됩니다. 즉, 루프 본문에 있는 코드가 한 번 이상 실행됩니다
while 문은 먼저 테스트되는 루프 문입니다. 즉, 종료 조건이 먼저 감지되고, 그런 다음 루프 본문의 코드가 실행됩니다. 따라서 while 루프 본문의 코드는 실행되지 않을 수 있습니다. 7. 함수
함수는 명령문을 캡슐화하고 언제 어디서나 실행할 수 있기 때문에 모든 언어의 핵심 구성 요소입니다. ECMAScript의 함수는 function 키워드, 매개변수 세트, 함수 본문을 사용하여 선언됩니다.ECMAScript의 함수는 값을 반환할지 여부를 지정할 필요가 없습니다. 모든 함수는 언제든지 return 문을 사용하여 함수의 값을 반환하고 그 뒤에 반환할 값을 반환할 수 있습니다.
함수 sum()은 두 값을 더하고 결과를 반환합니다. 함수에 반환 값이 있다는 return 문 외에는 특별한 선언이 없습니다. Strict 모드에는 함수에 대한 몇 가지 제한 사항이 있습니다.함수 이름을 eval 또는 인수로 지정할 수 없습니다.
함수의 매개 변수를 호출할 수 없습니다. eval 또는 인수;두 개 함수의 매개변수는 동일한 이름으로 호출될 수 없습니다.
8. 변수, 범위 및 메모리
4-1. 기본 값과 참조 값
ECMAScript 변수에는 기본 값과 참조 값이라는 두 가지 유형의 데이터가 포함될 수 있습니다. 원시값은 가장 단순한 데이터이고, 참조값은 여러 값으로 구성된 객체입니다.변수에 값을 할당할 때 JavaScript 엔진은 값이 기본 값인지 참조 값인지 확인해야 합니다. 이전 장에서는 정의되지 않음, Null, 부울, 숫자, 문자열 및 기호의 6가지 기본 값에 대해 설명했습니다. 원시 값을 보유하는 변수는 변수에 저장된 실제 값을 조작하기 때문에 값으로 액세스됩니다.
참조값은 메모리에 저장된 객체입니다. 다른 언어와 달리 자바스크립트는 메모리 위치에 대한 직접적인 접근을 허용하지 않기 때문에 객체가 위치한 메모리 공간에 직접적으로 동작할 수 없다. 객체를 조작할 때 실제로 조작되는 것은 실제 객체 자체가 아니라 객체에 대한 참조입니다. 이를 위해 참조 값을 보유하는 변수는 참조로 액세스됩니다. 참고: 많은 언어에서 문자열은 객체를 사용하여 표현되므로 참조 유형으로 간주됩니다. ECMAScript는 이 규칙을 위반합니다. 동적 속성 기본 값과 참조 값은 매우 유사한 방식으로 정의됩니다. 둘 다 변수를 생성한 다음 여기에 값을 할당합니다. 그러나 변수가 값을 보유한 후 해당 값으로 수행할 수 있는 작업은 상당히 다릅니다. 참조 값의 경우 해당 속성과 메서드를 언제든지 추가, 수정, 삭제할 수 있습니다.
매개변수를 값으로 전달하면 값이 로컬에 복사됩니다. 변수(즉, 명명된 매개변수 또는 ECMAScript 용어로 인수 객체의 슬롯)입니다. 매개변수를 참조로 전달하면 메모리의 값 위치가 지역 변수에 저장됩니다. 즉, 지역 변수에 대한 수정 사항이 함수 외부에 반영됩니다
정의에 따라 모든 참조 값은 Object의 인스턴스이므로 instanceof 연산자와 Object 생성자를 통해 감지된 모든 참조 값은 true를 반환합니다. 마찬가지로, 원시 값을 감지하기 위해 인스턴스를 사용하면 원시 값이 객체가 아니기 때문에 항상 false를 반환합니다.
함수 감지에 사용될 때 typeof 연산자는 "함수"도 반환한다는 점에 유의하세요. Safari(Safari 5까지) 및 Chrome(Chrome 7까지)에서 정규식을 감지하는 데 사용되는 경우 typeof는 구현 세부 사항으로 인해 "function"도 반환합니다. ECMA-262에서는 내부 [[Call]] 메서드를 구현하는 모든 개체가 감지 유형에 대해 "함수"를 반환해야 한다고 명시합니다. 위 브라우저의 정규 표현식은 이 메서드를 구현하기 때문에 typeof도 정규 표현식에 대해 "함수"를 반환합니다. IE 및 Firefox에서 typeof는 정규식에 대해 "객체"를 반환합니다.
4-2. 실행 컨텍스트 및 범위
JavaScript에서는 실행 컨텍스트(위에서 "컨텍스트"라고 함)의 개념이 매우 중요합니다. 변수나 함수의 컨텍스트에 따라 액세스할 수 있는 데이터와 작동 방식이 결정됩니다. 각 컨텍스트에는 연관된 변수 개체가 있으며
이 컨텍스트에서 정의된 모든 변수와 함수는 이 개체에 존재합니다. 변수 개체는 코드를 통해 접근할 수는 없지만 백그라운드에서 데이터를 처리하는 데 사용됩니다.
글로벌 컨텍스트는 가장 바깥쪽 컨텍스트입니다. ECMAScript 구현의 호스트 환경에 따라 전역 컨텍스트를 나타내는 객체가 다를 수 있습니다. 브라우저에서 전역 컨텍스트는 우리가 흔히 창 개체라고 부르는 것입니다(12장에서 자세히 소개합니다). 따라서
var를 통해 정의된 모든 전역 변수와 함수는 창 개체의 속성과 메서드가 됩니다. let 및 const를 사용한 최상위 선언은 전역 컨텍스트에서 정의되지 않지만 범위 체인 확인에 동일한 효과를 갖습니다. 컨텍스트는 정의된 모든 변수와 함수를 포함하여 모든 코드가 실행된 후에 삭제됩니다. 전역 컨텍스트는 웹 페이지를 닫거나 브라우저를 종료하는 등 애플리케이션이 종료될 때까지 삭제되지 않습니다.
각 함수 호출에는 고유한 컨텍스트가 있습니다. 코드 실행 흐름이 함수에 들어가면 함수의 컨텍스트가 컨텍스트 스택으로 푸시됩니다. 함수가 실행된 후 컨텍스트 스택은 함수 컨텍스트를 팝하고 이전 실행 컨텍스트로 제어를 반환합니다. ECMAScript
프로그램의 실행 흐름은 이 컨텍스트 스택을 통해 제어됩니다. 컨텍스트의 코드가 실행되면 변수 개체의 범위 체인이 생성됩니다. 이 범위 체인은 각 컨텍스트 수준에서 코드가 변수와 함수에 액세스하는 순서를 결정합니다. 코드가 실행되는 컨텍스트의 변수 개체는 항상 범위 체인 앞에 있습니다. 컨텍스트가 함수인 경우 해당 활성화 개체가 변수 개체로 사용됩니다. 활성 개체에는 처음에 하나의 정의된 변수인 인수만 있습니다. (전역 컨텍스트에는 그러한 변수가 없습니다.) 범위 체인의 다음 변수 개체는 포함 컨텍스트에서 오고, 다음 개체는 그 이후의 포함 컨텍스트에서 옵니다. 그리고 전역 컨텍스트까지 계속됩니다. 전역 컨텍스트의 변수 개체는 항상 범위 체인의 마지막 변수 개체입니다
범위 체인 향상
실행 컨텍스트에는 주로 두 가지 유형이 있지만, 전역 컨텍스트와 함수 컨텍스트(존재함) eval() 호출) 세 번째 컨텍스트 내에서) 범위 체인을 향상시키는 다른 방법이 있습니다. 특정 명령문으로 인해 범위 체인 앞에 컨텍스트가 일시적으로 추가되고 코드
가 실행된 후에 제거됩니다.
변수 선언
ES6 이후 JavaScript 변수 선언은 엄청난 변화를 겪었습니다.
ECMAScript 5.1 이전에는 var가 변수 선언을 위한 유일한 키워드였습니다. ES6에서는
let 및 const 키워드를 추가할 뿐만 아니라 이 두 키워드가
var를 압도적으로 능가하는 첫 번째 선택 항목으로 만듭니다.
var를 사용한 함수 범위 선언
var를 사용하여 변수를 선언하면 해당 변수가 가장 가까운 컨텍스트에 자동으로 추가됩니다. 함수 내에서 가장 가까운 컨텍스트는 함수의 로컬 컨텍스트입니다. with 문에서 가장 가까운 컨텍스트는 함수 컨텍스트이기도 합니다. 변수를 선언하지 않고 초기화하면 전역 컨텍스트에 자동으로 추가됩니다. 참고: 변수를 선언하지 않고 초기화하는 것은 JavaScript 프로그래밍에서 매우 흔한 실수이며 많은 문제를 일으킬 수 있습니다. 이러한 이유로 독자는 변수를 초기화하기 전에 변수를 선언해야 합니다. 엄격 모드에서 변수를 선언하지 않고 초기화하면 오류가 발생합니다.注意：未经声明而初始化变量是JavaScript编程中一个非常常见的错误，会导致很多问题。为此，读者在初始化变量之前一定要先声明变量。在严格模式下，未经声明就初始化变量会报错
var 声明会被拿到函数或全局作用域的顶部，位于作用域中所有代码之前。这个现象叫作“提升”（hoisting）。提升让同一作用域中的代码不必考虑变量是否已经声明就可以直接使用。可是在实践中，提升也会导致合法却奇怪的现象，即在变量声明之前使用变量。
使用 let 的块级作用域声明
ES6新增的 let 关键字跟 var 很相似，但它的作用域是块级的，这也是JavaScript中的新概念。块级作用域由最近的一对包含花括号 {} 界定。换句话说， if 块、 while 块、 function块，甚至连单独的块也是 let 声明变量的作用域。
使用 const 的常量声明
除了 let ，ES6同时还增加了 const 关键字。使用 const 声明的变量必须同时初始化为某个值。一经声明，在其生命周期的任何时候都不能再重新赋予新值
注意 开发实践表明，如果开发流程并不会因此而受很大影响，就应该尽可能地多使用 const 声明，除非确实需要一个将来会重新赋值的变量。这样可以从根本上保证提前发现重新赋值导致的bug var 선언은 범위의 모든 코드 이전에 함수 또는 전역 범위의 맨 위로 이동됩니다. 이러한 현상을 "호이스팅"이라고 합니다. 호이스팅을 사용하면 동일한 범위의 코드에서 변수가 선언되었는지 여부에 대해 걱정할 필요 없이 변수를 사용할 수 있습니다. 그러나 실제로 승격은 변수가 선언되기 전에 사용하는 합법적이지만 이상한 현상으로 이어질 수도 있습니다.
let 블록 수준 범위 선언 사용
ES6의 새로운 let 키워드는 var와 매우 유사하지만 해당 범위는 블록 수준이며 이는 JavaScript의 새로운 개념이기도 합니다. 블록 수준 범위는 가장 가까운 중괄호 {} 쌍으로 구분됩니다. 즉, if 블록, while 블록, 함수 블록, 심지어 개별 블록까지 선언된 변수의 범위는 let입니다. const 상수 선언 사용🎜 let 외에도 ES6에서는 const 키워드도 추가합니다. const를 사용하여 선언된 변수도 값으로 초기화되어야 합니다. 한 번 선언되면 수명 주기 동안 언제든지 새 값을 다시 할당할 수 없습니다. 🎜🎜🎜개발 관행에 따르면 개발 프로세스가 이에 의해 크게 영향을 받지 않는다면 다음과 같이 수행해야 합니다. 나중에 다시 할당할 변수가 꼭 필요한 경우가 아니면 가능한 한 const 선언을 사용하세요. 이를 통해 근본적으로 재할당으로 인한 버그를 사전에 발견할 수 있습니다🎜🎜🎜4-3. 가비지 컬렉션🎜🎜🎜JavaScript는 가비지 컬렉션을 사용하는 언어입니다. 즉, 실행 환경이 메모리 관리를 담당한다는 의미입니다. 코드가 실행됩니다. C나 C++ 같은 언어에서 메모리 사용량을 추적하는 것은 개발자에게 큰 부담이 되고 많은 문제의 원인이 됩니다. JavaScript는 개발자의 이러한 부담을 덜어주고 자동 메모리 관리를 통해 메모리 할당 및 유휴 리소스 재활용을 구현합니다. 기본 아이디어는 간단합니다. 어떤 변수가 더 이상 사용되지 않을지 결정하고 해당 변수가 차지하는 메모리를 해제하는 것입니다. 이 프로세스는 주기적입니다. 즉, 가비지 수집 프로그램이 특정 간격으로(또는 코드 실행 중 예정된 수집 시간에) 자동으로 실행됩니다. 가비지 수집 프로세스는 대략적이고 불완전한 솔루션입니다. 특정 메모리 조각이 여전히 유용한지 여부는 "결정할 수 없는" 문제이므로 알고리즘으로 해결할 수 없기 때문입니다. 🎜🎜함수에서 지역 변수의 일반적인 수명 주기를 예로 들어 보겠습니다. 함수가 실행될 때 함수 내의 지역 변수는 존재하게 됩니다. 이때 스택(또는 힙) 메모리는 해당 값을 저장할 공간을 할당하게 됩니다. 함수는 내부적으로 변수를 사용한 다음 종료됩니다. 이 시점에서 지역 변수는 더 이상 필요하지 않으며, 이 변수가 차지하는 메모리는 나중에 사용하기 위해 해제될 수 있습니다. 이 경우 지역 변수가 더 이상 필요하지 않다는 것은 명백하지만 항상 명확한 것은 아닙니다. 가비지 수집기는 메모리를 회수하기 위해 어떤 변수가 여전히 사용되고 어떤 변수가 더 이상 사용되지 않는지 추적해야 합니다. 사용되지 않는 변수를 표시하는 방법은 다양하게 구현될 수 있습니다. 그러나 브라우저 개발 역사상 마크업 삭제와 참조 카운팅이라는 두 가지 주요 마크업 전략이 사용되었습니다. 🎜Mark Sweep
JavaScript에서 가장 일반적으로 사용되는 가비지 수집 전략은 mark-and-sweep입니다. 함수 내에서 변수를 선언하는 등 변수가 컨텍스트에 들어가면 해당 변수는 컨텍스트에 존재하는 것으로 표시됩니다. 컨텍스트에 없는 변수는 논리적으로 메모리를 해제해서는 안 됩니다. 컨텍스트의 코드가 실행되는 동안 사용될 수 있기 때문입니다. 변수가 컨텍스트를 벗어나면 컨텍스트를 벗어나는 것으로 표시됩니다.
변수에 레이블을 지정하는 방법에는 여러 가지가 있습니다. 예를 들어, 변수가 컨텍스트에 들어가면 특정 비트를 반전하거나 "컨텍스트에 있음" 및 "컨텍스트에 없음"이라는 두 개의 변수 목록을 유지할 수 있으며 변수를 한 목록에서 다른 목록으로 이동할 수 있습니다. 마킹 프로세스의 구현은 중요하지 않으며 핵심은 전략입니다.
가비지 수집 프로그램이 실행되면 메모리에 저장된 모든 변수를 표시합니다(표시하는 방법에는 여러 가지가 있음을 기억하세요). 그런 다음 컨텍스트의 모든 변수와 컨텍스트의 변수가 참조하는 변수에서 태그를 제거합니다. 이후에 표시된 변수는 컨텍스트의 어떤 변수에도 더 이상 액세스할 수 없기 때문에 삭제 대상입니다. 그런 다음 가비지 수집기는 메모리 정리를 수행하여 표시된 모든 값을 삭제하고 해당 메모리를 회수합니다.
2008년까지 IE, Firefox, Opera, Chrome 및 Safari는 모두 JavaScript 구현에 마크업 정리(또는 그 변형)를 사용했으며 가비지 수집 실행 빈도만 다릅니다.
참조 계산
덜 일반적으로 사용되는 또 다른 가비지 수집 전략은 참조 계산입니다. 아이디어는 각 값에 대해 참조된 횟수를 기록하는 것입니다. 변수를 선언하고 참조 값을 할당하면 이 값의 참조 번호는 1입니다. 동일한 값이 다른 변수에 할당되면 참조 번호가 1 증가합니다. 마찬가지로, 값에 대한 참조를 보유하는 변수를 다른 값으로 덮어쓰면 참조 카운트가 1씩 감소합니다. 값에 대한 참조 수가 0이면 해당 값에 더 이상 액세스할 수 없으므로 해당 메모리를 안전하게 회수할 수 있음을 의미합니다. 가비지 수집 프로그램
은 다음에 실행될 때 참조 번호 0으로 메모리를 해제합니다. 참조 카운팅은 Netscape Navigator 3.0에서 처음 채택되었지만 곧 순환 참조라는 심각한 문제에 직면했습니다. 소위 순환 참조는 객체 A가 객체 B를 가리키는 포인터를 갖고 객체 B도 객체 A를 참조한다는 것을 의미합니다.
待更新。。。
관련 무료 학습 권장 사항: javascript(동영상)
위 내용은 JavaScript 학습 노트 기록의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
