현재 작업중인 것과 같은 대규모 프로젝트에서 OOP를 사용하는 것을 선호합니다. JavaScript로 여러 클래스를 만들어야하지만 실수하지 않은 경우 적어도 두 가지 방법으로 수행 할 수 있습니다. 구문은 무엇이며 왜 그런 식으로 수행됩니까?

적어도 처음에는 타사 라이브러리를 사용하고 싶지 않습니다.
다른 답변을 찾으려면 JavaScript로 객체 지향 프로그래밍에 대해 설명하는 JavaScript로 객체 지향 프로그래밍 , 1 부 : 상속-Doc JavaScript 기사를 찾았습니다 . 상속을 수행하는 더 좋은 방법이 있습니까?

외부 라이브러리를 사용하지 않고 수행하는 방법은 다음과 같습니다.

// Define a class like this
function Person(name, gender){

   // Add object properties like this
   this.name = name;
   this.gender = gender;
}

// Add methods like this.  All Person objects will be able to invoke this
Person.prototype.speak = function(){
    alert("Howdy, my name is" + this.name);
};

// Instantiate new objects with 'new'
var person = new Person("Bob", "M");

// Invoke methods like this
person.speak(); // alerts "Howdy, my name is Bob"

실제 답변은 그보다 훨씬 더 복잡합니다. 예를 들어, JavaScript에는 클래스와 같은 것이 없습니다. JavaScript는 prototype기반 상속 체계를 사용합니다 .

또한 JavaScript에는 클래스와 유사한 기능을 제공하는 고유 한 스타일을 가진 인기있는 JavaScript 라이브러리가 많이 있습니다. 적어도 프로토 타입 과 jQuery 를 확인하고 싶을 것이다 .

이 중 "최고"를 결정하는 것은 Stack Overflow에서 거룩한 전쟁을 시작하는 좋은 방법입니다. 더 큰 JavaScript가 많은 프로젝트를 시작하는 경우 인기있는 라이브러리를 배우고 그 방식대로 수행하는 것이 좋습니다. 저는 프로토 타입 사람이지만 스택 오버플로는 jQuery에 의존하는 것 같습니다.

외부 라이브러리에 의존하지 않고 "한 가지 방법"만있는 한, 내가 쓴 방식은 거의 비슷합니다.

JavaScript에서 클래스를 정의하는 가장 좋은 방법은 클래스를 정의하지 않는 것입니다.

진심으로.

여러 가지 방향의 객체 지향이 있으며 그중 일부는 다음과 같습니다.

• 클래스 기반 OO (Smalltalk에서 처음 소개)
• 프로토 타입 기반 OO (자체에서 처음 소개)
• 멀티 메소드 기반 OO (CommonLoops가 처음 도입 한 것 같습니다.)
• 술어 기반 OO (모름)

그리고 아마 내가 모르는 다른 사람들.

JavaScript는 프로토 타입 기반 OO를 구현합니다. 프로토 타입 기반 OO에서는 클래스 템플릿에서 인스턴스화되는 대신 다른 개체를 복사하여 새 개체를 만들고 메서드는 클래스 대신 개체에 직접 존재합니다. 상속은 위임을 통해 수행됩니다. 객체에 메서드 나 속성이없는 경우 프로토 타입 (즉, 복제 된 객체)과 프로토 타입의 프로토 타입 등을 찾습니다.

다시 말해, 수업이 없습니다.

자바 스크립트는 실제로 그 모델에 대한 훌륭한 조정이있다 : 생성자. 기존 객체를 복사하여 객체를 만들 수있을뿐만 아니라 "얇은 공기가없는"객체를 만들 수도 있습니다. new키워드를 사용 하여 함수를 호출하면 해당 함수가 생성자가되고 this키워드는 현재 객체를 가리 키지 않고 새로 작성된 "빈"객체를 가리 킵니다. 따라서 원하는 방식으로 개체를 구성 할 수 있습니다. 이러한 방식으로 JavaScript 생성자는 기존 클래스 기반 OO에서 클래스 역할 중 하나를 수행 할 수 있습니다. 새 객체의 템플릿 또는 청사진 역할을합니다.

