OOP'u şu anda üzerinde çalıştığım gibi büyük ölçekli projelerde kullanmayı tercih ediyorum. JavaScript'te birkaç sınıf oluşturmam gerekiyor, ancak yanılmıyorsam, bunu yapmanın en az birkaç yolu var. Sözdizimi ne olurdu ve neden bu şekilde yapılsın?

En azından başta üçüncü taraf kitaplıkları kullanmaktan kaçınmak istiyorum.
Diğer yanıtları ararken JavaScript ile Nesneye Yönelik Programlama, Bölüm I: Kalıtım - Doc JavaScript'de nesne tabanlı programlamayı tartışan makaleyi buldum . Kalıtım yapmanın daha iyi bir yolu var mı?

Herhangi bir harici kitaplık kullanmadan bunu yapmanın yolu:

// 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"

Şimdi gerçek cevap bundan çok daha karmaşık. Örneğin, JavaScript'te sınıf diye bir şey yoktur. JavaScript prototypetabanlı bir kalıtım şeması kullanır .

Buna ek olarak, JavaScript'te sınıf benzeri işlevlere yaklaşmak için kendi tarzlarına sahip çok sayıda popüler JavaScript kitaplığı vardır. En azından Prototip ve jQuery'ye göz atmak isteyeceksiniz .

Bunlardan hangisinin "en iyi" olduğuna karar vermek Stack Overflow'da kutsal bir savaş başlatmak için harika bir yoldur. Daha büyük bir JavaScript ağır projeye başlıyorsanız, kesinlikle popüler bir kütüphaneyi öğrenmeye ve kendi yollarına yapmaya değer. Ben bir Prototip adamım, ama Stack Overflow jQuery'ye yaslanmış gibi görünüyor.

Dış kütüphanelere bağımlılık olmadan, sadece "bunu yapmanın bir yolu" olduğu sürece, yazdığım yöntem hemen hemen budur.

JavaScript'te bir sınıf tanımlamanın en iyi yolu bir sınıf tanımlamamaktır.

Ciddi anlamda.

Nesneye yönelik birkaç farklı lezzet vardır, bazıları:

• sınıf tabanlı OO (ilk olarak Smalltalk tarafından tanıtıldı)
• prototip tabanlı OO (ilk olarak Self tarafından tanıtıldı)
• multimetod tabanlı OO (ilk olarak CommonLoops tarafından tanıtıldı, sanırım)
• yüklem tabanlı OO (fikir yok)

Ve muhtemelen bilmediğim diğerleri.

JavaScript prototip tabanlı OO uygular. Prototip tabanlı OO'da, diğer nesneler (sınıf şablonundan başlatılmak yerine) kopyalanarak yeni nesneler oluşturulur ve yöntemler sınıflar yerine doğrudan nesnelerde yaşar. Devralma, yetki devri yoluyla yapılır: bir nesnenin yöntemi veya özelliği yoksa, prototip (leri) (yani klonlandığı nesne), sonra da prototipin prototipleri vb.

Başka bir deyişle: sınıf yok.

JavaScript'in aslında bu modelde hoş bir ayarı var: yapıcılar. Nesneleri sadece mevcut olanları kopyalayarak oluşturmakla kalmaz, aynı zamanda “ince havadan” da yapılandırabilirsiniz. newAnahtar kelimeyle bir işlevi çağırırsanız , bu işlev bir kurucu olur ve thisanahtar kelime geçerli nesneyi değil, yeni oluşturulan "boş" bir nesneyi gösterir. Böylece, bir nesneyi istediğiniz gibi yapılandırabilirsiniz. Bu şekilde, JavaScript kurucuları geleneksel sınıf tabanlı OO'daki sınıf rollerinden birini üstlenebilir: yeni nesneler için şablon veya ayrıntılı bir şablon görevi görür.

Artık JavaScript çok güçlü bir dildir, bu nedenle isterseniz JavaScript'e sınıf tabanlı bir OO sistemi uygulamak oldukça kolaydır . Ancak, bunu sadece Java'nın böyle yaptığı için değil, sadece gerçekten bir ihtiyacınız varsa yapmalısınız.

ES2015 Sınıfları

