1

jQuery と JavaScript の実務経験はありますが、プロトタイプの継承を理解するのはまだ難しいと感じています。そのため、Stoyan Stefanov の「Object Oriented JavaScript」という本を読み始めました。ただし、本から次の演習を解決しているときに問題に遭遇しました。

  1. プロパティとメソッドshapeを持つ というオブジェクトを作成します。typegetType
  2. Triangleプロトタイプが shape であるコンストラクター関数を定義します。で作成されたオブジェクトには、三角形の辺を表すと のTriangle3 つの独自のプロパティが必要aです。bc
  3. という名前のプロトタイプに新しいメソッドを追加しgetPerimeterます。

次のコードで実装をテストします。

var t = new Triangle(1, 2, 3);
t.constructor;                 // Triangle(a, b, c)    
shape.isPrototypeOf(t);        // true
t.getPerimeter();              // 6
t.getType();                   // "triangle"

次のコードでこの問題を解決しようとしました。

shape = {
    type : "",
    getType: function(){
        return this.type;
    }
};

function Triangle(a, b, c) {
}

Triangle.prototype = shape;

ただし、期待どおりに機能していないようです。この問題をどのように解決しますか？詳しく説明してください。プロトタイプの継承を本当に理解したいです。

4

5 に答える 5

3

おそらく、新しく作成されたオブジェクトに単に割り当てられていると仮定して、コンストラクター関数に渡されたパラメーターで何もしません。問題は、そうではないということです。

みたいなことを書いておけばいいのに…

var shape = {
  type: '',
  getType: function() { return this.type; }
};

function Triangle(a, b, c) {
  this.type = 'triangle';
  this.a = a;
  this.b = b;
  this.c = c;
}

Triangle.prototype = shape;
Triangle.prototype.getPerimeter = function() {
  return this.a + this.b + this.c;
};
Triangle.prototype.constructor = Triangle;

ポイント (constructorが に対して定義されている理由prototype) は非常に単純です。各Triangleオブジェクトはそのコンストラクター関数について知っている必要がありますが、このプロパティは の各インスタンスで同じになりますTriangle。そのため、Triangle.prototype代わりに配置されています。

于 2013-08-28T17:43:26.583 に答える
0

学習のために、このようにします

function Shape(){
    this.type = 'Shape';
    this.getType = function()
    {
        return this.type;
    }
}

var shape = new Shape();

function Triangle(a, b ,c)
{
    this.type = 'triangle';
    this.arguments = arguments;
}

Triangle.prototype = shape;

var triangle = new Triangle(1, 2, 3);

triangle.getType();

Triangle.prototype.getParimeter = function()
{
    var perimeter = 0;
    for(i = 0; i < this.arguments.length; i++){
        perimeter = perimeter + this.arguments[i];
    }
    return perimeter;
}

console.log(triangle.getParimeter());
于 2014-01-07T00:09:24.320 に答える
0

これは1つの解決策です（コメントの説明）：

shape = {
    type : "",
    getType: function(){
        return this.type;
    }
};

function Triangle(a,b,c){
    //This three variables are defined inside a closure, so in this case
    //only the getPermiter function can access them
    var A = a, B = b, C = c;

    //The new Triangle object is crafted in the lines below as usual
    this.type = "triangle";
    this.getPerimeter = function(){
        return A + B + C;
    }
}

//Here we set the triangle prototype to point the shape object.
//So every time we call the Triangle function with the "new" operator
//the __proto__ internal property of the newly created object will be
//the shape object.
Triangle.prototype = Object.create(shape);

//The problem is that the shape object doesn't have a constructor property,
//so the shape constructor is shape.__proto__.constructor, which is the
//Object function. 
//All this means that when we create a new object with the Triangle function the
//constructor property will be the Object function (shape.__proto__.constructor).
//To avoid this we must manually set the constructor to be Triangle.
Triangle.prototype.constructor = Triangle;

var t = new Triangle(1, 2, 3);
console.log(t.constructor === Triangle);   
console.log(shape.isPrototypeOf(t) === true);
console.log(t.getPerimeter() === 6);
console.log(t.getType() === "triangle");
于 2014-05-28T20:17:10.300 に答える