이제 JavaScript는 매우 강력한 언어이므로 원하는 경우 JavaScript 내에서 클래스 기반 OO 시스템을 쉽게 구현할 수 있습니다. 그러나 Java 가하는 방식이 아니라 실제로 필요한 경우에만이 작업을 수행해야합니다.

ES2015 수업

ES2015 사양에서는 프로토 타입 시스템에 비해 단순한 클래스 구문을 사용할 수 있습니다.

class Person {
  constructor(name) {
    this.name = name;
  }
  toString() {
    return `My name is ${ this.name }.`;
  }
}

class Employee extends Person {
  constructor(name, hours) {
    super(name);
    this.hours = hours;
  }
  toString() {
    return `${ super.toString() } I work ${ this.hours } hours.`;
  }
}

혜택

주요 이점은 정적 분석 도구가이 구문을보다 쉽게 ​​타겟팅 할 수 있다는 것입니다. 또한 클래스 기반 언어를 사용하는 다른 사람들이 해당 언어를 폴리 글롯으로 사용하는 것이 더 쉽습니다.

경고

현재 제한 사항에주의하십시오. 개인 속성을 얻으려면 Symbols 또는 WeakMaps 사용에 의존해야합니다 . 향후 릴리스에서는 이러한 누락 된 기능을 포함하도록 클래스가 확장 될 가능성이 높습니다.

지원하다

브라우저 지원 은 현재로서는 좋지 않지만 (IE를 제외한 거의 모든 사람이 지원), 이제 Babel 과 같은 트랜스 파일러에서 이러한 기능을 사용할 수 있습니다 .

자원

• ECMAScript 6의 클래스 (최종 시맨틱)
• 뭐? 기다림. 정말? 아뇨! (ES6 수업 및 개인 정보에 대한 게시물)
• 호환성 표 – 클래스
• 바벨 – 수업

저는 Daniel X. Moore 's를 선호합니다 {SUPER: SYSTEM}. 이는 실제 인스턴스 변수, 특성 기반 상속, 클래스 계층 및 구성 옵션과 같은 이점을 제공하는 학문입니다. 아래 예제는 실제 인스턴스 변수의 사용을 보여줍니다. 이것이 가장 큰 장점이라고 생각합니다. 인스턴스 변수가 필요하지 않고 공개 또는 개인 변수에만 만족하면 더 간단한 시스템이있을 수 있습니다.

function Person(I) {
  I = I || {};

  Object.reverseMerge(I, {
    name: "McLovin",
    age: 25,
    homeState: "Hawaii"
  });

  return {
    introduce: function() {
      return "Hi I'm " + I.name + " and I'm " + I.age;
    }
  };
}

var fogel = Person({
  age: "old enough"
});
fogel.introduce(); // "Hi I'm McLovin and I'm old enough"

와우, 그것은 실제로 그다지 유용하지는 않지만 서브 클래스를 추가하는 것을 살펴보십시오.

function Ninja(I) {
  I = I || {};

  Object.reverseMerge(I, {
    belt: "black"
  });

  // Ninja is a subclass of person
  return Object.extend(Person(I), {
    greetChallenger: function() {
      return "In all my " + I.age + " years as a ninja, I've never met a challenger as worthy as you...";
    }
  });
}

var resig = Ninja({name: "John Resig"});

resig.introduce(); // "Hi I'm John Resig and I'm 25"

또 다른 장점은 모듈과 특성 기반 상속 기능입니다.

// The Bindable module
function Bindable() {

  var eventCallbacks = {};

  return {
    bind: function(event, callback) {
      eventCallbacks[event] = eventCallbacks[event] || [];

      eventCallbacks[event].push(callback);
    },

    trigger: function(event) {
      var callbacks = eventCallbacks[event];

      if(callbacks && callbacks.length) {
        var self = this;
        callbacks.forEach(function(callback) {
          callback(self);
        });
      }
    },
  };
}