ES2015 spesifikasyonunda, prototip sistemi üzerinde sadece şeker olan sınıf sözdizimini kullanabilirsiniz.

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.`;
  }
}

Yararları

Temel faydası, statik analiz araçlarının bu sözdizimini hedeflemeyi daha kolay bulmasıdır. Sınıf temelli dillerden gelen başkalarının da dili çoklu dil olarak kullanması daha kolaydır.

Uyarılar

Mevcut sınırlamalarına karşı dikkatli olun. Özel özellikler elde etmek için , Semboller veya WeakMaps kullanmaya başvurulmalıdır . Gelecek sürümlerde, sınıflar büyük olasılıkla bu eksik özellikleri içerecek şekilde genişletilecektir.

Destek

Tarayıcı desteği şu anda çok iyi değil (IE hariç neredeyse herkes tarafından destekleniyor), ancak bu özellikleri şimdi Babel gibi bir transpiler ile kullanabilirsiniz .

kaynaklar

• ECMAScript 6'daki sınıflar (final semantiği)
• Ne? Bekle. Gerçekten mi? Oh hayır! (ES6 sınıfları ve gizlilik hakkında bir yazı)
• Uyumluluk Tablosu - Sınıflar
• Babel - Sınıflar

Daniel X. Moore'u kullanmayı tercih ederim {SUPER: SYSTEM}. Bu, gerçek örnek değişkenleri, özellik tabanlı kalıtım, sınıf hiyerarşileri ve yapılandırma seçenekleri gibi faydalar sağlayan bir disiplindir. Aşağıdaki örnek, en büyük avantaj olduğunu düşündüğüm gerçek örnek değişkenlerinin kullanımını göstermektedir. Örnek değişkenlere ihtiyacınız yoksa ve yalnızca genel veya özel değişkenlerden memnunsanız, muhtemelen daha basit sistemler vardır.

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"

Vay be, bu tek başına çok kullanışlı değil, ancak bir alt sınıf eklemeye bir göz atın:

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"

Diğer bir avantaj modül ve özellik tabanlı kalıtım yeteneğidir.

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

Kişi sınıfına örnek olarak, çiftlenebilir modül verilebilir.

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!

Açıklama: Ben Daniel X. Moore'um ve bu benim {SUPER: SYSTEM}. JavaScript'te bir sınıf tanımlamanın en iyi yoludur.

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'});

Javascript'te şimdiye kadar kullandığım nesneler oluşturmanın yolları

Örnek 1:

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

Örnek 2:

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

Örnek 3:

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

Örnek 4: Object.create () yönteminin gerçek faydaları. lütfen bu bağlantıya bakın

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();

Örnek 5 (özelleştirilmiş Crockford'un 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();

Bir sınıf şöyle tanımlanır:

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());

Ben Douglas Crockford en okumak gerektiğini düşünüyorum JavaScript Kalıtım ve JavaScript Klasik Kalıtım .

Sayfasından örnekler:

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

Etki? Yöntemleri daha zarif bir şekilde eklemenizi sağlar:

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

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

Videolarını da öneririm: Gelişmiş JavaScript .

Sayfasında daha fazla video bulabilirsiniz: http://javascript.crockford.com/ John Reisig kitabında Douglas Crockfor'un web sitesinde birçok örnek bulabilirsiniz.

YUI / Crockford fabrika planını kabul etmeyeceğim ve işleri kendi içinde ve genişletilebilir tutmayı sevdiğim için bu benim varyasyonum:

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'});

ideal olarak typeof testi ilk prototiplenen yöntem gibi bir şey üzerinde

Basit olanı seçiyorsanız, "yeni" anahtar kelimeden tamamen kaçınabilirsiniz ve yalnızca fabrika yöntemlerini kullanabilirsiniz. Bunu bazen tercih ederim, çünkü nesne oluşturmak için JSON kullanmayı seviyorum.

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

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

Yine de büyük nesneler için performans vuruşunun ne olduğundan emin değilim.

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();

Bu, TypeScript'in kurucu ile sınıfı JavaScript'e derlemesinin yolu.

Basit yol:

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

Bunun nedeni that, thisolay işleyici olarak bir yöntem verirseniz başka bir şeye bağlanabilmenizdir, böylece örneği oluşturma sırasında değeri kaydedip daha sonra kullanırsınız.

Düzenleme: kesinlikle en iyi yol değil, sadece basit bir yol. Ben de iyi cevaplar bekliyorum!

Muhtemelen Katlama Deseni'ni kullanarak bir tür oluşturmak istiyorsunuz:

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

Bu kod size myType adlı bir tür verecektir . Geçiş ve metin adı verilen dahili özel alanlara sahip olacaktır . Aynı zamanda bu maruz üyeden oluşacak: alanları saymak ve sayıları ; özellikler arasında geçiş , metin ve numberLength ; yöntemleri artışNumbersByCount ve tweak .

Katlama Deseni burada tamamen ayrıntılıdır: Javascript Katlama Deseni

@ Liammclennan'ın cevabı için golf kodunu yazınız .

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 (Nesneye Yönelik Araçlarım) sınıflar fikrine odaklanmıştır . Kalıtımla bile genişletebilir ve uygulayabilirsiniz.

Ustalaştığında gülünç olarak yeniden kullanılabilir, güçlü bir javascript yapar.

Miras Alan Nesne Tabanlı Sınıflar

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

Basit, tatlı ve halledilir.

Bir baz

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

Bir sınıf

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

Aksiyon

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

Triptych örneğine dayanarak, bu daha da basit olabilir:

    // 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"

Bu yalnızca tek bir nesne örneği oluşturur, ancak bir sınıftaki değişken ve yöntemler için bir grup adı kapsüllemek istiyorsanız yine de yararlıdır. Normalde yapıcı için "Bob, M" argümanları olmazdı, örneğin yöntemler veritabanı veya ağ gibi kendi verileri olan bir sisteme çağrılacaksa.

JS ile bunun neden bir prototypeşey kullanmadığını görmek için hala çok yeniyim .

JavaScript nesne yönelimlidir , ancak Java, C # veya C ++ gibi diğer OOP dillerinden kökten farklıdır . Böyle anlamaya çalışmayın. Bu eski bilgiyi atın ve yeniden başlayın. JavaScript'in farklı bir düşünceye ihtiyacı var.

Konuyla ilgili iyi bir el kitabı veya başka bir şey almanızı öneririm. Çerçeveyi okumadan önce veya sonra kullanmama rağmen, ExtJS Tutorials'ı kendim için en iyi buldum . Ancak JavaScript dünyasında ne olduğu hakkında iyi bir açıklama yapıyor. Maalesef, içeriğin kaldırıldığı anlaşılıyor. Bunun yerine archive.org copy bağlantısı var . Bugün çalışıyor. : P