간단한 자바스크립트 클래스 프레임워크 소개

진행 중인 JavaScript 책을 집필할 때 JavaScript 상속 시스템에 대해 상당한 시간을 보냈고 그 과정에서 클래식 클래스 상속을 시뮬레이션하기 위한 다양한 솔루션을 연구했습니다. 이러한 기술 솔루션 중에서 제가 가장 존경하는 것은 base2와 Prototype의 구현입니다.

이러한 솔루션에서 이념적 의미를 지닌 프레임워크를 추출해야 합니다. 프레임워크는 단순하고 재사용 가능하며 이해하기 쉽고 단순성과 유용성이 핵심입니다. 사용 예는 다음과 같습니다.

var Person = Class. extend ( {
 init: function (isDancing ) {
  this. dancing = isDancing;
 },
 dance: function ( ) {
  return this. dancing;
 }
} );
var Ninja = Person.extend({
 init: function(){
  this._super( false );
 },
 dance: function(){
  // Call the inherited version of dance()
  return this._super();
 },
 swingSword: function(){
  return true;
 }
});
var p = new Person(true);
p.dance(); // => true
var n = new Ninja();
n.dance(); // => false
n.swingSword(); // => true
// Should all be true
p instanceof Person && p instanceof Class &&
n instanceof Ninja && n instanceof Person && n instanceof Class

로그인 후 복사

몇 가지 주의할 사항이 있습니다.

생성자는 단순해야 합니다(init 함수를 통해 구현됨).
새로 정의된 비유는 기존 클래스
모든 '클래스'는 상위 클래스인 Class에서 상속되므로 새로운 클래스를 만들려면 해당 클래스는 Class의 하위 클래스여야 합니다.
가장 어려운 점: 상위 클래스의 재정의된 메서드에 액세스할 수 있어야 합니다(구성 컨텍스트를 통해).
위의 예에서는 Person 상위 클래스의 init() 및 dance() 메서드가 this._super()를 통해 호출되는 것을 확인할 수 있습니다.

결과에 매우 만족합니다. 클래스 정의를 구조화하고 단일 상속을 유지하며 슈퍼클래스 메서드를 호출할 수 있었습니다.

간단한 클래스 생성 및 상속

다음은 약 25줄의 구현입니다(읽기 쉽고 주석 있음). 제안을 환영하며 감사드립니다.

/* Simple JavaScript Inheritance
 * By John Resig http://ejohn.org/
 * MIT Licensed.
 */
// Inspired by base2 and Prototype
( function ( ) {
 var initializing = false, fnTest = /xyz/.test(function(){xyz;}) &#63; /\b_super\b/ : /.*/;
 // The base Class implementation (does nothing)
 this.Class = function(){};
  
 // Create a new Class that inherits from this class
 Class.extend = function(prop) {
  var _super = this.prototype;
   
  // Instantiate a base class (but only create the instance,
  // don't run the init constructor)
  initializing = true;
  var prototype = new this();
  initializing = false;
   
  // Copy the properties over onto the new prototype
  for (var name in prop) {
   // Check if we're overwriting an existing function
   prototype[name] = typeof prop[name] == "function" &&
    typeof _super[name] == "function" && fnTest.test(prop[name]) &#63;
    (function(name, fn){
     return function() {
      var tmp = this._super;
       
      // Add a new ._super() method that is the same method
      // but on the super-class
      this._super = _super[name];
       
      // The method only need to be bound temporarily, so we
      // remove it when we're done executing
      var ret = fn.apply(this, arguments);    
      this._super = tmp;
       
      return ret;
     };
    })(name, prop[name]) :
    prop[name];
  }
   
  // The dummy class constructor
  function Class() {
   // All construction is actually done in the init method
   if ( !initializing && this.init )
    this.init.apply(this, arguments);
  }
   
  // Populate our constructed prototype object
  Class.prototype = prototype;
   
  // Enforce the constructor to be what we expect
  Class.prototype.constructor = Class;
  // And make this class extendable
  Class.extend = arguments.callee;
   
  return Class;
 };
})();

로그인 후 복사

그 중에서 "초기화/init 호출 안 함"과 "_super 메소드 생성"이 가장 어렵습니다. 다음으로, 모든 사람이 구현 메커니즘을 더 잘 이해할 수 있도록 이에 대해 간략하게 소개하겠습니다.

초기화

함수 프로토타입 상속 방법을 설명하기 위해 먼저 하위 클래스의 프로토타입 속성을 상위 클래스의 인스턴스를 가리키는 전통적인 구현 프로세스를 살펴보겠습니다. 아래와 같이:

