Back to list
JavaScript の Constructor 関数（オブジェクトのコピー＆ペーストを止める）
JavaScript Constructor Functions (Stop Copy-Pasting Objects)
Translated: 2026/3/16 14:02:28
Japanese Translation
推測します。あなたは JavaScript のオブジェクトをこのように学んだはずです：
const dog1 = {
name: "Rocky",
breed: "Labrador",
bark() {
console.log("Woof!");
}
};
const dog2 = {
name: "Max",
breed: "Beagle",
bark() {
console.log("Woof!");
}
};
これで大丈夫です。
しかし、不安な質問があります。
50 匹の犬が必要になったとき、どうなりますか？
同じオブジェクトを再度再度コピー＆ペーストするのですか？
それがあなたの計画なら……
今日あなたに JavaScript のスキルをアップグレードする必要があります 😄
これが Constructor 関数が存在する理由です。
順番に分解します。
ロボットでゲームを構築していると想像してください。
各ロボットは以下の要素を持ちます：
name
エネルギーレベル
充電する能力
あなたは以下のように書くことができます：
const robot1 = {
name: "RX-1",
energy: 100,
recharge() {
this.energy += 20;
}
};
const robot2 = {
name: "RX-2",
energy: 100,
recharge() {
this.energy += 20;
}
};
何か気づいたでしょうか？
構造は同じです。
あなたはただ値を変えるだけです。
つまり、我们が必要なものはブループリントです。
Constructor 関数は、オブジェクトのためのファクトリーブループリントの基本的なものになります。
function Robot(name, energy) {
this.name = name;
this.energy = energy;
}
ここで重要な 2 つのポイントがあります：
Function 名は大文字から始まります
この this キーワードを使用します
なぜですか？
なぜなら、この new キーワードはこの新しいオブジェクトを表現するから
const robot1 = new Robot("RX-1", 100);
const robot2 = new Robot("RX-2", 80);
const robot3 = new Robot("RX-3", 50);
ボーン
これでオブジェクトを確認します：
console.log(robot1);
出力：
{
name: "RX-1",
energy: 100
}
オブジェクトを手動で書く代わりに、瞬間的に生成します。
はるかに良いです。
function Robot(name, energy) {
this.name = name;
this.energy = energy;
}
const robot1 = new Robot("RX-1", 100);
const robot2 = new Robot("RX-2", 80);
const robot3 = new Robot("RX-3", 50);
console.log(robot1);
console.log(robot2);
console.log(robot3);
このものをコピペしてみてください：
CodePen
JSFiddle
ブラウザコンソール
そしてオブジェクトがどのように生成されるかを確認してください。
new 実際に？
最も多くの開発者は new を魔法の呪文のように使いながら、それを何をするのか知らないままです。
魔法を曝け出します。
const robot1 = new Robot("RX-1", 100);
を実行するとき、JavaScript は秘密裏に 4 つのステップを実行します。
{}
this を新しいオブジェクトに
Constructor 内：
this.name = name
実際には：
robot1.name = name
これが JavaScript の継承が始まる場所です。
最終結果：
{
name: "RX-1",
energy: 100
}
つまり、new キーワードは基本的には言います：
「このブループリントを使用してオブジェクトを構築」。
あなたは以下のようにするのを欲張るかもしれません：
function Robot(name, energy) {
this.name = name;
this.energy = energy;
this.recharge = function () {
this.energy += 20;
console.log(this.name + " recharged!");
};
}
完璧に機能します。
const robot1 = new Robot("RX-1", 100);
robot1.recharge();
しかし、隠れた問題があります。
各ロボットを構築するたびに：
const robot2 = new Robot("RX-2", 80);
JavaScript は recharge 関数の全く新しいコピーを作成します。
つまり、100 匹のロボットを作成したら → メモリ内の 100 つの関数。
それは非効率的です。
本当の JavaScript の力を手元に。
function Robot(name, energy) {
this.name = name;
this.energy = energy;
this.recharge = function () {
this.energy += 20;
};
}
const r1 = new Robot("RX-1", 100);
const r2 = new Robot("RX-2", 80);
console.log(r1.recharge === r2.recharge); // false
出力：
false
各ロボットには独自の関数のコピーがあります。
Constructor 内にメソッドを置く代わりに、prototype を使用します。
Prototype はすべてのオブジェクトが同じメソッドを共有することを可能にします。
まず Constructor を定義します：
function Robot(name, energy) {
this.name = name;
this.energy = energy;
}
次にprototype を使用してメソッドを実装します：
Robot.prototype.recharge = function () {
this.energy += 20;
console.log(this.name + " is recharging ⚡");
};
次にロボットを作成します：
const robot1 = new Robot("RX-1", 100);
const robot2 = new Robot("RX-2", 80);
メソッドを使用します：
robot1.recharge();
robot2.recharge();
出力：
RX-1 is recharging ⚡
RX-2 is recharging ⚡
ここが重要な部分です。
recharge() 関数は一度しかメモリに存在しません
Original Content
Let me guess something.
You learned JavaScript objects like this:
const dog1 = {
name: "Rocky",
breed: "Labrador",
bark() {
console.log("Woof!");
}
};
const dog2 = {
name: "Max",
breed: "Beagle",
bark() {
console.log("Woof!");
}
};
Looks fine.
But here’s the uncomfortable question.
What happens when you need 50 dogs?
Are you going to copy-paste the same object again and again?
If that’s your plan…
We need to upgrade your JavaScript skills today 😄
This is exactly why constructor functions exist.
Let’s break it down step by step.
Imagine you're building a game with robots.
Each robot has:
name
energy level
ability to recharge
You could write:
const robot1 = {
name: "RX-1",
energy: 100,
recharge() {
this.energy += 20;
}
};
const robot2 = {
name: "RX-2",
energy: 100,
recharge() {
this.energy += 20;
}
};
Notice something?
The structure is identical.
You're just changing values.
That means we need a blueprint.
A constructor function is basically a factory blueprint for objects.
function Robot(name, energy) {
this.name = name;
this.energy = energy;
}
Two important things here:
Function name starts with a capital letter
We use the this keyword
Why?
Because this represents the new object being created.
new
Now we can create robots like this:
const robot1 = new Robot("RX-1", 100);
const robot2 = new Robot("RX-2", 80);
const robot3 = new Robot("RX-3", 50);
Boom
Now check the object:
console.log(robot1);
Output:
{
name: "RX-1",
energy: 100
}
Instead of writing objects manually, we generate them instantly.
Much better.
function Robot(name, energy) {
this.name = name;
this.energy = energy;
}
const robot1 = new Robot("RX-1", 100);
const robot2 = new Robot("RX-2", 80);
const robot3 = new Robot("RX-3", 50);
console.log(robot1);
console.log(robot2);
console.log(robot3);
Try pasting this in:
CodePen
JSFiddle
browser console
and watch how the objects are generated.
new Actually Do?
Most developers use new like a magic spell without knowing what it does.
Let’s expose the magic.
When you run:
const robot1 = new Robot("RX-1", 100);
JavaScript secretly performs four steps.
{}
this to the new object
Inside the constructor:
this.name = name
Actually becomes:
robot1.name = name
This is where JavaScript inheritance begins.
Final result:
{
name: "RX-1",
energy: 100
}
So the new keyword basically says:
“Create an object using this blueprint.”
You might be tempted to do this:
function Robot(name, energy) {
this.name = name;
this.energy = energy;
this.recharge = function () {
this.energy += 20;
console.log(this.name + " recharged!");
};
}
Works perfectly.
const robot1 = new Robot("RX-1", 100);
robot1.recharge();
But there's a hidden problem.
Every time you create a robot:
const robot2 = new Robot("RX-2", 80);
JavaScript creates a brand new copy of the recharge function.
So if you create 100 robots → 100 functions in memory.
That’s inefficient.
Time for the real JavaScript power.
function Robot(name, energy) {
this.name = name;
this.energy = energy;
this.recharge = function () {
this.energy += 20;
};
}
const r1 = new Robot("RX-1", 100);
const r2 = new Robot("RX-2", 80);
console.log(r1.recharge === r2.recharge); // false
Output:
false
Each robot has its own function copy.
Instead of putting methods inside the constructor, we use prototype.
Prototype allows all objects to share the same method.
First define the constructor:
function Robot(name, energy) {
this.name = name;
this.energy = energy;
}
Now attach a method using prototype:
Robot.prototype.recharge = function () {
this.energy += 20;
console.log(this.name + " is recharging ⚡");
};
Now create robots:
const robot1 = new Robot("RX-1", 100);
const robot2 = new Robot("RX-2", 80);
Use the method:
robot1.recharge();
robot2.recharge();
Output:
RX-1 is recharging ⚡
RX-2 is recharging ⚡
Here’s the important part.
The recharge() function exists only once in memory, but every robot can use it.
This is prototype-based inheritance.
function Robot(name, energy) {
this.name = name;
this.energy = energy;
}
Robot.prototype.recharge = function () {
this.energy += 20;
};
const r1 = new Robot("RX-1", 100);
const r2 = new Robot("RX-2", 80);
console.log(r1.recharge === r2.recharge); // true
Output:
true
Now both robots share the same function in memory.
When you access:
robot1.recharge()
JavaScript checks in this order:
1.Does robot1 have recharge? ❌
Robot.prototype ✅
This lookup chain is called the prototype chain.
And yes…
This is how JavaScript inheritance works internally.
Modern JavaScript introduced classes.
Example:
class Robot {
constructor(name, energy) {
this.name = name;
this.energy = energy;
}
recharge() {
this.energy += 20;
}
}
Looks nicer, right?
But here's the secret:
JavaScript classes are just syntactic sugar over constructor functions + prototypes.
Under the hood, it's still using prototype-based inheritance.
So if you understand constructor functions…
You understand JavaScript at a deeper level than many developers.
Constructor functions help you:
✔ Create multiple objects easily
Basic structure:
function Robot(name, energy) {
this.name = name;
this.energy = energy;
}
Robot.prototype.recharge = function () {
this.energy += 20;
};
const robot1 = new Robot("RX-1", 100);
If you're skipping constructor functions because:
“Classes are easier.”
You're missing the core idea of JavaScript object creation.
And sooner or later…
That gap will catch up with you.
Learn the fundamentals now.
Future you will be grateful.