JavaScriptでクラスを定義するために使用できる技法は何ですか？また、それらのトレードオフは何ですか？
私が今取り組んでいるような大規模プロジェクトではOOPを使うのが好きです。 JavaScriptでクラスをいくつか作成する必要がありますが、間違えない限り、それを実行する方法は少なくとも2つあります。構文はどうなりますか。また、そのようにしたのはなぜですか。
少なくとも最初は、サードパーティのライブラリを使用しないでください。
他の答えを探して、私はJavaScriptでのオブジェクト指向プログラミングについて議論している記事JavaScriptを使ったオブジェクト指向プログラミング、パートI：継承 - 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ライブラリが数多くあります。少なくとも Prototype および jQuery をチェックアウトする必要があります。
どちらが「最善」であるかを決定することは、Stack Overflowで聖戦を始めるための素晴らしい方法です。もっと大規模なJavaScriptを使用するプロジェクトに着手するのであれば、間違いなく人気のあるライブラリを学び、それを彼らのやり方でやる価値があります。私はプロトタイプの人ですが、Stack OverflowはjQueryに寄りかかっているようです。
外部ライブラリへの依存がない限り、それを実行するための唯一の方法がある限り、私が書いた方法はほとんどそれです。
JavaScriptでクラスを定義する最善の方法は、クラスを定義しないことです。
真剣に。
オブジェクト指向にはさまざまな種類があります。それらのいくつかは以下のとおりです。
- クラスベースのOO（Smalltalkによって最初に導入された）
- プロトタイプベースのOO（Selfによって最初に導入された）
- マルチメソッドベースのOO（CommonLoopsによって最初に導入されたと思います）
- 述語ベースのOO（わかりません）
そしておそらく私が知らない人もいます。
JavaScriptはプロトタイプベースのオブジェクト指向を実装しています。プロトタイプベースのオブジェクト指向では、新しいオブジェクトは（クラステンプレートからインスタンス化されるのではなく）他のオブジェクトをコピーすることによって作成され、メソッドはクラス内ではなくオブジェクト内に直接存在します。継承は委譲を介して行われます。オブジェクトにメソッドやプロパティがない場合は、プロトタイプ（つまり、複製元のオブジェクト）から検索され、次にプロトタイプのプロトタイプなどが参照されます。
言い換えれば、クラスはありません。
JavaScriptは実際にはそのモデルの良い微調整を持っています：コンストラクター。既存のオブジェクトをコピーしてオブジェクトを作成できるだけでなく、いわゆる「空中から」それらを構築することもできます。 newキーワードを使用して関数を呼び出すと、その関数はコンストラクタになり、thisキーワードは現在のオブジェクトを指すのではなく、新しく作成された "空の"オブジェクトを指します。だから、あなたは好きなようにオブジェクトを設定することができます。このようにして、JavaScriptのコンストラクタは、従来のクラスベースのオブジェクト指向におけるクラスの役割の1つを担うことができます。それは、新しいオブジェクトのテンプレートまたはブループリントとしての役割を果たすことです。
現在、JavaScriptは非常に強力な言語なので、必要に応じてクラスベースのOO system JavaScript内を実装するのは非常に簡単です。ただし、これが必要な場合にだけ実行してください。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 のようなtranspilerで使うことができます。
リソース
Daniel X. Mooreの{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"
もう1つの利点は、モジュールを持ち、継承ベースの形質を持つことができることです。
// 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);
});
}
},
};
}
人物クラスを持つ例としては、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!
ディスクロージャー：私は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'});
以下はJavaScriptでオブジェクトを作成する方法です。
例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());
Douglas Crockfordの JavaScriptのプロトタイプ継承 および 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;
});
私は彼のビデオもお勧めします： 高度なJavaScript 。
あなたは彼のページでより多くのビデオを見つけることができます： http://javascript.crockford.com/ ジョンReisig本であなたはダグラス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テストは、プロトタイプ化された最初のメソッドのようなものに対して行われます。
単純にするのであれば、 "new"キーワードを完全に避けてファクトリメソッドを使用することができます。 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 と呼ばれる内部プライベートフィールドを持ちます。それはまたこれらの公開されたメンバを持つでしょう：フィールド count と numbers ;プロパティ トグル 、 テキスト および numberLength 。メソッド incrementNumbersByCount と 微調整 。
折りたたみパターンはここで完全に詳述されています： Javascript折りたたみパターン
@ liammclennan's answer のコードゴルフ.
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());継承を伴うオブジェクトベースのクラス
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"引数はありません。たとえば、メソッドがデータベースやネットワークなどの独自のデータを使用してシステムを呼び出す場合です。
なぜこれがprototypeの事を使わないのかを見るには私はまだJSについてはまだ新しいです。
//new way using this and new
function Persons(name) {
this.name = name;
this.greeting = function() {
alert('Hi! I\'m ' + this.name + '.');
};
}
var gee=new Persons("gee");
gee.greeting();
var gray=new Persons("gray");
gray.greeting();
//old way
function createPerson(name){
var obj={};
obj.name=name;
obj.greeting = function(){
console.log("hello I am"+obj.name);
};
return obj;
}
var gita=createPerson('Gita');
gita.greeting();JavaScriptは オブジェクト指向 ですが、Java、C＃、C++などの他の _ oop _ 言語とは根本的に異なります。そのように理解しようとしないでください。その古い知識を捨てて、新たに始めましょう。 JavaScriptは別の考え方が必要です。
私はこの問題に関する良いマニュアルか何かを手に入れることを勧めます。 私は自分で ExtJS Tutorials を読むのの前後にこのフレームワークを使ったことがないけれど、私には最高のものを見つけました。しかし、それはJavaScriptの世界では何であるかについての良い説明を与えます。 申し訳ありませんが、そのコンテンツは削除されたようです。これは archive.org copy へのリンクです。今日は動作します。 ：P