0

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

1 件の回答 1

0

JavaScriptはもともとプロトタイプベースのオブジェクト指向言語です
(現在は classキーワードも使用可能 … 使ったことはないけど, 微妙に異なるらしい)
それに対し Javaなどの言語は, クラスベースのオブジェクト指向言語です

参考(Wikipedia):

プロトタイプチェーンを利用するには以下のように行います

// 利用するときは new 演算子を使う
// プロパティーを持つ
function Graph() {
  this.vertexes = [];
  this.edges = [];
}

// メソッドを定義する (後から追加することも可能)
// (辞書形式で)複数指定可能
Graph.prototype = {
  addVertex: function(v){
    this.vertexes.push(v);
  }
};

var g = new Graph();

g.addVertex(val) などと呼び出すことができ, 自身のプロパティー vertexesvalpushします
解説は長くなるので, 以下のページを参照してください

参考 (MDN Web Docs)


(追記)

質問の Point.prototype.add とは, Point.prototypeによって, addというメソッドを登録している, ということ
this.xthis.y とは, Pointの持つプロパティーです


(追記_2)

メソッド addの使い方は以下のように

let point = new Point(10, 7)

let addp = new Point(2, 1)
let newp = point.add(addp)   // あるいは直接 point.add(new Point(〜)) でも

console.log(newp)
// Object { x: 12, y: 8 }
console.log(point.add(new Point(-1,-1)))
// Object { x: 9, y: 6 }

// add は新しい Pointインスタンスを生成してるだけだから元の値は変わらない
console.log(point.x)
// 10
3
  • 解答ありがとうございます。 つまり上記の場合 Point(10 + 10, 7 + 7)みたいになるという事でしょうか? Point.prototype.addって普通に Point.prototype.addで実行されるんでしょうか?その場合は先に const point = new Point(10, 7) インスタンスを作成してから実行するのでしょうか?すいません質問ばかりになってしまって。
    – wataru
    Commented 2021年4月7日 8:07
  • 先にインスタンス作成してからですね。もちろん同時に add呼び出してもOK。new Point(10,20).add(new Point(2,2)) とか
    – oriri
    Commented 2021年4月7日 8:39
  • 思い通りに動作しました。ありがとうございます。
    – wataru
    Commented 2021年4月7日 9:28

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。