JavaScript : .extend 및 .prototype은 무엇에 사용됩니까?

나는 비교적 JavaScript에 익숙하지 않으며 사용중인 타사 라이브러리에서 .extend 및 .prototype이 계속 표시됩니다. Prototype javascript 라이브러리와 관련이 있다고 생각했지만 그렇지 않다고 생각하기 시작했습니다. 이것들은 무엇을 위해 사용됩니까?

Javascript의 상속은 프로토 타입 기반이므로 Date, Math 및 사용자 지정 객체와 같은 객체의 프로토 타입을 확장 할 수 있습니다.

Date.prototype.lol = function() {
 alert('hi');
};

( new Date ).lol() // alert message

위의 스 니펫에서 모든 Date 객체 (이미 기존 객체와 모든 새 객체)에 대한 메서드를 정의합니다 .

extend 일반적으로 기본 클래스에서 확장하려는 새 하위 클래스의 프로토 타입을 복사하는 고수준 함수입니다.

따라서 다음과 같이 할 수 있습니다.

extend( Fighter, Human )

그리고 Fighter생성자 / 객체의 프로토 타입을 상속 Human당신과 같은 방법을 정의 그렇다면, live과 die에 Human다음 Fighter또한 사람들을 상속합니다.

업데이트 된 설명 :

.extend가 내장되어 있지 않지만 종종 jQuery 또는 Prototype과 같은 라이브러리에서 제공되는 "고수준 기능"을 의미합니다.

.extend()다른 개체에서 개체를 쉽게 만들 수 있도록 많은 타사 라이브러리에 의해 추가되었습니다. 몇 가지 예는 http://api.jquery.com/jQuery.extend/ 또는 http://www.prototypejs.org/api/object/extend 를 참조하십시오 .

.prototype 객체의 "템플릿"(그것을 호출하려는 경우)을 참조하므로 객체의 프로토 타입에 메소드를 추가하여 (문자열, 날짜, 수학 또는 함수에 추가 할 라이브러리에서 많이 볼 수 있음) 해당 메소드 해당 개체의 모든 새 인스턴스에 추가됩니다.

extend예를 들면 방법 jQuery를 또는 PrototypeJS 대상 객체의 소스로부터 복사 모든 속성.

이제 prototype속성 에 대해서는 함수 개체의 구성원이며 언어 코어의 일부입니다.

모든 함수를 생성자 로 사용하여 새 개체 인스턴스를 만들 수 있습니다 . 모든 기능에는이prototype 속성 있습니다.

new함수 객체에 with 연산자 를 사용하면 새 객체가 생성되고 constructor에서 상속됩니다 prototype.

예를 들면 :

function Foo () {
}
Foo.prototype.bar = true;

var foo = new Foo();

foo.bar; // true
foo instanceof Foo; // true
Foo.prototype.isPrototypeOf(foo); // true

Javascript 상속은 모든 곳에서 열린 토론처럼 보입니다. "자바 스크립트 언어의 흥미로운 사례"라고 할 수 있습니다.

아이디어는 기본 클래스가 있고 상속과 유사한 기능을 얻기 위해 기본 클래스를 확장한다는 것입니다 (완전하지는 않지만 여전히).

전체 아이디어는 프로토 타입의 진정한 의미를 파악하는 것입니다. John Resig의 코드 (하는 일에 가까운 jQuery.extend)가이를 수행하는 코드 청크를 작성하고 base2 및 프로토 타입 라이브러리가 영감의 원천이라고 주장 할 때까지 이해하지 못했습니다 .

다음은 코드입니다.

    /* 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;
  };
})();

일을하는 세 부분이 있습니다. 먼저 속성을 반복하여 인스턴스에 추가합니다. 그 후, 나중에 객체에 추가 할 생성자를 생성합니다. 이제 주요 라인은 다음과 같습니다.

// Populate our constructed prototype object
Class.prototype = prototype;

// Enforce the constructor to be what we expect
Class.prototype.constructor = Class;

먼저 Class.prototype에서 원하는 프로토 타입을 가리 킵니다 . 이제 전체 개체가 변경되어 레이아웃을 다시 원래대로 되돌려 야합니다.

그리고 사용 예 :

var Car = Class.Extend({
  setColor: function(clr){
    color = clr;
  }
});

var volvo = Car.Extend({
   getColor: function () {
      return color;
   }
});

여기에 대한 자세한 내용은 John Resig 의 게시물 에서 Javascript Inheritance를 참조하십시오 .

extend타사 라이브러리의 일부 기능은 다른 기능보다 복잡합니다. 예를 들어 Knockout.js 에는 jQuery가 수행하는 검사 중 일부가없는 최소한의 간단한 것이 포함되어 있습니다.

function extend(target, source) {
    if (source) {
        for(var prop in source) {
            if(source.hasOwnProperty(prop)) {
                target[prop] = source[prop];
            }
        }
    }
    return target;
}

• .extends() 다른 클래스의 자식 인 클래스를 만듭니다.
  배후에서는 Child.prototype.__proto__값을로 설정하여 Parent.prototype
  메서드가 상속되도록합니다.
  
• .prototype 기능을 서로 상속합니다.
  
• .__proto__ Prototype의 getter / setter입니다.