0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Prototypeを理解する

Last updated at Posted at 2020-08-13

JavaScriptはprototypeをベースにした言語である

こちらがあるので、ES6ではクラスが使われてますが、きちんと基礎のprototypeを理解していきます。

###基本

  • prototypeプロパティを使って、どんなオブジェクトも継承可能
  • コンストラクタをもとに、いくらでもインスタンスを作れる
  • インスタンスとは、実態/実際に作ったもの

###基本的な記述方法
オブジェクト名.prototype.メソッド名= function() {メソッドの処理内容}

コードで書いていきます。
ここでは一つの会社を想定し、どこの部署に、何年くらい働いているのかを出してみます。

script.js
//コンストラクタ(設計図)を作成 
var Person = function(name, yearOfJoin, department) {
  this.name = name; //引数nameを渡してる
  this.yearOfJoin = yearOfJoin; //引数yearOfJoinを渡してる
  this.department = department; //引数departmentを渡してる
} //この時点ではオブジェクトは空

Person.prototype.calculateYears = function() {
  console.log(2020 - this.yearOfJoin);
};//prototypeでPersonのコンストラクタを継承

//設計図にプロパティを入れる
var mike = new Person('John', 2005, 'sales');
var jessie = new Person('Jessie', 2010, 'Accounting');
var mary = new Person('Mary', 2019, 'Planning');

mike.calculateYears(); //結果:15
jessie.calculateYears();//結果:10
mary.calculateYears();//結果:1

functionだけでなく、プロパティも追加できる(でも上記の方が一般的)

script.js
Person.prototype.lastName = 'Williams';

console.log(mike.lastName); //結果:Williams
console.log(jessie.lastName); //結果:Williams
console.log(mary.lastName); //結果:Williams
//全員同じラストネーム

###補足
コンストラクタfunctionの外側でprototypeを定義することで、
毎回同じ内容が、インスタンスが作成される度にコピーされずに済みます。
=参照として利用することで、メモリーを最低限に抑えられる。

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?