投稿日: 投稿者: userno2

javascript、コンストラクタ、new、thisについてまとめ

1.コンストラクタなしでのthis

ソース例

var jikoshokai=function(){
console.log(“My name is”+this.name+”!!”);
}

//勇者オブジェクトのインスタンスbraveman1作成
//勇者オブジェクトのインスタンスのnameプロパティに代入
//勇者オブジェクトのインスタンスのjikoshokaiメソッドに上で
//作った関数オブジェクトを代入
var braveman1=new Object();
braveman1.name=” 勇者no1 “;
braveman1.jikoshokai=jikoshokai;

//勇者インスタンスのjikoshokaiメソッドを呼び出し。
//この中のthisは勇者インスタンスbraveman1を指す。
braveman1.jikoshokai();

オブジェクトのメソッドが呼び出されたときに、thisはそのオブジェクト自体を表す。

 

2.コンストラクタの中のthis

参照(https://www.sejuku.net/blog/25328)

ソース例

//コンストラクタPersonを定義↓

function Person(name, age) {
  this.name = name;
  this.age = age;
}
//newを使ってインスタンスを2つ生成↓
var person1 = new Person(‘太郎’, 22);
var person2 = new Person(‘次郎’, 31);
console.log( person1.name );
console.log( person1.age );
console.log( person2.name );
console.log( person2.age );
newでインスタンス生成するとコンストラクタ中のthisにインスタンス(上記例ではperson1、person2)がセットされる。
中を確認できない段階では「そういうもの」としてとりあえず覚えるしかない。

3.prototypeでメソッドを結びつける(prototypeの使い方も含めて)。

参照(https://www.sejuku.net/blog/47722)

全てのオブジェクト(あらかじめ用意されている組み込みオブジェクトも、自分で作るオブジェクトも)はprototypeプロパティをもっている。

プロトタイプの一般的な記述方法は、

【 オブジェクト名.prototype.メソッド名= function() { } 】

具体例

//↓コンストラクタUserを定義

var User = function(name, age) {
    this.name = name;
    this.age = age;
}
User.prototype.getName = function() {
    return this.name;
}
//関数オブジェクト(コンストラクタ)UserのプロパティprototypeにメソッドgetName をくっつける。
コンストラクタのprototypeが持つプロパティやメソッドは、インスタンスのプロパティやメソッドとして参照することができる(https://uhyohyo.net/javascript/9_2.html)
インスタンスはプロパティとメソッドを持つ。プロパティ(例:名前、年齢など)
はインスタンスごとに違うので各自が持つ必要があるが、メソッド(例:名前を表示する、など)は全てのインスタンスで共通なのでprototypeにくっつけて、全てのインスタンスはprototypeのメソッドを参照？する、というのが合理的。だからprototypeを使う。

ソース例

var User = function(name, age) {
this.name = name;
this.age = age;
}

User.prototype.jikoshokai = function() {
console.log(“私の名前は”+this.name+”。年齢は”+this.age+”です。”);
}
var usert=new User(“D_trunp”,60);
usert.jikoshokai();

var usero=new User(“obama”,53);
usero.jikoshokai();

結果

私の名前はD_trunp。年齢は60です。
私の名前はobama。年齢は53です。

prototypeに結びつけたメソッド(jikoshokai)内のthisは、メソッドjikoshokaiを呼び出したインスタンス(usertとusero)を指す。その結果トランプとオバマが自己紹介している。

とりあえずこれがオブジェクト指向の基本。

  1. コンストラクタ定義(引数でプロパティを初期化)
  2. prototypeにメソッドを結びつける。メソッドの中のthisは、その後newで作られるインスタンスがメソッドを呼び出した時、そのインスタンスを指す。
  3. newでインスタンス作成。
  4. インスタンスがメソッドを呼び出し。

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

コールバック関数とその中のthisが問題となる。なので↑のようにthisを指定する機能がある、と。指定しないとundefined。これもjavascriptの言語仕様。

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/this

mdnのthisの解説。これを抑えておく。

コメントを残す

メールアドレスが公開されることはありません。