person 클래스를 갖는 예에는 바인딩 가능한 모듈이 있습니다.

function Person(I) {
  I = I || {};

  Object.reverseMerge(I, {
    name: "McLovin",
    age: 25,
    homeState: "Hawaii"
  });

  var self = {
    introduce: function() {
      return "Hi I'm " + I.name + " and I'm " + I.age;
    }
  };

  // Including the Bindable module
  Object.extend(self, Bindable());

  return self;
}

var person = Person();
person.bind("eat", function() {
  alert(person.introduce() + " and I'm eating!");
});

person.trigger("eat"); // Blasts the alert!

공개 : 저는 Daniel X. Moore {SUPER: SYSTEM}입니다. JavaScript로 클래스를 정의하는 가장 좋은 방법입니다.

var Animal = function(options) {
    var name = options.name;
    var animal = {};

    animal.getName = function() {
        return name;
    };

    var somePrivateMethod = function() {

    };

    return animal;
};

// usage
var cat = Animal({name: 'tiger'});

다음은 지금까지 사용한 자바 스크립트로 객체를 만드는 방법입니다.

예 1 :

obj = new Object();
obj.name = 'test';
obj.sayHello = function() {
    console.log('Hello '+ this.name);
}

예 2 :

obj = {};
obj.name = 'test';
obj.sayHello = function() {
    console.log('Hello '+ this.name);
}
obj.sayHello();

예 3 :

var obj = function(nameParam) {
    this.name = nameParam;
}
obj.prototype.sayHello = function() {
    console.log('Hello '+ this.name);
}

예제 4 : Object.create ()의 실제 이점 [이 링크]를 참조하십시오

var Obj = {
    init: function(nameParam) {
        this.name = nameParam;
    },
    sayHello: function() {
        console.log('Hello '+ this.name);
    }
};
var usrObj = Object.create(Obj);  // <== one level of inheritance

usrObj.init('Bob');
usrObj.sayHello();

예제 5 (사용자 정의 된 Crockford의 Object.create) :

Object.build = function(o) {
   var initArgs = Array.prototype.slice.call(arguments,1)
   function F() {
      if((typeof o.init === 'function') && initArgs.length) {
         o.init.apply(this,initArgs)
      }
   }
   F.prototype = o
   return new F()
}
MY_GLOBAL = {i: 1, nextId: function(){return this.i++}}  // For example

var userB = {
    init: function(nameParam) {
        this.id = MY_GLOBAL.nextId();
        this.name = nameParam;
    },
    sayHello: function() {
        console.log('Hello '+ this.name);
    }
};
var bob = Object.build(userB, 'Bob');  // Different from your code
bob.sayHello();

클래스는 다음과 같이 정의됩니다.

class Person {
    constructor(strName, numAge) {
        this.name = strName;
        this.age = numAge;
    }

    toString() {
        return '((Class::Person) named ' + this.name + ' & of age ' + this.age + ')';
    }
}

let objPerson = new Person("Bob",33);
console.log(objPerson.toString());

JavaScript에서 Douglas Crockford의 Prototypal Inheritance와 JavaScript 에서 Classical Inheritance를 읽어야한다고 생각합니다 .

그의 페이지에서 예 :

Function.prototype.method = function (name, func) {
    this.prototype[name] = func;
    return this;
};

효과? 보다 우아한 방법으로 메소드를 추가 할 수 있습니다.

function Parenizor(value) {
    this.setValue(value);
}

Parenizor.method('setValue', function (value) {
    this.value = value;
    return this;
});

또한 그의 비디오를 추천합니다 : Advanced JavaScript .

그의 페이지에서 더 많은 비디오를 찾을 수 있습니다 : http://javascript.crockford.com/ John Reisig 책에서 Douglas Crockfor의 웹 사이트에서 많은 예제를 찾을 수 있습니다.

나는 YUI / Crockford 공장 계획을 인정하지 않기 때문에 물건을 자체적으로 포함하고 확장 가능하게 유지하고 싶기 때문에 이것은 내 변형입니다.