function Person ( ) { }
function Ninja ( ) { }
Ninja. prototype = new Person ( );
// Allows for instanceof to work:
(new Ninja()) instanceof Person

로그인 후 복사

그러나 여기서 어려운 점은 Person을 인스턴스화하고 생성자를 호출하는 결과 없이 'instatnceOf'의 효과만 얻고자 한다는 것입니다. 이를 방지하려면 코드에서 초기화하는 bool 매개 변수를 설정합니다. 이 매개 변수의 값은 부모 클래스가 인스턴스화되고 자식 클래스의 프로토타입 속성으로 구성된 경우에만 true가 됩니다. 이 처리의 목적은 실제 인스턴스화 중에 생성자를 호출하는 것과 디자인 상속 중에 생성자를 호출한 다음 실제 인스턴스화 중에 init 메서드를 호출하는 것의 차이점을 구별하는 것입니다.

if ( !initializing )
 this.init.apply(this, arguments);

로그인 후 복사

init 함수에서는 상당히 리소스 집약적인 코드(예: 서버 연결, DOM 요소 생성 등 누구도 예측할 수 없음)가 실행될 수 있으므로 특별히 주의할 가치가 있으므로 반드시 필요합니다. 구별을 하기 위해서입니다.

슈퍼 메소드

상속을 사용할 때 가장 일반적인 요구 사항은 하위 클래스가 상위 클래스의 재정의된 메서드에 액세스할 수 있어야 한다는 것입니다. 이 구현에서 최종 해결책은 슈퍼클래스 메서드를 가리키고 하위 클래스 메서드에서만 액세스할 수 있는 임시 메서드(._super)를 제공하는 것입니다.

var Person = Class. extend ( {
 init: function (isDancing ) {
  this. dancing = isDancing;
 }
} );
var Ninja = Person.extend({
 init: function(){
  this._super( false );
 }
});
var p = new Person(true);
p.dancing; // => true
var n = new Ninja();
n.dancing; // => false

로그인 후 복사

이 기능을 구현하려면 여러 단계가 필요합니다. 먼저, 기본 Person 인스턴스(위에서 언급한 생성 프로세스가 있는 클래스 인스턴스)를 리터럴 객체(Person.extend()의 함수 매개변수)와 병합하기 위해 확장을 사용합니다. 병합 프로세스 중에 간단한 검사가 이루어졌습니다. 먼저 병합할 속성이 함수인지 확인하고, 그렇다면 덮어쓸 슈퍼클래스 속성도 함수인지 확인하세요. 두 검사가 모두 true인 경우 이 속성에 대한 _super 메서드를 준비해야 합니다.

여기서 추가된 슈퍼 메소드를 캡슐화하기 위해 익명 클로저(함수 객체 반환)가 생성되었습니다. 실행 환경을 유지해야 할 필요성에 따라 함수가 실행된 후 재설정되도록 이전 this._super를 저장해야 합니다. 이는 동일한 이름이 있는 경우(원하지 않는 경우)에 도움이 됩니다. 실수로 개체 포인터를 잃어버렸습니다.) 예측할 수 없는 문제입니다.

그런 다음 슈퍼 클래스에서 재정의된 메서드만 가리키는 새로운 _super 메서드를 만듭니다. 다행스럽게도 _super를 변경하거나 범위를 변경할 필요가 없습니다. 함수의 실행 환경이 함수 호출 객체(포인터가 슈퍼 클래스를 가리킬 것임)에 따라 자동으로 변경되기 때문입니다.

마지막으로 리터럴 객체의 메서드를 호출합니다. 메서드 실행 중에 This._super()를 사용할 수 있습니다. 메서드가 실행된 후 _super 속성이 원래 상태로 재설정된 다음 함수를 종료합니다.

동일한 효과를 얻는 방법은 여러 가지가 있지만(이전에 super를 자체적으로 바인딩한 다음 인수.callee를 사용하여 액세스하는 것을 본 적이 있습니다), 이 방법이 유용성과 단순성의 특성을 가장 잘 반영한다고 생각합니다.

제가 완성한 JavaScript 프로토타입을 기반으로 한 많은 작업 중 여러분과 공유하기 위해 게시한 유일한 클래스 상속 구현 계획은 이것이었습니다. 간결한 코드(배우기 쉽고, 상속하기 쉽고, 다운로드가 적음)가 모든 사람이 논의할 수 있도록 제시되어야 한다고 생각합니다. 따라서 JavaScript 클래스 구성 및 상속을 배우는 사람들에게는 이 구현 계획이 좋은 시작입니다.

간단한 자바스크립트 클래스 프레임워크 소개_기본지식