Skip to content

Latest commit

 

History

History
144 lines (108 loc) · 7.56 KB

classes-emit.md

File metadata and controls

144 lines (108 loc) · 7.56 KB
Raw

IIFE(Immediately-Invoked Function Expression)

クラスを実現するために生成されるjsは、以下のようになるかもしれません:

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);
};

TypeScriptが生成するクラスは、Immediately-Invoked Function Expression(IIFE)に包まれています。IIFEの例:

(function () {

    // BODY

    return Point;
})();

クラスがIIFEに包まれている理由は、継承に関係しています。IIFEは、TypeScriptがベースクラスを変数_superとして補足することを可能にしています:

var Point3D = (function (_super) {
    __extends(Point3D, _super);
    function Point3D(x, y, z) {
        _super.call(this, x, y);
        this.z = z;
    }
    Point3D.prototype.add = function (point) {
        var point2D = _super.prototype.add.call(this, point);
        return new Point3D(point2D.x, point2D.y, this.z + point.z);
    };
    return Point3D;
})(Point);

IIFEは、TypeScriptがベースクラス Pointを_super変数に補足することを簡単にし、かつ、それがクラス本体で一貫して使用されていることに注意してください。

__extends

クラスを継承するとTypeScriptが次の関数を生成することに、すぐに気づくでしょう:

var __extends = this.__extends || function (d, b) {
    for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
    function __() { this.constructor = d; }
    __.prototype = b.prototype;
    d.prototype = new __();
};

ここで dは派生クラスを指し、bはベースクラスを指します。この関数は次の2つのことを行います：

  1. 親クラスの静的メンバを子クラスにコピーする:for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
  2. 子クラス関数のプロトタイプを準備し、必要に応じて親のprotoのメンバを検索できるようにする。つまり、実質的に d.prototype.__proto__ = b.prototype です。

1を理解するのに苦労する人はほとんどいませんが、2については多くの人が理解に苦しみます。そのため、順番に説明します。

d.prototype.__proto__ = b.prototype

これについて多くの人を教えた結果、次のような説明が最もシンプルだと分かりました。まず、__extendsのコードが、単純なd.prototype.__proto__ = b.prototypeとどうして同じなのか、そしてなぜ、この行それ自体が重要であるのかを説明します。これをすべて理解するためには、これらのことを理解する必要があります:

  1. __proto__
  2. prototype
  3. newの関数の内側のthisに対する効果
  4. newのprototypeと__proto__に対する効果

JavaScriptのすべてのオブジェクトは __proto__メンバを含んでいます。このメンバは古いブラウザではアクセスできないことがよくあります(ドキュメントでは、この魔法のプロパティを [[prototype]]と呼ぶことがあります)。それは1つの目的を持っています：検索しているプロパティがオブジェクトに見つからない場合(例えば obj.property)、obj.__proto__.propertyを検索します。それでもまだ見つからなければ、 obj.__proto__.__proto__.propertyを検索します： それが見つかるか、最後の.__proto__自体がnullとなるまで続きます。これは、JavaScriptがプロトタイプ継承(prototypal inheritance)をサポートしていることを説明しています。次の例でこれを示します。chromeコンソールまたはNode.jsで実行することが可能です。

var foo = {}

// setup on foo as well as foo.__proto__
foo.bar = 123;
foo.__proto__.bar = 456;

console.log(foo.bar); // 123
delete foo.bar; // remove from object
console.log(foo.bar); // 456
delete foo.__proto__.bar; // remove from foo.__proto__
console.log(foo.bar); // undefined

これで、あなたは __proto__を理解できました。もう一つの便利な事実は、JavaScriptの関数(function)にはprototypeというプロパティがあり、そして、そのconstructorメンバは、逆に関数を指しているということです。これを以下に示します:

function Foo() { }
console.log(Foo.prototype); // {} i.e. it exists and is not undefined
console.log(Foo.prototype.constructor === Foo); // Has a member called `constructor` pointing back to the function

次に、呼び出された関数内のthisにnewが及ぼす影響を見てみましょう。基本的に、newを使って呼び出された関数の内側のthisは、関数から返される新しく生成されたオブジェクトを指します。関数内でthisのプロパティを変更するのは簡単です：

function Foo() {
    this.bar = 123;
}

// call with the new operator
var newFoo = new Foo();
console.log(newFoo.bar); // 123

ここであなたが知る必要があることは、関数に対するnewの呼び出しにより、関数のprototypeが、生成されたオブジェクトの__proto__に設定されることです。次のコードを実行することによって、それを完全に理解できます:

function Foo() { }

var foo = new Foo();

console.log(foo.__proto__ === Foo.prototype); // True!

それだけのことです。今度は__extendsの抜粋を見てください。これらの行に番号を振りました：

1  function __() { this.constructor = d; }
2   __.prototype = b.prototype;
3   d.prototype = new __();

この関数を逆から見ると、3行目のd.prototype = new __()は、 d.prototype = {__proto__ : __.prototype}を意味します(prototypeと__proto__に対するnewの効果によるものです)。それを2行目(__.prototype = b.prototype;)と組み合わせると、d.prototype = {__proto__ : b.prototype}となります。

しかし、待ってください。私達は、単にd.prototype.__proto__が変更され、d.prototype.constructorは、それまで通り維持されることを望んでいました。そこで重要な意味があるのが、最初の行(function __() { this.constructor = d; })です。これはd.prototype = {__proto__ : __.prototype, constructor : d}を実現できます(これは関数の内側のthisに対するnewによる効果のためです)。したがってd.prototype.constructorを復元しているので、我々が変更したものは、__proto__たった1つだけであり、それゆえd.prototype.__proto__ = b.prototypeとなります。

d.prototype.__proto__ = b.prototypeの意味

これを行うことによって、子クラスにメンバ関数を追加しつつ、その他のメンバは基本クラスから継承することができます。次の簡単な例で説明します:

function Animal() { }
Animal.prototype.walk = function () { console.log('walk') };

function Bird() { }
Bird.prototype.__proto__ = Animal.prototype;
Bird.prototype.fly = function () { console.log('fly') };

var bird = new Bird();
bird.walk();
bird.fly();

基本的にbird.flyはbird.__proto__.fly(newはbird.__proto__がBird.prototypeを指すようにすることを思い出してください)から検索され、bird.walk(継承されたメンバー)はbird.__proto__.__proto__.walkから検索されます(bird.__proto__ == Bird.prototype、そして、bird.__proto__.__proto__ == Animal.prototypeです)。