function Person(params)
{
  this.name = params.name || defaultnamevalue;
  this.role = params.role || defaultrolevalue;

  if(typeof(this.speak)=='undefined') //guarantees one time prototyping
  {
    Person.prototype.speak = function() {/* do whatever */};
  }
}

var Robert = new Person({name:'Bob'});

이상적으로 typeof 테스트는 첫 번째 프로토 타입 방법과 같은 것입니다.

간단하게하려면 "새"키워드를 완전히 피하고 팩토리 메소드를 사용할 수 있습니다. JSON을 사용하여 객체를 만드는 것을 좋아하기 때문에 때로는 이것을 선호합니다.

function getSomeObj(var1, var2){
  var obj = {
     instancevar1: var1,
     instancevar2: var2,
     someMethod: function(param)
     {  
          //stuff; 
     }
  };
  return obj;
}

var myobj = getSomeObj("var1", "var2");
myobj.someMethod("bla");

그래도 큰 객체의 성능이 무엇인지 확실하지 않습니다.

var Student = (function () {
    function Student(firstname, lastname) {
        this.firstname = firstname;
        this.lastname = lastname;
        this.fullname = firstname + " " + lastname;
    }

    Student.prototype.sayMyName = function () {
        return this.fullname;
    };

    return Student;
}());

var user = new Student("Jane", "User");
var user_fullname = user.sayMyName();

이것이 TypeScript가 생성자를 사용하여 클래스를 JavaScript로 컴파일하는 방식입니다.

간단한 방법은 다음과 같습니다.

function Foo(a) {
  var that=this;

  function privateMethod() { .. }

  // public methods
  that.add = function(b) {
    return a + b;
  };
  that.avg = function(b) {
    return that.add(b) / 2; // calling another public method
  };
}

var x = new Foo(10);
alert(x.add(2)); // 12
alert(x.avg(20)); // 15

그 이유는 대한 that이가있다 this당신이 이벤트 핸들러 등의 방법을 제공하는 경우가 인스턴스화하는 동안 값을 저장하고 나중에 사용할 수 있도록, 다른 것을 결합 할 수 있습니다.

편집 : 그것은 가장 좋은 방법은 아니며 단순한 방법입니다. 나는 좋은 답변을 기다리고 있습니다!

접기 패턴을 사용하여 유형을 만들려고 할 수 있습니다.

    // Here is the constructor section.
    var myType = function () {
        var N = {}, // Enclosed (private) members are here.
            X = this; // Exposed (public) members are here.

        (function ENCLOSED_FIELDS() {
            N.toggle = false;
            N.text = '';
        }());

        (function EXPOSED_FIELDS() {
            X.count = 0;
            X.numbers = [1, 2, 3];
        }());

        // The properties below have access to the enclosed fields.
        // Careful with functions exposed within the closure of the
        // constructor, each new instance will have it's own copy.
        (function EXPOSED_PROPERTIES_WITHIN_CONSTRUCTOR() {
            Object.defineProperty(X, 'toggle', {
                get: function () {
                    var before = N.toggle;
                    N.toggle = !N.toggle;
                    return before;
                }
            });

            Object.defineProperty(X, 'text', {
                get: function () {
                    return N.text;
                },
                set: function (value) {
                    N.text = value;
                }
            });
        }());
    };

    // Here is the prototype section.
    (function PROTOTYPE() {
        var P = myType.prototype;

        (function EXPOSED_PROPERTIES_WITHIN_PROTOTYPE() {
            Object.defineProperty(P, 'numberLength', {
                get: function () {
                    return this.numbers.length;
                }
            });
        }());

        (function EXPOSED_METHODS() {
            P.incrementNumbersByCount = function () {
                var i;
                for (i = 0; i < this.numbers.length; i++) {
                    this.numbers[i] += this.count;
                }
            };
            P.tweak = function () {
                if (this.toggle) {
                    this.count++;
                }
                this.text = 'tweaked';
            };
        }());
    }());

