Saya lebih suka menggunakan OOP dalam proyek skala besar seperti yang saya kerjakan sekarang. Saya perlu membuat beberapa kelas dalam JavaScript tetapi, jika saya tidak salah, setidaknya ada beberapa cara untuk melakukannya. Apa yang akan menjadi sintaksis dan mengapa itu dilakukan dengan cara itu?

Saya ingin menghindari penggunaan perpustakaan pihak ketiga - setidaknya pada awalnya.
Mencari jawaban lain, saya menemukan artikel Pemrograman Berorientasi Objek dengan JavaScript, Bagian I: Warisan - Doc JavaScript yang membahas pemrograman berorientasi objek dalam JavaScript. Apakah ada cara yang lebih baik untuk melakukan warisan?

Inilah cara untuk melakukannya tanpa menggunakan perpustakaan eksternal:

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

Sekarang jawaban sebenarnya jauh lebih kompleks dari itu. Misalnya, tidak ada yang namanya kelas dalam JavaScript. JavaScript menggunakan prototypeskema pewarisan berbasis.

Selain itu, ada banyak perpustakaan JavaScript populer yang memiliki gaya mereka sendiri yang mendekati fungsionalitas seperti kelas dalam JavaScript. Anda ingin memeriksa setidaknya Prototipe dan jQuery .

Memutuskan yang mana di antara yang terbaik adalah yang terbaik untuk memulai perang suci di Stack Overflow. Jika Anda memulai proyek JavaScript-berat yang lebih besar, itu pasti layak belajar perpustakaan populer dan melakukannya dengan cara mereka. Saya seorang pria Prototipe, tetapi Stack Overflow tampaknya condong ke jQuery.

Sejauh hanya ada "satu cara untuk melakukannya", tanpa ada ketergantungan pada perpustakaan eksternal, cara saya menulis cukup banyak.

Cara terbaik untuk mendefinisikan kelas dalam JavaScript adalah dengan tidak mendefinisikan kelas.

Serius.

Ada beberapa rasa yang berbeda dari orientasi objek, beberapa di antaranya adalah:

• OO berbasis kelas (pertama kali diperkenalkan oleh Smalltalk)
• OO berbasis prototipe (pertama kali diperkenalkan oleh Self)
• OO berbasis multimethod (pertama kali diperkenalkan oleh CommonLoops, saya pikir)
• OO berbasis predikat (tidak tahu)

Dan mungkin orang lain yang saya tidak tahu.

JavaScript mengimplementasikan OO berbasis prototipe. Dalam OO berbasis prototipe, objek baru dibuat dengan menyalin objek lain (bukannya dibuat dari templat kelas) dan metode hidup langsung di objek, bukan di kelas. Warisan dilakukan melalui pendelegasian: jika suatu objek tidak memiliki metode atau properti, objek tersebut dilihat pada prototipe-nya (yaitu objek yang dikloning), maka prototipe prototipe dan sebagainya.

Dengan kata lain: tidak ada kelas.

JavaScript sebenarnya memiliki tweak yang bagus untuk model itu: konstruktor. Anda tidak hanya dapat membuat objek dengan menyalin yang ada, Anda juga dapat membuat mereka "kehabisan udara", sehingga untuk berbicara. Jika Anda memanggil fungsi dengan newkata kunci, fungsi itu menjadi konstruktor dan thiskata kunci tidak akan mengarah ke objek saat ini melainkan ke objek "kosong" yang baru dibuat. Jadi, Anda dapat mengonfigurasi objek dengan cara apa pun yang Anda suka. Dengan cara itu, konstruktor JavaScript dapat mengambil salah satu peran kelas dalam OO berbasis kelas tradisional: berfungsi sebagai templat atau cetak biru untuk objek baru.

Sekarang, JavaScript adalah bahasa yang sangat kuat, sehingga cukup mudah untuk menerapkan sistem OO berbasis kelas dalam JavaScript jika Anda mau. Namun, Anda hanya harus melakukan ini jika Anda benar-benar membutuhkannya dan bukan hanya karena itulah cara Jawa melakukannya.

Kelas ES2015

Dalam spesifikasi ES2015, Anda dapat menggunakan sintaks kelas yang hanya berupa gula di atas sistem prototipe.

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

Manfaat

Manfaat utama adalah alat analisis statis lebih mudah untuk menargetkan sintaks ini. Juga lebih mudah bagi orang lain yang berasal dari bahasa berbasis kelas untuk menggunakan bahasa sebagai polyglot.

Peringatan

Berhati-hatilah dengan keterbatasannya saat ini. Untuk mencapai properti pribadi, seseorang harus menggunakan Simbol atau WeakMaps . Dalam rilis mendatang, kelas kemungkinan besar akan diperluas untuk memasukkan fitur-fitur yang hilang ini.

Dukung

Dukungan browser saat ini tidak terlalu bagus (didukung oleh hampir semua orang kecuali IE), tetapi Anda dapat menggunakan fitur ini sekarang dengan transpiler seperti Babel .

Sumber daya

• Kelas-kelas dalam ECMAScript 6 (semantik terakhir)
• Apa? Tunggu. Betulkah? Oh tidak! (posting tentang kelas ES6 dan privasi)
• Tabel Kompatibilitas - Kelas
• Babel - Kelas

