ES6 JavaScript "Defect"문제가 향상되었습니다

블록 레벨 범위

ES5에는 블록 레벨 범위가 없으며 글로벌 범위 및 기능 범위 만 있습니다. 이로 인해 변수의 범위는 매우 넓기 때문에 함수를 입력하자마자 즉시 만들어야합니다. 이로 인해 소위 변수가 증가합니다.

ES5의 "가변 개선"기능은 종종주의를 기울이지 않으면 오류가 발생합니다.

1. 내부 변수는 외부 변수를 포함합니다

 var tmp = new date (); function f () {console.log (tmp); if (false) {// undefinedVar tmp = "Hello World";}}

2. 변수는 글로벌 변수로 누출됩니다

 var s = 'hello'; for (var i = 0; i <s.length; i ++) {console.log (s [i]);} console.log (i); // 5

과거에 우리는 종종 클로저를 사용 하여이 문제를 해결합니다 (예 : 자체 실행 기능). 이제이 문제를 바탕으로 ES6은 블록 레벨 범위를 추가 했으므로 자체적으로 기능을 실행할 필요가 없습니다.

let and const

ES6은 뒤로 호환되며 뒤로 호환성을 유지한다는 것은 웹 플랫폼에서 JS 코드의 동작을 변경하지 않기 때문에 VAR에 의해 생성 된 변수의 범위는 여전히 전역 범위 및 기능 범위가됩니다. 이런 식으로 블록 레벨 범위가 있더라도 ES5의 "가변 개선"문제를 해결할 수 없습니다. 따라서 ES6은 두 가지 새로운 키워드를 추가했습니다 : Let and Const.

1. let

"더 완벽한 var"는 더 나은 범위 규칙을 가지고 있습니다.

2. 개미

Const는 읽기 전용 상수를 선언합니다. 일단 선언되면 상수의 값은 변경 될 수 없지만 Const가 선언 한 객체는 속성이 변경 될 수 있습니다 (물체 동결 객체. freeze)

 const a = []; a.push ( 'hello'); // 실행 가능 a = [ 'Dave']; // 오류를보고합니다

물체를 사용하여 물체를 얼리기 위해 사용할 수도 있습니다

 const foo = object.freeze ({}); // 일반 모드에서는 다음 줄이 작동하지 않습니다. // 엄격한 모드에서 라인은 오류를보고합니다 foo.prop = 123; //

let and const 사용 :

• 변수는 선언이있는 블록 수준 범위 내에서만 유효합니다.

• 가변 선언은 사용할 수 있습니다 (임시 데드 존)

• 변수는 반복적으로 정의 할 수 없습니다

• 선언 된 글로벌 변수, 글로벌 객체에 속하지 않는 속성

 var a = 1; window.a // 1let b = 1; window.b // undefined

이 키워드

ES5 함수 의이 사실은 런타임이 위치한 범위를 가리 킵니다. 예를 들어

 funture foo () {settimeout (function () {console.log ( 'id :', this.id);}, 100);} var id = 21; foo.call ({id : 42}); // id : 21

여기에서는 내부적으로 지연 함수 설정 타임 아웃 인 함수 foo를 선언합니다. 우리는 그것을 foo.call ({id : 42})을 통해 호출 하고이 함수의 범위를 설정합니다. 실제로 실행하는 데 100 밀리 초가 걸립니다. 이것은 런타임이 위치한 범위를 가리키기 때문에 여기서는 기능 foo가 아닌 전역 객체 창을 가리 킵니다. 여기:

• 호출을 사용하여 FOO의 실행 컨텍스트를 변경하여 함수의 실행 컨텍스트가 더 이상 창이되지 않도록 설정 타임 아웃 에서이 포인터를 구별합니다.

• Settimeout 메소드가 창 객체 아래에 매달려 있으므로 실행 범위 인 Window 개체를 가리 킵니다.

TimeOut이라는 코드는 글로벌 범위에서 실행되므로 함수의 값은 비 스트릭 모드에서 Window 객체를 가리키며 엄격한 모드에서 정의되지 않습니다.

이 문제를 해결하기 위해 우리의 일반적인 관행은 이것을 다른 변수에 할당하는 것입니다.

 funture foo () {var that = thit; settimeout (function () {console.log ( 'id :', that.id);}, 100);} var id = 21; foo.call ({id : 42}); // id : 42

이제 ES6 은이 문제를 해결하기 위해 화살표 기능을 시작했습니다.

화살표 기능

식별자 => 표현식

 var sum = (num1, num2) => {return num1 + num2; } // var sum = function (num1, num2) {return num1 + num2;};

• 함수에 하나의 매개 변수 만있는 경우 괄호 안에서 생략 할 수 있습니다.

• 함수에 반환 문이 하나만있는 경우, 브레이스 및 리턴을 생략 할 수 있습니다.

• 함수가 객체를 직접 반환하는 경우 괄호 안에 괄호를 추가해야합니다. (빈 객체 {}와 빈 블록 {}는 정확히 동일하게 보이기 때문에 객체 리터럴을 괄호로 감아 야합니다.)

이 키워드의 문제에 대한 응답으로 ES6은 런타임이 위치한 범위를 가리키지 않고 화살표 함수 에서이 바인딩이 정의되는 범위를 지정합니다. 이 시점 부터이 지점은 고정되어 콜백 함수를 캡슐화하는 데 도움이됩니다.

 funture foo () {var that = thit; settimeout (() => {console.log ( 'id :', that.id);}, 100);} var id = 21; foo.call ({id : 42}); // id : 42

참고 : 화살표 기능을 가리키는 고정은 화살표 기능 내부에이를 바인딩하는 메커니즘이 없기 때문이 아닙니다. 실제 이유는 화살표 함수에 전혀 자체적이지 않기 때문입니다. 화살표 함수에는 전혀 자체가 없으며 내부는 외부 코드 블록에 있습니다. 이것은 다음으로 이어진다.

• 생성자로 사용할 수 없습니다

• Call (), apply (), bind () 및 기타 메소드를 사용할 수 없습니다.

수업 및 상속

전통적인 ECMAScript에는 클래스 개념이 없습니다. 프로토 타입 체인의 개념을 설명하고 프로토 타입 체인을 상속을 구현하는 주요 방법으로 사용합니다. 기본 아이디어는 프로토 타입을 사용하여 하나의 참조 유형이 다른 참조 유형의 속성 및 메소드를 상속받을 수 있도록하는 것입니다. 이 동작을 달성하는 전통적인 방법은 생성자를 통한 것입니다.

 함수 포인트 (x, y) {this.x = x; this.y = y;} point.prototype.toString = function () {return '(' + this.x + ',' + this.y + ')';}; var p = new Point (1, 2);

여기서, 생성자 지점에는 프로토 타입 객체 (프로토 타입)가 있으며, 여기에는 포인트 (생성자)가 포함되어 있으며 인스턴스 P에는 프로토 타입 객체 (PROP)에 대한 내부 포인터가 포함되어 있습니다. 따라서 전체 상속은 프로토 타입 체인을 통해 구현됩니다. 자세한 내용은이 기사 : JavaScript의 프로토 타입 및 생성자를 참조하십시오.

수업

ES6은 전통적인 언어에 가까운 작문 스타일을 제공하여 객체의 템플릿으로 클래스 개념을 소개합니다. 클래스 키워드를 통해 클래스를 정의 할 수 있습니다. 그러나 클래스는 프로토 타입 기반 객체 지향 패턴에 대한 구문 설탕 일뿐입니다. 수업의 도입에 대한 혼합 된 리뷰가 있으며, 많은 사람들은 그것이 큰 결함이라고 생각하지만, 저에게는 프로토 타입 체인을 상속하는 일반적인 방법이 종종 나를 감싸 수 있기 때문에 좋은 구문 설탕입니다.

 // 클래스 클래스 포인트를 정의합니다.

• 클래스에는 클래스의 기본 메소드 인 생성자 메소드가 있습니다. 이 메소드는 새 명령을 통해 객체 인스턴스를 생성 할 때 자동으로 호출됩니다. 클래스에는 생성자 방법이 있어야합니다. 명시 적으로 정의되지 않으면 빈 생성자 메소드가 기본적으로 추가됩니다.

• 생성자 메소드 의이 키워드는 인스턴스 객체를 나타냅니다.

• "클래스"메소드 (위의 예에서 Tostring과 같은)의 메소드를 정의 할 때 키워드 기능을 추가하기 전에 기능 정의를 넣을 필요가 없습니다. 또한 추가하면 오류가보고되므로 메서드간에 쉼표 분리가 없습니다.

• 사용할 때는 클래스에서 새 명령을 직접 사용합니다.이 명령은 생성자의 사용과 정확히 동일합니다.

• 클래스의 모든 방법은 클래스의 프로토 타입 속성에 정의됩니다.

클래스 상속 - 확장

클래스 간의 상속은 확장 키워드를 통해 달성 할 수 있으며, 이는 프로토 타입 체인을 수정하여 ES5의 상속보다 훨씬 명확하고 편리합니다.

 Class ColorPoint 확장 지점 {생성자 (x, y, color) {super (x, y); // 상위 클래스 (x, y)의 생성자 (x, y)를 호출 this.color = color;} toString () {return this.color + '' + super.toString (); // 상위 클래스의 toString ()을 호출}}

• 함수로 호출 될 때 (예 : Super (... args))는 부모 클래스의 생성자를 나타냅니다. 객체 (예 : super.prop 또는 super.method ())로 호출되면 부모 클래스를 나타냅니다. 여기서는 부모 클래스의 생성자를 나타내며 부모 클래스 의이 객체를 만드는 데 사용됩니다.

• 서브 클래스는 생성자 메소드에서 수퍼 메소드를 호출해야합니다. 그렇지 않으면 새 인스턴스를 만들 때 오류 가보고됩니다. 서브 클래스에는이 객체가 고유 한 객체가 없지만 부모 클래스 의이 객체를 상속 한 다음 처리하기 때문입니다. 슈퍼 메소드가 호출되지 않으면 서브 클래스는이 객체를 얻지 못합니다.

모듈 식

역사적으로 JavaScript에는 모듈 시스템이 없었으며 대규모 프로그램을 작은 상호 의존적 파일로 나눈 다음 간단한 방식으로 조립하는 것은 불가능합니다. 대형 모듈의 개발에 적응하기 위해 커뮤니티는 CMD 및 AMD와 같은 일부 모듈 로딩 솔루션을 공식화했습니다.

ES6의 모듈 식 쓰기 :

 import {stat, 존재, readfile} 'from'fs ';

위의 코드의 본질은 FS 모듈에서 3 가지 방법을로드하는 것이며 다른 방법은로드되지 않습니다. 이러한 종류의 로딩을 "컴파일 타임 로딩"이라고합니다. 물론 이것은 또한 객체가 아니기 때문에 ES6 모듈 자체를 참조 할 수 없게됩니다.

모듈 함수는 주로 두 가지 명령으로 구성됩니다.

•내보내다

모듈과 외부 인터페이스를 지정하는 데 사용되는 외부 인터페이스는 모듈 내의 변수와 일대일 대응 관계를 설정해야합니다.

 // 쓰기 메소드 1 내보내기 var m = 1; // 오류 내보내기 1; // 쓰기 방법 2 var m = 1; 내보내기 {m}; // 오류 내보내기 m; // 쓰기 메소드 3 var n = 1; 내보내기 {n as m};

•수입

다른 모듈에서 제공하는 기능을 입력하는 데 사용됩니다. 그것은 다른 모듈에서 가져올 변수 이름을 지정하는 객체 (버팀대로 표시)를 허용합니다 (총 *를 사용하여로드 할 수 있음).

문자열 보간

JavaScript 개발에서는 종종 다음과 같은 템플릿을 출력해야합니다.

 function sayshello (name) {return "Hello, 내 이름은"+name+"i am"+getage (18);} 함수 getage (age) {return age;

우리는 +를 사용하여 줄과 변수 (또는 표현)를 연결해야합니다. 예제는 비교적 단순하기 때문에 무해한 것처럼 보이지만 일단 더 복잡해지면 매우 번거롭고 불편 해 보일 것이며,이 사용법은 우리를 괴롭게 만듭니다. 이와 관련하여 ES6은 템플릿 문자열을 소개하는데, 이는 JS 값을 문자열에 쉽고 우아하게 삽입 할 수 있습니다.

템플릿 문자열

템플릿 문자열의 경우 :

• 백 티크``;

• $ {}를 사용하여 출력 값;

• $ {}의 내용은 JavaScript 표현식 일 수 있으므로 기능 호출 및 산술 작업은 합법적입니다.

• 값이 문자열이 아닌 경우 문자열로 변환됩니다.

• 모든 공간, 신생 및 계약을 유지하고 결과 문자열에 출력하십시오 (다중 라인 문자열을 작성할 수 있음)

• 내부적으로 백틱과 버팀대를 사용하여 탈출하고 백 슬래시를 사용하십시오.

위의 예에서 템플릿 문자열은 다음과 같이 작성됩니다.

 function sayshello (name) {return`hello, 내 이름은 $ {name} i am $ {getage (18)}`;} function getage (age) {return age;} sayhello ( "brand") // "안녕하세요, 내 이름은 Brandi am 18"입니다.

엄격한 모드

엄격한 모드의 목표 중 하나는 오류의 더 빠른 디버깅을 허용하는 것입니다. 개발자 디버그를 돕는 가장 좋은 방법은 조용히 실패하거나 이상한 동작을 보여주지 않고 특정 패턴이 발생할 때 오류를 던지는 것입니다 (종종 비 스트릭 모드에서 발생). 엄격한 모드의 코드는 더 많은 오류 메시지를 던지므로 개발자는 즉시 해결해야 할 몇 가지 문제를 신속하게 알 수 있도록 도와줍니다. ES5에서는 엄격한 모드가 선택 사항이지만 ES6에서는 많은 기능이 엄격한 모드를 사용해야하므로 더 나은 JavaScript를 작성하는 데 도움이됩니다.

위의 것은 ES6의 "결함"문제가 편집자가 소개 한 JavaScript 향상입니다. 나는 그것이 당신에게 도움이되기를 바랍니다. 궁금한 점이 있으면 메시지를 남겨 주시면 편집자가 제 시간에 답장을 드리겠습니다. Wulin.com 웹 사이트를 지원해 주셔서 대단히 감사합니다!