TypeScriptを入門しようと思いTypeScript Deep Diveの日本語訳を読んでいるのですが、そこで説明されているJavaScriptのコードが理解出来ないです。
Point.prototype.add
の箇所からいまいち分からないです。 prototype.add
とは何でしょうか?
引数はおそらく上記で定義したPointをインスタンス化した物を取ると思うのですが this.x
はどこから来るのか分かりません。
function Point(x, y) {
this.x = x;
this.y = y;
}
let test = new Point(10, 7);
// 実行結果は10になる。
console.log(test.x);
Point.prototype.add = function (point) {
return new Point(this.x + point.x, this.y + point.y);
};
追記
予想では10が表示されると思ったのですが、うまく動作しないです。
function Point(x, y) {
this.x = x;
this.y = y;
}
let point = new Point(10, 7);
Point.prototype.add = function (point) {
return new Point(this.x + point.x, this.y + point.y);
};
console.log(Point.prototype.add.x)
//実行結果
undefined
undefined
追記(上手くaddを使用出来た。)
function Point(x, y) {
this.x = x;
this.y = y;
}
Point.prototype.add = function (point) {
return new Point(this.x + point.x, this.y + point.y);
};
let point = new Point(10, 7);
console.log(point.add(point))
console.log(point.x)
//実行結果
Point {x: 20, y: 14}
10
追記(prototypeの意味を少し理解した。)
この Point.prototype.add =
とする事でPointオブジェクトに後から add()
メソッドを追加している事を意味していて、生成されたインスタンス間で同じ所(プロトタイプ)を参照している事が分かった。TypeScript deep diveではTypeScriptのclassはJavaScriptのES5では prototype
を使用して実装されているという事を伝えたかったんだと思う。
function Point(x, y) {
this.x = x;
this.y = y;
}
const point1 = new Point(10, 7);
const point2 = new Point(4, 3);
//console.log(point1.__proto__.add)// ないとでる。
//console.log(point2.__proto__.add)// ないとでる。
Point.prototype.add = function (point) {
return new Point(this.x + point.x, this.y + point.y);
};
console.log(point1.__proto__.add);
console.log(point2.__proto__.add);
参照
https://typescript-jp.gitbook.io/deep-dive/future-javascript/classes/classes-emit