웹 프론트엔드 JS 튜토리얼 간단한 자바스크립트 클래스 프레임워크 소개_기본지식

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

May 16, 2016 pm 03:52 PM
javascript 액자

진행 중인 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;}) ? /\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]) ?
    (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 클래스 구성 및 상속을 배우는 사람들에게는 이 구현 계획이 좋은 시작입니다.

본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

뜨거운 기사 태그

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

Java 프레임워크에 대한 상용 지원의 비용 효율성을 평가하는 방법 Java 프레임워크에 대한 상용 지원의 비용 효율성을 평가하는 방법 Jun 05, 2024 pm 05:25 PM

Java 프레임워크에 대한 상용 지원의 비용 효율성을 평가하는 방법

PHP 프레임워크의 경량 옵션은 애플리케이션 성능에 어떤 영향을 줍니까? PHP 프레임워크의 경량 옵션은 애플리케이션 성능에 어떤 영향을 줍니까? Jun 06, 2024 am 10:53 AM

PHP 프레임워크의 경량 옵션은 애플리케이션 성능에 어떤 영향을 줍니까?

Golang 프레임워크 문서화 모범 사례 Golang 프레임워크 문서화 모범 사례 Jun 04, 2024 pm 05:00 PM

Golang 프레임워크 문서화 모범 사례

다양한 애플리케이션 시나리오에 가장 적합한 golang 프레임워크를 선택하는 방법 다양한 애플리케이션 시나리오에 가장 적합한 golang 프레임워크를 선택하는 방법 Jun 05, 2024 pm 04:05 PM

다양한 애플리케이션 시나리오에 가장 적합한 golang 프레임워크를 선택하는 방법

PHP 프레임워크의 학습 곡선은 다른 언어 프레임워크와 어떻게 비교됩니까? PHP 프레임워크의 학습 곡선은 다른 언어 프레임워크와 어떻게 비교됩니까? Jun 06, 2024 pm 12:41 PM

PHP 프레임워크의 학습 곡선은 다른 언어 프레임워크와 어떻게 비교됩니까?

Java 프레임워크의 성능 비교 Java 프레임워크의 성능 비교 Jun 04, 2024 pm 03:56 PM

Java 프레임워크의 성능 비교

golang 프레임워크 개발에 대한 자세한 실제 설명: 질문과 답변 golang 프레임워크 개발에 대한 자세한 실제 설명: 질문과 답변 Jun 06, 2024 am 10:57 AM

golang 프레임워크 개발에 대한 자세한 실제 설명: 질문과 답변

Golang 프레임워크 성능 비교: 현명한 선택을 위한 측정항목 Golang 프레임워크 성능 비교: 현명한 선택을 위한 측정항목 Jun 05, 2024 pm 10:02 PM

Golang 프레임워크 성능 비교: 현명한 선택을 위한 측정항목

See all articles