ES6 에서 class 의 실현 원 리 를 상세 하 게 설명 하 다.
구현 클래스 의 코드 는 다음 과 같 습 니 다.
function Person(name, age) {
this.name = name;
this.age = age;
}
Person.prototype.speakSomething = function () {
console.log("I can speek chinese");
};
계승 을 실현 하 는 코드 는 다음 과 같다.일반적으로 원형 체인 계승 과 콜 계승 을 혼합 하 는 형식 을 사용한다.
function Person(name) {
this.name = name;
}
Person.prototype.showName = function () {
return ` :${this.name}`;
};
function Student(name, skill) {
Person.call(this, name);//
this.skill = skill;
}
Student.prototype = new Person();//
2.ES6 사용 class 정의 클래스
class Parent {
constructor(name,age){
this.name = name;
this.age = age;
}
speakSomething(){
console.log("I can speek chinese");
}
}
babel 코드 를 바 꿔 서...
function _classCallCheck(instance, Constructor) {
if (!(instance instanceof Constructor)) {
throw new TypeError("Cannot call a class as a function");
}
}
var Parent = function () {
function Parent(name, age) {
_classCallCheck(this, Parent);
this.name = name;
this.age = age;
}
_createClass(Parent, [{
key: "speakSomething",
value: function speakSomething() {
console.log("I can speek chinese");
}
}]);
return Parent;
}();
ES6 류 의 밑바닥 은 구조 함 수 를 통 해 만들어 지 는 것 을 볼 수 있다.ES6 를 통 해 만 든 클래스 는 직접 호출 할 수 없습니다.ES5 에서 구조 함 수 는 Parent()와 같이 직접 실행 할 수 있다.근 데 ES6 에 서 는 안 돼.우 리 는 코드 를 바 꾸 는 구조 함수 중 에 가 있 는 것 을 볼 수 있다.classCallCheck(this,Parent)문 구 는 구조 함 수 를 통 해 직접 실행 되 는 것 을 방지 합 니 다.ES6 에서 Parent()를 직접 실행 하 는 것 은 허용 되 지 않 습 니 다.ES6 에서 Class constructor Parent cannot be invoked without'new'오 류 를 던 집 니 다.코드 를 바 꾼 후 Cannot calla class as a function 을 던 집 니 다.클래스 의 사용 방식 을 규범화 할 수 있 습 니 다.
코드 변환 중createClass 방법 은 새로 만 든 Parent 에 다양한 속성 을 추가 하기 위해 Object.defineProperty 방법 을 사용 합 니 다.define Properties(Constructor.prototype,protoProps)는 원형 에 속성 을 추가 합 니 다.정적 속성 이 있 으 면 구조 함수 define Properties(Constructor,static Props)에 직접 추가 합 니 다.
3.ES6 계승 실현
저 희 는 Parent 에 정적 속성,원형 속성,내부 속성 을 추가 합 니 다.
class Parent {
static height = 12
constructor(name,age){
this.name = name;
this.age = age;
}
speakSomething(){
console.log("I can speek chinese");
}
}
Parent.prototype.color = 'yellow'
// ,
class Child extends Parent {
static width = 18
constructor(name,age){
super(name,age);
}
coding(){
console.log("I can code JS");
}
}
babel 코드 를 바 꿔 서...
"use strict";
var _createClass = function () {
function defineProperties(target, props) {
for (var i = 0; i < props.length; i++) {
var descriptor = props[i];
descriptor.enumerable = descriptor.enumerable || false;
descriptor.configurable = true;
if ("value" in descriptor) descriptor.writable = true;
Object.defineProperty(target, descriptor.key, descriptor);
}
}
return function (Constructor, protoProps, staticProps) {
if (protoProps) defineProperties(Constructor.prototype, protoProps);
if (staticProps) defineProperties(Constructor, staticProps);
return Constructor;
};
}();
function _possibleConstructorReturn(self, call) {
if (!self) {
throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
}
return call && (typeof call === "object" || typeof call === "function") ? call : self;
}
function _inherits(subClass, superClass) {
if (typeof superClass !== "function" && superClass !== null) {
throw new TypeError("Super expression must either be null or a function, not " + typeof superClass);
}
subClass.prototype = Object.create(superClass && superClass.prototype, {
constructor: {
value: subClass,
enumerable: false,
writable: true,
configurable: true
}
});
if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;
}
function _classCallCheck(instance, Constructor) {
if (!(instance instanceof Constructor)) {
throw new TypeError("Cannot call a class as a function");
}
}
var Parent = function () {
function Parent(name, age) {
_classCallCheck(this, Parent);
this.name = name;
this.age = age;
}
_createClass(Parent, [{
key: "speakSomething",
value: function speakSomething() {
console.log("I can speek chinese");
}
}]);
return Parent;
}();
Parent.height = 12;
Parent.prototype.color = 'yellow';
// ,
var Child = function (_Parent) {
_inherits(Child, _Parent);
function Child(name, age) {
_classCallCheck(this, Child);
return _possibleConstructorReturn(this, (Child.__proto__ || Object.getPrototypeOf(Child)).call(this, name, age));
}
_createClass(Child, [{
key: "coding",
value: function coding() {
console.log("I can code JS");
}
}]);
return Child;
}(Parent);
Child.width = 18;
구조 류 의 방법 은 변 하지 않 고 만 추가 되 었 습 니 다.상속 의 핵심 방법 으로 상속 을 실현 하 다.구체 적 인 절 차 는 다음 과 같다.먼저 부류 의 유형 을 판단 한 다음 에:
subClass.prototype = Object.create(superClass && superClass.prototype, {
constructor: {
value: subClass,
enumerable: false,
writable: true,
configurable: true
}
});
이 코드 를 번역 하면 바로
function F(){}
F.prototype = superClass.prototype
subClass.prototype = new F()
subClass.prototype.constructor = subClass
다음은 subClass.proto__ = superClass_inherits 핵심 사상 은 바로 다음 두 마디 입 니 다.
subClass.prototype.__proto__ = superClass.prototype
subClass.__proto__ = superClass
다음 그림 에서 보 듯 이:우선 subClass.prototype.proto__ = 슈퍼 클래스.prototype 은 하위 클래스 의 인 스 턴 스 인 스 턴 스 of 부모 클래스 가 true 이 고 하위 클래스 의 인 스 턴 스 는 부모 클래스 의 속성 에 접근 할 수 있 습 니 다.내부 속성 과 원형 속성 을 포함 합 니 다.
그 다음으로 subClass.proto__ = 슈퍼 클래스,정적 속성 도 접근 할 수 있 도록 보장 합 니 다.즉,이 예 에서 Child.height 입 니 다.
이상 은 ES6 에서 class 의 실현 원 리 를 상세 하 게 설명 하 는 상세 한 내용 입 니 다.ES6 에서 class 의 실현 원리 에 관 한 자 료 는 저희 의 다른 관련 글 을 주목 하 시기 바 랍 니 다!
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
(Javascript) ES6의 주요 특징 정리let을 사용하면 선언한 변수는 블록안에서만 유효하게 된다. const 역시 마찬가지로 블록스코프를 따른다 .const 와 let의 차이점은 const 는 상수로 값을 할당한다는 점이다. 따라서 값을 변경시키려고 하...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.