プロトタイプを使う：
function Box(color) // Constructor
{
this.color = color;
}
Box.prototype.getColor = function()
{
return this.color;
};
"color"を隠す（ややプライベートなメンバー変数に似ている）：
function Box(col)
{
var color = col;
this.getColor = function()
{
return color;
};
}
使用法：
var blueBox = new Box("blue");
alert(blueBox.getColor()); // will alert blue
var greenBox = new Box("green");
alert(greenBox.getColor()); // will alert green
これは私がJavaScriptのOOPに似た振る舞いのために私が時々使うテンプレートです。ご覧のとおり、クロージャを使用してプライベート（静的およびインスタンスの両方）メンバーをシミュレートできます。 new MyClass()が返すものは、thisオブジェクトおよび「クラス」のprototypeオブジェクトに割り当てられたプロパティのみを持つオブジェクトです。
var MyClass = (function () {
// private static
var nextId = 1;
// constructor
var cls = function () {
// private
var id = nextId++;
var name = 'Unknown';
// public (this instance only)
this.get_id = function () { return id; };
this.get_name = function () { return name; };
this.set_name = function (value) {
if (typeof value != 'string')
throw 'Name must be a string';
if (value.length < 2 || value.length > 20)
throw 'Name must be 2-20 characters long.';
name = value;
};
};
// public static
cls.get_nextId = function () {
return nextId;
};
// public (shared across instances)
cls.prototype = {
announce: function () {
alert('Hi there! My id is ' + this.get_id() + ' and my name is "' + this.get_name() + '"!\r\n' +
'The next fellow\'s id will be ' + MyClass.get_nextId() + '!');
}
};
return cls;
})();
私はこのパターンを使って継承について尋ねられたので、ここに行きます：
// It's a good idea to have a utility class to wire up inheritance.
function inherit(cls, superCls) {
// We use an intermediary empty constructor to create an
// inheritance chain, because using the super class' constructor
// might have side effects.
var construct = function () {};
construct.prototype = superCls.prototype;
cls.prototype = new construct;
cls.prototype.constructor = cls;
cls.super = superCls;
}
var MyChildClass = (function () {
// constructor
var cls = function (surName) {
// Call super constructor on this instance (any arguments
// to the constructor would go after "this" in call(…)).
this.constructor.super.call(this);
// Shadowing instance properties is a little bit less
// intuitive, but can be done:
var getName = this.get_name;
// public (this instance only)
this.get_name = function () {
return getName.call(this) + ' ' + surName;
};
};
inherit(cls, MyClass); // <-- important!
return cls;
})();
それをすべて使用する例です。
var bob = new MyClass();
bob.set_name('Bob');
bob.announce(); // id is 1, name shows as "Bob"
var john = new MyChildClass('Doe');
john.set_name('John');
john.announce(); // id is 2, name shows as "John Doe"
alert(john instanceof MyClass); // true
ご覧のとおり、クラスは互いに正しく対話します（それらはMyClassからの静的IDを共有し、announceメソッドは正しいget_nameメソッドを使用するなど）。
注意すべきことは、インスタンスプロパティをシャドウする必要があるということです。実際には、inherit関数に、関数であるすべてのインスタンスプロパティ（hasOwnPropertyを使用）を通過させ、自動的にsuper_<method name>プロパティを追加することができます。これにより、一時的な値に格納してcallを使用してバインドする代わりに、this.super_get_name()を呼び出すことができます。
プロトタイプのメソッドの場合、上記のことを心配する必要はありません。スーパークラスのプロトタイプメソッドにアクセスしたい場合は、this.constructor.super.prototype.methodNameを呼び出すだけで済みます。あまり冗長にしたくない場合は、もちろん便利なプロパティを追加できます。 :)
ほとんどの場合、コンストラクタではなくゲッターとセッターの例を提供しているようです。つまり、 http://en.wikipedia.org/wiki/Constructor_（object-oriented_programming） です。
lunched-danは近くにありましたが、jsFiddleではこの例は機能しませんでした。
この例では、オブジェクトの作成中にのみ実行されるプライベートコンストラクター関数を作成します。
var color = 'black';
function Box()
{
// private property
var color = '';
// private constructor
var __construct = function() {
alert("Object Created.");
color = 'green';
}()
// getter
this.getColor = function() {
return color;
}
// setter
this.setColor = function(data) {
color = data;
}
}
var b = new Box();
alert(b.getColor()); // should be green
b.setColor('orange');
alert(b.getColor()); // should be orange
alert(color); // should be black
パブリックプロパティを割り当てる場合、コンストラクタは次のように定義できます。
var color = 'black';
function Box()
{
// public property
this.color = '';
// private constructor
var __construct = function(that) {
alert("Object Created.");
that.color = 'green';
}(this)
// getter
this.getColor = function() {
return this.color;
}
// setter
this.setColor = function(color) {
this.color = color;
}
}
var b = new Box();
alert(b.getColor()); // should be green
b.setColor('orange');
alert(b.getColor()); // should be orange
alert(color); // should be black
それでは、「コンストラクタ」プロパティのポイントは何ですか？どこでそれが役に立つのかわからない、何かアイデアがありますか？
コンストラクタプロパティのポイントは、JavaScriptにクラスがあるふりをする方法を提供することです。あなたができないことの1つは、オブジェクトのコンストラクタが作成された後にそれを変更することです。それは複雑です。
私は数年前にそれについてかなり包括的な記事を書きました： http://joost.zeekat.nl/constructors-considered-mildly-confusing.html
ここでの例： http://jsfiddle.net/FZ5nC/ /
このテンプレートを試してください。
<script>
//============================================================
// Register Namespace
//------------------------------------------------------------
var Name = Name||{};
Name.Space = Name.Space||{};
//============================================================
// Constructor - MUST BE AT TOP OF FILE
//------------------------------------------------------------
Name.Space.ClassName = function Name_Space_ClassName(){}
//============================================================
// Member Functions & Variables
//------------------------------------------------------------
Name.Space.ClassName.prototype = {
v1: null
,v2: null
,f1: function Name_Space_ClassName_f1(){}
}
//============================================================
// Static Variables
//------------------------------------------------------------
Name.Space.ClassName.staticVar = 0;
//============================================================
// Static Functions
//------------------------------------------------------------
Name.Space.ClassName.staticFunc = function Name_Space_ClassName_staticFunc(){
}
</script>
静的クラスを定義している場合は、ネームスペースを調整する必要があります。
<script>
//============================================================
// Register Namespace
//------------------------------------------------------------
var Shape = Shape||{};
Shape.Rectangle = Shape.Rectangle||{};
// In previous example, Rectangle was defined in the constructor.
</script>
クラスの例：
<script>
//============================================================
// Register Namespace
//------------------------------------------------------------
var Shape = Shape||{};
//============================================================
// Constructor - MUST BE AT TOP OF FILE
//------------------------------------------------------------
Shape.Rectangle = function Shape_Rectangle(width, height, color){
this.Width = width;
this.Height = height;
this.Color = color;
}
//============================================================
// Member Functions & Variables
//------------------------------------------------------------
Shape.Rectangle.prototype = {
Width: null
,Height: null
,Color: null
,Draw: function Shape_Rectangle_Draw(canvasId, x, y){
var canvas = document.getElementById(canvasId);
var context = canvas.getContext("2d");
context.fillStyle = this.Color;
context.fillRect(x, y, this.Width, this.Height);
}
}
//============================================================
// Static Variables
//------------------------------------------------------------
Shape.Rectangle.Sides = 4;
//============================================================
// Static Functions
//------------------------------------------------------------
Shape.Rectangle.CreateSmallBlue = function Shape_Rectangle_CreateSmallBlue(){
return new Shape.Rectangle(5,8,'#0000ff');
}
Shape.Rectangle.CreateBigRed = function Shape_Rectangle_CreateBigRed(){
return new Shape.Rectangle(50,25,'#ff0000');
}
</script>
インスタンス化の例：
<canvas id="painting" width="500" height="500"></canvas>
<script>
alert("A rectangle has "+Shape.Rectangle.Sides+" sides.");
var r1 = new Shape.Rectangle(16, 12, "#aa22cc");
r1.Draw("painting",0, 20);
var r2 = Shape.Rectangle.CreateSmallBlue();
r2.Draw("painting", 0, 0);
Shape.Rectangle.CreateBigRed().Draw("painting", 10, 0);
</script>
注意関数はA.B = function A_B（）として定義されています。これはあなたのスクリプトをデバッグしやすくするためです。 ChromeのInspect Elementパネルを開き、このスクリプトを実行して、デバッグバックトレースを展開します。
<script>
//============================================================
// Register Namespace
//------------------------------------------------------------
var Fail = Fail||{};
//============================================================
// Static Functions
//------------------------------------------------------------
Fail.Test = function Fail_Test(){
A.Func.That.Does.Not.Exist();
}
Fail.Test();
</script>
これはコンストラクタです。
function MyClass() {}
するとき
var myObj = new MyClass();
MyClassが実行され、そのクラスの新しいオブジェクトが返されます。
はい、あなたはこのようにクラス宣言の中でコンストラクタを定義することができます：
class Rectangle {
constructor(height, width) {
this.height = height;
this.width = width;
}
}
このチュートリアルはとても役に立ちました。このアプローチは、ほとんどのjQueryプラグインで使用されています。
var Class = function(methods) {
var klass = function() {
this.initialize.apply(this, arguments);
};
for (var property in methods) {
klass.prototype[property] = methods[property];
}
if (!klass.prototype.initialize) klass.prototype.initialize = function(){};
return klass;
};
今、
var Person = Class({
initialize: function(name, age) {
this.name = name;
this.age = age;
},
toString: function() {
return "My name is "+this.name+" and I am "+this.age+" years old.";
}
});
var alice = new Person('Alice', 26);
alert(alice.name); //displays "Alice"
alert(alice.age); //displays "26"
alert(alice.toString()); //displays "My name is Alice and I am 26 years old" in most browsers.
//IE 8 and below display the Object's toString() instead! "[Object object]"
このパターンは私によく役立ちました。このパターンでは、クラスを別々のファイルに作成し、それらを必要に応じてアプリケーション全体にロードします。
// Namespace
// (Creating new if not instantiated yet, otherwise, use existing and just add to it)
var myApp = myApp || {};
// "Package"
// Similar to how you would establish a package in other languages
(function() {
// "Class"
var MyClass = function(params) {
this.initialize(params);
}
// "Private Static" vars
// - Only accessible to functions in this class.
// - Doesn't get wiped out when we create a new instance.
var countInstances = 0;
var allInstances = [];
// "Private Static" functions
// - Same as above, but it's a function accessible
// only to other functions in this class.
function doSomething(){
}
// "Public Static" vars
// - Everyone has access.
// - Doesn't get wiped out when we create a new instance.
MyClass.counter = 0;
// "Public Static" functions
// - Same as above, but anyone can call this "static method".
// - Kinda like a singleton class situation.
MyClass.foobar = function(){
}
// Public properties and methods are built into the "prototype"
// - This is how each instance can become unique unto itself.
// - Establishing "p" as "local" (Static Private) variable
// simply so we don't have to keep typing "MyClass.prototype"
// for each property and function.
var p = MyClass.prototype;
// "Public" vars
p.id = null;
p.firstname = null;
p.lastname = null;
// "Private" vars
// - Only used by "this" instance.
// - There isn't "true" privacy for each
// instance so we have to fake it.
// - By tradition, we indicate "privacy"
// by prefixing it with an underscore.
// - So technically, anyone can access, but we simply
// don't tell anyone about it (e.g. in your API)
// so no one knows about it :)
p._foo = null;
p.initialize = function(params){
this.id = MyClass.counter++;
this.firstname = params.firstname;
this.lastname = params.lastname;
MyClass.counter++;
countInstances++;
allInstances.Push(this);
}
p.doAlert = function(theMessage){
alert(this.firstname + " " + this.lastname + " said: " + theMessage + ". My id:" + this.id + ". Total People:" + countInstances + ". First Person:" + allInstances[0].firstname + " " + allInstances[0].lastname);
}
// Assign class to app
myApp.MyClass = MyClass;
// Close the "Package"
}());
// Usage example:
var bob = new myApp.MyClass({ firstname : "bob",
lastname : "er"
});
bob.doAlert("hello there");
誰もまだクロージャを使っていないので、私はJavaScriptクロージャを使って何をするかを投稿するつもりです。
var user = function(id) {
// private properties & methods goes here.
var someValue;
function doSomething(data) {
someValue = data;
};
// constructor goes here.
if (!id) return null;
// public properties & methods goes here.
return {
id: id,
method: function(params) {
doSomething(params);
}
};
};
この解決策に対するコメントや提案は大歓迎です。 :)
上記のNickのサンプルを使用して、オブジェクト定義の最後のステートメントとしてreturnステートメントを使用して、オブジェクトwithout _パラメーターのコンストラクターを作成できます。以下のようにコンストラクタ関数を返すと、オブジェクトを作成するたびに__constructのコードが実行されます。
function Box()
{
var __construct = function() {
alert("Object Created.");
this.color = 'green';
}
this.color = '';
this.getColor = function() {
return this.color;
}
__construct();
}
var b = new Box();
たぶんそれはもう少し簡単になった、しかし以下は私が2017年に今思いついたものである：
class obj {
constructor(in_shape, in_color){
this.shape = in_shape;
this.color = in_color;
}
getInfo(){
return this.shape + ' and ' + this.color;
}
setShape(in_shape){
this.shape = in_shape;
}
setColor(in_color){
this.color = in_color;
}
}
上記のクラスを使用して、私は次のとおりです。
var newobj = new obj('square', 'blue');
//Here, we expect to see 'square and blue'
console.log(newobj.getInfo());
newobj.setColor('white');
newobj.setShape('sphere');
//Since we've set new color and shape, we expect the following: 'sphere and white'
console.log(newobj.getInfo());
ご覧のとおり、コンストラクタは2つのパラメータを受け取り、オブジェクトのプロパティを設定します。また、setter関数を使用してオブジェクトの色と形を変更し、これらの変更後にgetInfo()を呼び出してもその変更が残っていることを証明します。
少し遅れますが、これが役に立つことを願っています。私はこれをmochaユニットテストでテストしましたが、うまく機能しています。
あなたが TypeScript - マイクロソフトからのオープンソースを使うならば、彼らはそうします:-)
class BankAccount {
balance: number;
constructor(initially: number) {
this.balance = initially;
}
deposit(credit: number) {
this.balance += credit;
return this.balance;
}
}
TypeScriptを使用すると、javascript構造体にコンパイルされたOO構造体を偽造することができます。あなたが大規模なプロジェクトを始めているなら、それはあなたに多くの時間を節約するかもしれません、そしてそれはちょうどマイルストーン1.0バージョンに達しました。
http://www.typescriptlang.org/Content/TypeScript%20Language%20Specification.pdf
上記のコードは以下のものにコンパイルされます。
var BankAccount = (function () {
function BankAccount(initially) {
this.balance = initially;
}
BankAccount.prototype.deposit = function (credit) {
this.balance += credit;
return this.balance;
};
return BankAccount;
})();
JavaScriptでは、呼び出しタイプによって関数の動作が定義されます。
- 直接呼び出し
func() - オブジェクトに対するメソッド呼び出し
obj.func() - コンストラクタ 呼び出し
new func() - 間接呼び出し
func.call()またはfunc.apply()
new演算子を使用して呼び出すと、関数は コンストラクタ として呼び出されます。
function Cat(name) {
this.name = name;
}
Cat.prototype.getName = function() {
return this.name;
}
var myCat = new Cat('Sweet'); // Cat function invoked as a constructor
JavaScriptのインスタンスやプロトタイプオブジェクトには、コンストラクタ関数を参照するプロパティconstructorがあります。
Cat.prototype.constructor === Cat // => true
myCat.constructor === Cat // => true
コンストラクタプロパティについて この投稿 を確認してください。
ただいくつかのバラエティを提供するために。 ds.oop は、JavaScriptでコンストラクタを使ってクラスを宣言するのに適した方法です。可能な限りすべての継承タイプ（c＃でもサポートされていない1つのタイプを含む）、およびNiceであるインターフェースをサポートしています。
var Color = ds.make.class({
type: 'Color',
constructor: function (r,g,b) {
this.r = r; /* now r,g, and b are available to */
this.g = g; /* other methods in the Color class */
this.b = b;
}
});
var red = new Color(255,0,0); // using the new keyword to instantiate the class
http://www.jsoops.net/ はJsのおっとのためにかなり良いです。プライベートな、保護された、パブリックな変数と関数、そして継承機能も提供します。コード例：
var ClassA = JsOops(function (pri, pro, pub)
{// pri = private, pro = protected, pub = public
pri.className = "I am A ";
this.init = function (var1)// constructor
{
pri.className += var1;
}
pub.getData = function ()
{
return "ClassA(Top=" + pro.getClassName() + ", This=" + pri.getClassName()
+ ", ID=" + pro.getClassId() + ")";
}
pri.getClassName = function () { return pri.className; }
pro.getClassName = function () { return pri.className; }
pro.getClassId = function () { return 1; }
});
var newA = new ClassA("Class");
//***Access public function
console.log(typeof (newA.getData));
// function
console.log(newA.getData());
// ClassA(Top=I am A Class, This=I am A Class, ID=1)
//***You can not access constructor, private and protected function
console.log(typeof (newA.init)); // undefined
console.log(typeof (newA.className)); // undefined
console.log(typeof (newA.pro)); // undefined
console.log(typeof (newA.getClassName)); // undefined
ここでは、Javaスクリプト内の1つの点に注意する必要があります。これはクラスレス言語ですが、Javaスクリプト内の関数を使用してそれを実現できます。これを実現する最も一般的な方法は、Javaスクリプトで関数を作成し、オブジェクトを作成するには new keyword を使用し、プロパティとメソッドを定義するには this keyword を使用することです。以下はその例です。
// Function constructor
var calculator=function(num1 ,num2){
this.name="This is function constructor";
this.mulFunc=function(){
return num1*num2
};
};
var objCal=new calculator(10,10);// This is a constructor in Java script
alert(objCal.mulFunc());// method call
alert(objCal.name);// property call
//Constructors With Prototypes
var calculator=function(){
this.name="Constructors With Prototypes";
};
calculator.prototype.mulFunc=function(num1 ,num2){
return num1*num2;
};
var objCal=new calculator();// This is a constructor in Java script
alert(objCal.mulFunc(10,10));// method call
alert(objCal.name); // property call
上からBlixtの素晴らしいテンプレートを使用している間、私はそれがマルチレベル継承（MyGrandChildClassを拡張するMyChildClassを拡張するMyClassを拡張する）ではうまく動作しないことを発見しました - それは最初の親のコンストラクタを繰り返し呼び出します。 this.constructor.super.call(this, surName);を使う代わりに、マルチレベルの継承が必要な場合は、次のように定義されたchain関数を使ってchainSuper(this).call(this, surName);を使います。
function chainSuper(cls) {
if (cls.__depth == undefined) cls.__depth = 1; else cls.__depth++;
var depth = cls.__depth;
var sup = cls.constructor.super;
while (depth > 1) {
if (sup.super != undefined) sup = sup.super;
depth--;
}
return sup;
}