Saya lebih suka menggunakan Daniel X. Moore's {SUPER: SYSTEM}. Ini adalah disiplin yang memberikan manfaat seperti variabel instance benar, pewarisan berbasis sifat, hierarki kelas, dan opsi konfigurasi. Contoh di bawah ini mengilustrasikan penggunaan variabel instan yang benar, yang saya percaya adalah keuntungan terbesar. Jika Anda tidak memerlukan variabel instan dan senang dengan hanya variabel publik atau pribadi, maka mungkin ada sistem yang lebih sederhana.

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"

Wow, itu tidak terlalu berguna untuknya sendiri, tetapi lihatlah menambahkan subclass:

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"

Keuntungan lain adalah kemampuan untuk memiliki modul dan warisan berbasis sifat.

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

Contoh memiliki kelas orang termasuk modul bindable.

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!

Pengungkapan: Saya adalah Daniel X. Moore dan ini adalah milik saya {SUPER: SYSTEM}. Ini adalah cara terbaik untuk mendefinisikan kelas dalam 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'});

Berikut ini adalah cara untuk membuat objek dalam javascript, yang telah saya gunakan sejauh ini

Contoh 1:

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

Contoh 2:

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

Contoh 3:

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

Contoh 4: Manfaat sebenarnya dari Object.create (). silakan lihat [tautan ini]

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

Contoh 5 (Object.create Crockford yang disesuaikan):

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

Kelas didefinisikan seperti ini:

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

Saya pikir Anda harus membaca Douglas Crockford's Prototypal Inheritance in JavaScript dan Classical Inheritance in JavaScript .

Contoh dari halamannya:

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

Efek? Ini akan memungkinkan Anda untuk menambahkan metode dengan cara yang lebih elegan:

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

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

Saya juga merekomendasikan videonya: Advanced JavaScript .

Anda dapat menemukan lebih banyak video di halamannya: http://javascript.crockford.com/ Dalam buku John Reisig Anda dapat menemukan banyak contoh dari situs web Douglas Crockfor.

Karena saya tidak akan mengakui rencana pabrik YUI / Crockford dan karena saya suka menjaga segala sesuatunya tetap dan dapat dikembangkan, inilah variasi saya:

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

di mana idealnya tes typeof dilakukan pada sesuatu seperti metode pertama yang dibuat prototipe

Jika Anda ingin yang sederhana, Anda dapat menghindari kata kunci "baru" seluruhnya dan cukup menggunakan metode pabrik. Saya lebih suka ini, kadang-kadang, karena saya suka menggunakan JSON untuk membuat objek.

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

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

Tapi saya tidak yakin apa yang terjadi pada kinerja untuk objek besar.

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

Itulah cara TypeScript mengkompilasi kelas dengan konstruktor ke JavaScript.

Cara sederhananya adalah:

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

Alasannya thatadalah bahwa itu thisdapat terikat pada sesuatu yang lain jika Anda memberikan metode sebagai pengendali event, sehingga Anda menyimpan nilai selama instantiasi dan menggunakannya nanti.

Sunting: ini jelas bukan cara terbaik, hanya cara sederhana. Saya juga menunggu jawaban yang bagus!

Anda mungkin ingin membuat jenis dengan menggunakan Pola Lipat:

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

Kode itu akan memberi Anda jenis yang disebut myType . Ini akan memiliki bidang pribadi internal yang disebut toggle dan teks . Ini juga akan memiliki anggota yang terpapar ini: bidang menghitung dan angka ; toggle properti , teks dan numberLength ; metode incrementNumbersByCount dan tweak .

Pola Lipat sepenuhnya rinci di sini: Pola Lipat Javascript

Kode golf untuk jawaban @ 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 (Alat Berorientasi Objek Saya) berpusat pada gagasan kelas . Anda bahkan dapat memperluas dan menerapkan dengan warisan.

Ketika dikuasai, itu membuat javascript yang kuat dan dapat digunakan kembali.

Kelas Berbasis Objek dengan Warisan

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

Sederhana, manis, dan sudah selesai.

Basis

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

Kelas

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

Tindakan

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

Berdasarkan contoh dari Triptych, ini bahkan mungkin lebih sederhana:

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

Ini hanya membuat instance objek tunggal, tetapi masih berguna jika Anda ingin merangkum sekelompok nama untuk variabel dan metode dalam kelas. Biasanya tidak akan ada argumen "Bob, M" untuk konstruktor, misalnya jika metode akan panggilan ke sistem dengan data sendiri, seperti database atau jaringan.

Saya masih terlalu baru dengan JS untuk melihat mengapa ini tidak menggunakan prototypehal itu.

JavaScript berorientasi objek , tetapi secara radikal berbeda dari bahasa OOP lainnya seperti Java, C # atau C ++. Jangan mencoba memahaminya seperti itu. Buang pengetahuan lama itu dan mulai lagi. JavaScript membutuhkan pemikiran yang berbeda.

Saya sarankan untuk mendapatkan manual yang bagus atau sesuatu tentang masalah itu. Saya sendiri menemukan Tutorial ExtJS yang terbaik untuk saya, meskipun saya belum pernah menggunakan framework sebelum atau setelah membacanya. Tapi itu memang memberikan penjelasan yang baik tentang apa yang ada di dunia JavaScript. Maaf, sepertinya konten tersebut telah dihapus. Berikut adalah tautan ke salinan archive.org . Bekerja hari ini. : P