이 코드는 myType 이라는 유형을 제공합니다 . toggle 과 text 라는 내부 개인 필드가 있습니다 . 또한 다음과 같은 노출 된 멤버가 있습니다. 필드 수 와 숫자 ; 속성 toggle , text 및 numberLength ; 방법 incrementNumbersByCount 및 비틀기 .

접기 패턴은 여기에 자세히 설명되어 있습니다 : Javascript 접기 패턴

@liammclennan의 답변에 대한 코드 골프 .

var Animal = function (args) {
  return {
    name: args.name,

    getName: function () {
      return this.name; // member access
    },

    callGetName: function () {
      return this.getName(); // method call
    }
  };
};

var cat = Animal({ name: 'tiger' });
console.log(cat.callGetName());

MooTools (My Object Oriented Tools)는 클래스 개념에 중점을 둡니다 . 상속으로 확장하고 구현할 수도 있습니다.

마스터하면 엄청나게 재사용 가능하고 강력한 자바 스크립트가됩니다.

상속이있는 객체 기반 클래스

var baseObject = 
{
     // Replication / Constructor function
     new : function(){
         return Object.create(this);   
     },

    aProperty : null,
    aMethod : function(param){
      alert("Heres your " + param + "!");
    },
}


newObject = baseObject.new();
newObject.aProperty = "Hello";

anotherObject = Object.create(baseObject); 
anotherObject.aProperty = "There";

console.log(newObject.aProperty) // "Hello"
console.log(anotherObject.aProperty) // "There"
console.log(baseObject.aProperty) // null

단순하고 달콤하며 완성됩니다.

베이스

function Base(kind) {
    this.kind = kind;
}

수업

// Shared var
var _greeting;

(function _init() {
    Class.prototype = new Base();
    Class.prototype.constructor = Class;
    Class.prototype.log = function() { _log.apply(this, arguments); }
    _greeting = "Good afternoon!";
})();

function Class(name, kind) {
    Base.call(this, kind);
    this.name = name;
}

// Shared function
function _log() {
    console.log(_greeting + " Me name is " + this.name + " and I'm a " + this.kind);
}

동작

var c = new Class("Joe", "Object");
c.log(); // "Good afternoon! Me name is Joe and I'm a Object"

Triptych의 예를 기반으로, 이것은 더 간단 할 수도 있습니다.

    // Define a class and instantiate it
    var ThePerson = new function Person(name, gender) {
        // Add class data members
        this.name = name;
        this.gender = gender;
        // Add class methods
        this.hello = function () { alert('Hello, this is ' + this.name); }
    }("Bob", "M"); // this instantiates the 'new' object

    // Use the object
    ThePerson.hello(); // alerts "Hello, this is Bob"

이것은 하나의 객체 인스턴스 만 생성하지만 클래스의 변수 및 메소드에 대한 많은 이름을 캡슐화하려는 경우에도 여전히 유용합니다. 일반적으로 생성자가 "Bob, M"인수를 사용하지 않는 경우 (예 : 데이터베이스 또는 네트워크와 같은 자체 데이터가있는 시스템을 호출하는 경우)

왜 JS를 사용하지 않는지 알기에는 JS가 아직 너무 새롭습니다 prototype.

JavaScript는 객체 지향적 이지만 Java, C # 또는 C ++와 같은 다른 OOP 언어와 는 근본적으로 다릅니다 . 그런 식으로 이해하려고하지 마십시오. 그 오래된 지식을 버리고 새로 시작하십시오. JavaScript는 다른 사고가 필요합니다.

주제에 대해 좋은 매뉴얼이나 무언가를 얻을 것을 제안합니다. 나는 ExtJS Tutorials 가 나에게 가장 좋은 것을 알았지 만, 읽기 전후에 프레임 워크를 사용하지는 않았습니다. 그러나 JavaScript 세계에서 무엇이 무엇인지에 대한 좋은 설명을 제공합니다. 죄송합니다. 내용이 삭제 된 것 같습니다. 대신 archive.org 사본에 대한 링크가 있습니다. 오늘 작동합니다. :피