75138


TypeScriptを入門しようと思いTypeScript Deep
Diveの日本語訳を読んでいるのですが、そこで説明されているJavaScriptのコードが理解出来ないです。

`Point.prototype.add`の箇所からいまいち分からないです。 `prototype.add`とは何でしょうか？

引数はおそらく上記で定義したPointをインスタンス化した物を取ると思うのですが `this.x`はどこから来るのか分かりません。

[code]

    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);
    };
    
[/code]

### 追記

予想では10が表示されると思ったのですが、うまく動作しないです。

[code]

    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
    
    
[/code]

### 追記（上手くaddを使用出来た。）

[code]

    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
    
[/code]

### 追記（prototypeの意味を少し理解した。）

この `Point.prototype.add =` とする事でPointオブジェクトに後から
`add()`メソッドを追加している事を意味していて、生成されたインスタンス間で同じ所（プロトタイプ）を参照している事が分かった。TypeScript
deep diveではTypeScriptのclassはJavaScriptのES5では `prototype`
を使用して実装されているという事を伝えたかったんだと思う。

[code]

    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);
    
[/code]

### 参照

<https://typescript-jp.gitbook.io/deep-dive/future-javascript/classes/classes-
emit>


CC BY-SA 4.0
2021-04-07T06:25:32.273
75136
2021-04-08T03:47:34.987
2021-04-08T03:47:34.987
22565
22565
question
javascript typescript
prototype.add がどんな動作をしているのか分からない。


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

参考(Wikipedia):

  * [プロトタイプベース](https://ja.wikipedia.org/wiki/%E3%83%97%E3%83%AD%E3%83%88%E3%82%BF%E3%82%A4%E3%83%97%E3%83%99%E3%83%BC%E3%82%B9)
  * [クラスベース](https://ja.wikipedia.org/wiki/%E3%82%AF%E3%83%A9%E3%82%B9%E3%83%99%E3%83%BC%E3%82%B9)

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

[code]

    // 利用するときは new 演算子を使う
    // プロパティーを持つ
    function Graph() {
      this.vertexes = [];
      this.edges = [];
    }
    
    // メソッドを定義する (後から追加することも可能)
    // (辞書形式で)複数指定可能
    Graph.prototype = {
      addVertex: function(v){
        this.vertexes.push(v);
      }
    };
    
    var g = new Graph();
    
[/code]

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

参考 (MDN Web Docs)

  * [継承とプロトタイプチェーン](https://developer.mozilla.org/ja/docs/Web/JavaScript/Inheritance_and_the_prototype_chain)
  * [Object のプロトタイプ](https://developer.mozilla.org/ja/docs/Learn/JavaScript/Objects/Object_prototypes)

* * *

(追記)

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

* * *

(追記_2)

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

[code]

    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
    
[/code]


CC BY-SA 4.0
2021-04-07T07:01:44.003
75138
2021-04-07T08:30:17.977
2021-04-07T08:30:17.977
43025
43025
75136
answer