ES6 (ECMAScript 6)은 다가오는 새로운 버전의 JavaScript 언어, 코드 명 하모니의 표준입니다 (하모니의 의미는 분명히 우리 나라의 속도를 따라 잡지 않고 중국 드림 버전에 들어갔다). 마지막 표준은 2009 년에 발행 된 ES5로 공식화되었습니다. 현재 ES6의 표준화가 진행 중이며 공식적으로 최종 버전은 2014 년 12 월에 출시 될 것으로 예상되지만 대부분의 표준은 준비되어 있으며 브라우저의 ES6에 대한 지원도 구현되고 있습니다.
ES6에서 클래스를 정의하는 방법은 ES3 및 ES5의 클래스를 정의하기위한 구문 설탕입니다. 몇 가지 차이가 있지만 클래스를 정의하는 전반적인 방법은 더 간결하고 클래스 상속이 더 편리합니다. ES6의 상속에 익숙해 지려면 ES5의 프로토 타입 상속 방법을 이해하는 것이 가장 좋습니다. 블로그 파크에는 JS 상속이라는 기사가 많이 있습니다. 심층적 인 이해를 원하는 학생들은 스스로 검색 할 것입니다.
클래스 정의 :
클래스 메소드를 사용하여 정의 된 각 클래스에는 기본적으로 생성자 기능이 있습니다. 이 함수는 생성자 함수의 주요 함수입니다. 기능 본체 내부는 생성 된 인스턴스를 가리 킵니다. say () {}는 프로토 타입의 메소드입니다. 우리는 간단한 클래스를 정의합니다.
다음 코드를 실행하십시오
"Strict 사용"; 클래스 사람 {생성자 (이름) {this.name = name; } says () {console.log ( "say hi"); }}; new Person (). say (); // 콘솔이 출력됩니다참고 : ES6에서 선언 된 클래스에는 미리 함수 선언 문제가 없습니다. 수업은 먼저 선언 한 다음 사용해야합니다. 그렇지 않으면 예외가 발생합니다. 위의 데모에서 코드 위치를 변경하고 즉시 오류를보고합니다. (ES5의 사고로 이해하면 선언 된 클래스는 미리 선언하지 않습니다. 미리 선언에 대한 지식 포인트의 경우 클래스 이름 {}를 통해 선언 된 클래스는 var class name = function () {})입니다.
다음 코드를 실행하십시오
"엄격한 사용"; new Person (). } says () {console.log ( "say hi"); }};함수를 정의하는 정적 메소드 :
함수를 정의 할 때 함수 이름 앞에서 정적으로 정적이 선언되면이 기능은 정적 함수, 정적 메소드이며 프로토 타입과 관련이 없습니다.
다음 코드를 실행하십시오
"Strict 사용"; 클래스 사람 {생성자 (이름) {this.name = name; } static says () {console.log ( "say hi"); }}; person.say ();프로토 타입 방법 정의 :
프로토 타입 메소드를 정의하고 다음과 같이 직접 선언합니다. function name () {}, 브래킷은 매개 변수 목록이며 버팀대는 코드 블록입니다. ES5에서 프로토 타입을 정의하는 방법은 사용하는 것입니다 : 생성자 .prototype. 프로토 타입 메소드 이름 () {}. 이 글쓰기 양식은 매우 번거 롭습니다. ES6을 사용하여 프로토 타입을 정의하는 방법은 Java 및 C#과 비슷합니다. 이것은 비교적 높은 수준의 언어의 특성입니다.
다음 코드를 실행하십시오
"Strict 사용"; 클래스 사람 {생성자 (이름) {this.name = name; } says () {console.log ( "say hi"); } sing () {console.log ( "lalalala"); }}; new Person (). say (); // output : say hinev person (). sing (); // 출력 : Lalalalala정적 특성 및 프로토 타입 특성 :
클래스 정의가 완료된 후 정적 특성을 정의하는 것은 약간 까다 롭습니다. 언어 저자는 코드 혼동을 피하기 위해이 방법을 구현합니다. 모든 정적 속성은 같은 위치에 정의되므로 코드를 어떻게 표준화 할 수 있습니까?
다음 코드를 실행하십시오
"Strict 사용"; 클래스 사람 {생성자 (이름) {this.name = name; }}; person.hands = 2; console.log (person.hands);프로토 타입에서 속성을 정의 할 수 없습니다. 우리는 세트를 정의하고 프로토 타입, 값 및 세터를 얻을 수 있습니다. 값과 세터는 프로토 타입에 있습니다 ... :
다음 코드를 실행하십시오
클래스 개인 {생성자 (_name) {this._name = _name; } get name () {return this._name; } set name (_name) {this._name = _name; }} var p = new Person (); p.name = "heheda"; console.log (p.name); // 출력 : hehedaconsole.log (p._name); // 출력 : Heheda프로토 타입 속성을 정의하려면 생성자 내부의 속성을 정의하십시오. 상속 된 경우 서브 클래스는 부모 클래스의 속성을 상속합니다.
다음 코드를 실행하십시오
클래스 개인 {constructor () {this.name = "default"; }} class man은 person {constructor () {super (); }} console.log (new man (). name);상속 확장 클래스의 확장 :
ES5는 이미 상속을 가지고 있지만 이런 종류의 상속은 종종 순환됩니다. ES6 상속은 프로토 타입 상속 캡슐화 (동의어 설탕)를 기반으로합니다. 실제로 훨씬 간단하지만 Java 상속은 배우기가 더 쉽습니다. SMAN 다음 데모 예에서 SMAN은 슈퍼맨을 의미합니다. 그렇게 생각하지 마십시오.
다음 코드를 실행하십시오
"Strict 사용"; 클래스 사람 {생성자 (이름) {this.name = name; } says () {console.log ( "say hi"); 이것을 반환하십시오; }}; 클래스 Sman은 사람을 확장합니다 {생성자 (이름, power) {super (name); this.superpower = 전력; } show () {console.log (this.superpower); 이것을 반환하십시오; }} console.log (new sman ( "clark", "pee"). show (). say (). name); // 출력 : Pee는 안녕하세요 Clark이라고 말합니다상속을 사용하려면 부모 클래스를 호출하려면 서브 클래스에서 Super ()를 실행해야합니다. 그렇지 않으면 컴파일러에 오류가 발생합니다. 서브 클래스의 Super에는 세 가지 기능이 있습니다. 첫 번째는이를 생성자로 직접 호출하는 것입니다. 두 번째는 부모 클래스의 인스턴스 역할을하는 것이며, 세 번째는 서브 클래스의 정적 메소드에서 부모 클래스의 정적 메소드를 호출하는 것입니다.
ES6 상속과 ES5 상속의 주요 차이점. ES5에서 일반적으로 사용되는 상속은 서브 클래스의 프로토 타입을 부모 클래스의 인스턴스로 설정하는 것입니다. 서브 클래스에는 자연스럽게 부모 클래스의 모든 방법과 속성이 있습니다.
다음 코드를 실행하십시오
var sup = function () {this.sub = true;}; sup.prototype.protosup = {sup : "sup"}; var sub = function () {this.sub = true;}; sub.prototype = new sup (); // 프로토 타입을 상속합니다. sub.prototype.constructor = sub; // 생성자 수정;ES6에서 구현 된 상속은 더 절묘하며 부모 클래스에 의해 방해받지 않습니다. 이 상속은 적용 상속 및 프로토 타입 상속 구현의 조합입니다.
다음 코드를 실행하십시오
var sup = function () {this.sub = true;}; var sub = function () {this.sup = true; Sup.Apply (this); // 이것의 속성과 메소드를 상속합니다.}; sub .__ proto__ = sup; // SUP의 정적 속성을 상속합니다. sub.prototype = object.create (sup. prototype, {생성자 : {value : sub, enumerable : false, writable : true, configurable : true}}); // 프로토 타입 속성을 상속하고 생성자를 덮어 씁니다.그림과 함께 둘 사이의 차이를보기가 더 쉽고 그림은 ES5와 ES6의 상속의 차이를 보여줍니다 : http://keenwon.com/1524.html;
ES5 ES6의 상속을 시뮬레이션합니다.
트랜스 코더 바벨로 인해 ES5 코드를 사용하여 ES6 상속이 구현되는 방법과 ES6 상속을 탐색 할 수 있습니다.
다음 코드를 실행하십시오
"Strict 사용"; 클래스 사람 {생성자 (이름) {this.name = name; } says () {console.log ( "say hi"); 이것을 반환하십시오; }}; 클래스 Sman은 사람을 확장합니다 {생성자 (이름, power) {super (name); this.superpower = 전력; } show () {console.log (this.superpower); 이것을 반환하십시오; }} console.log (new sman ( "clark", "pee"). show (). say (). name);Babel을 사용하여 ES5로 변환 한 후 코드는 다음과 같습니다. 나는 작은 의견을 직접 추가하고, 무례하고 사랑스러운 자유가 된 것에 대해 나를 용서해주었습니다 ... :
다음 코드를 실행하십시오
var _createClass = function () {함수 defineProperties (target, props) {for (var i = 0; i <propss.length; i ++) {var descriptor = propss [i]; descriptor.enumerable = descriptor.enumerable || 거짓; descriptor.configurable = true; if (descriptor의 "value") descriptor.witable = true; Object.DefineProperty (Target, Descriptor.key, Descriptor); }} return function (생성자, 프로토플라, 정적 프로 롭) {// 프로토 타입을 복사 if (protoprops) defineProperties (생성기 .prototype, protoprops); // if (staticProps) defineProperties (생성자, staticProps)를 복사합니다. 리턴 생성자; }; } (); function _classCallCheck (인스턴스, 생성자) {if (! (! }} function _possibleconstructorreturn (self, call) {if (! self) {trow new referenceError ( "이것은 초기화되지 않았다 - Super () 호출되지 않았다"); } return call && (typeof call === "object"|| typeof call === "function")? 전화 : 자기; } // 다음은 es6 상속 된 코드입니다. _Inherits는 프로토 타입의 상속 및 상위 클래스 상태 속성의 상속을 구현합니다. } // 상위 클래스의 프로토 타입을 상속하고 생성자를 서브 클래스로 수정합니다. subclass.prototype = object.create (superclass && superclass.prototype, {생성자 : {value : subclass, enumerable : false, writable : true, configurable : true}}); // 정적 속성 상속을 달성 할 수 있도록 서브 클래스 객체의 __proto__ 정의; if (superclass) object.setPrototypof? object.setPrototypof (서브 클래스, 슈퍼 클래스) : 서브 클래스 .__ proto__ = 슈퍼 클래스; // 개발자가 마지막 인 경우 : 새 하위 클래스, 실제 상태는 다음과 같습니다. 개체 {__proto __ : 부모 클래스, 생성자 : 서브 클래스}}; /* var sup = function () {}; var sub = function () {}; _inherits (sub, sup); //이 상속 구현의 의미; 객체의 서브 클래스는 부모 클래스를 생성자로 상속받습니다. 서브 클래스는 서브. 프로로 타입 .__ protopty .__ protopty. this.name = 이름; }. 귀환 담당자; } (); ; var sman = function (_person) {_inherits (sman, _person); 함수 sman (이름, power) {// 현재이 .__ proto__는 생성자의 프로토 타입 _classCallCheck (this, sman)을 가리 켰습니다. //이 문장은 ES6의 Super ()와 동일하며, 호출을 통해 상위 클래스의 속성을 전달하고 상속을 실행합니다. var _this = _possibleconstructorreturn (this, object.getPrototypof (sman) .call (this, name)); _this.superpower = 전원; // 동적 반환 _this; 반환 _this; }. Sman을 반환하십시오. }(사람); Console.log (New Sman ( "Clark", "Pee"). show (). say (). name);다중 상속 :
믹스 인을 사용하여 다중 상속을 달성하면 작성 방법은 다음과 같습니다. 클래스 서브 확장 믹스 (OBJ0, OBJ1, OBJ2). 믹스는 단지 방법 일뿐입니다. 우리는이 메소드를 스스로 정의해야합니다.
다음 코드를 실행하십시오
<html> <head> <meta charset = "utf-8"> </head> <body> <cript> "Strict 사용"; 함수 mix (... mixins) {class mix {} for (mixins의 믹스) {copyproperties (mix, mixin); CopyProperties (mix.prototype, mixin.prototype); } 반환 믹스; } 함수 CopyProperties (target, source) {for (let key of reflect.ownkeys (source)) {if (key! == "constructor"&& key! == "프로토 타입"&& key! == "name") {let desc = object.getOnProperTyDescriptor (source, key); Object.DefineProperty (Target, Key, DESC); }}} class man {work () {console.log ( "Working"); }} 클래스 여자 {say () {console.log ( "say"); }} Class Superman Extends Mix (Man, Woman) {constructor () {super (); }} var sm = new Superman (); sm.work (); sm.say (); // 실제로, 그들은 상속 관계가 없으며 속성을 서브 클래스에 복사합니다. Console.log (SM 인스턴스 인 Man); Console.log (SM 인스턴스 여성); </script> </body> </html>위는 편집자가 소개 한 JavaScript ES6의 새로운 기능에 대한 관련 지식입니다. 나는 그것이 당신에게 도움이되기를 바랍니다. 궁금한 점이 있으면 메시지를 남겨 주시면 편집자가 제 시간에 답장을 드리겠습니다. Wulin.com 웹 사이트를 지원해 주셔서 대단히 감사합니다!