[JS]JavaScript中級教程(feat.コード鞍馬)-継承、プロトタイプ

1. hasOwnProperty

hasOwnPropertyは入力プロパティをチェックする方法です.

const user = {
	name: 'Mike'  
}
user.hasOwnProperty('name');   // true
user.hasOwnProperty('age');   // false

ここで疑問に思うのはhasOwnPropertyというメソッドは作成されていませんが、どのように使うのでしょうか?prototypeというprotoというオブジェクトがあります.
userにhasOwnPropertyというメソッドがある場合、どのように実行されますか?定義されたhasOwnPropertyが実行される可能性があります.すなわち,まずオブジェクトにメソッドが存在するか否かを決定し,存在しない場合はprotoに移行する.
例を見てみましょう.

2.Prototypeと継承

const bmw = {
	color: "red",
  	wheels: 4,
  	navigation: 1,
  	drive() {
    	console.log("drive...");  
    }
};

const benz = {
	color: "black",
  	wheels: 4,
  	drive() {
    	console.log("drive...");  
    }  
};

const audi = {
	color: "blue",
  	wheels: 4,
  	drive() {
    	console.log("drive...");  
    }  
};

ここで共通の部分を確認できます.protoを使ってこの部分を解決することができます.

const car = {
	wheels: 4,
  	drive() {
    	console.log("drive...");  
    }
};

const bmw = {
	color: "red",
  	navigation: 1,
};
const benz = {
	color: "black",
};
const audi = {
	color: "blue",
};

bmw.__proto__ = car;
benz.__proto__ = car;
audi.__proto__ = car;

このようにコードを書くとcarはbmw,benz,audiの原型になる.すなわち、bmwはcarを継承する.
ここでbmwホイールをチェックすると、4が出ます.現在bmwにはwheelsという属性がないのでprotoに行って確認してみます.
また、継承は継続することができます.コードを見て

const car = {
	wheels: 4,
  	drive() {
    	console.log("drive...");  
    }
};

const bmw = {
	color: "red",
  	navigation: 1,
};	

bmw.__proto__ = car;

const x5 = {
	color: 'white',
  	name: 'x5'
};

x5.__proto__ = bmw;

このように記述コードは下図に示すように表現できる.(Prototype Chain)

for in構文を使用してオブジェクトを巡回します.

for (p in x5) {
  console.log(p);   // color, name, navigation, wheels, drive
}

相続したので、すべての財産が出てきます.でもObject.keysメソッドまたはvaluesメソッドを使用すると、出力されるのは継承されたプロパティではなく、元のプロパティです.この点を参考にしてみましょう.
(コードを書くときはhasOwnPropertyを使って属性が元の属性かどうかを区別できます!)

3.コンストラクション関数の使用例

const Bmw = function (color) {
	this.color = color;
  	this.wheels = 4;
  	this.drive = function() {
    	console.log("drive...");  
    };
};

const x5 = new Bmw('red');
const z4 = new Bmw('blue');

上のx 5とz 4には同じwheesとdriveが含まれているので、上の内容で分類しましょう.

const car = {
	wheels: 4,
  	drive() {
    	console.log("drive...");  
    }
};

const Bmw = function (color) {
	this.color = color;
};

const x5 = new Bmw('red');
const z4 = new Bmw('blue');

x5.__proto__ = car;
z4.__proto__ = car;

ただし、上記のオブジェクトを生成するたびにprotoを指定するのは面倒です.そのため、以下の方法を使うと便利です.覚えてろ!

const Bmw = function (color) {
	this.color = color;
};

Bmw.prototype.wheels = 4;
Bmw.prototype.drive = function () {
	console.log("drive...");  
};

以下の使用は便利です.
コンストラクション関数が新しいオブジェクトを作成する場合、このオブジェクトをコンストラクション関数のインスタンスと呼びます.JAvascriptにはinstanceofという方法があり、これを容易に検証できます.
次のコードに「z 4 instanceofbmw」を記述するとtrueが出力されます.z 4はbmwの例であるからである.(bmwを使用してz 4が作成されていることを確認)
同様に、「z 4.constructor==BMW」と書くとtrueが出力されます.コンストラクション関数によって作成されたインスタンスオブジェクトにはconstructorというプロパティがあります.ここで構造関数とはbmwを指す.

4.学習を深める

上のコードにprototype(wheels,drive)が一つ一つ書かれていますが、それも面倒ではありませんか?

Bmw.prototype = {
	wheels: 4,
  	drive() {
    	console.log("drive...");  
    }
}

こう書くととても便利です.でもこう書くとz 4constructor=BMW出力false.したがって、上記のようにコードを書くことはお勧めしません.

// 위와 같이 풀어서 쓰거나 혹은
Bmw.prototype = {
	constructor: Bmw,
	wheels: 4,
  	drive() {
    	console.log("drive...");  
    }
}

前述したように、コンストラクション関数を記入または次のように宣言するだけでよい.
(このポスターの内容はyoutube coding anmaのビデオを参考にしています)
Youtube: https://www.youtube.com/watch?v=4_WLS9Lj6n4