stoyanov javascript原型练习来自面向对象的javascript

Question

虽然我有一些使用 jQuery 和 JavaScript 的工作经验，但我仍然觉得很难理解原型继承。因此，我开始阅读 Stoyan Stefanov 的《面向对象的 JavaScript》一书。但是，我在解决书中的以下练习时遇到了问题：

1. 创建一个名为shape 的对象，该对象具有type 属性和getType 方法。
2. 定义一个原型为shape的Triangle构造函数。使用Triangle 创建的对象应具有三个自己的属性：a、b 和 c，代表三角形的边。
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;

但是它似乎没有按预期工作。你将如何解决这个问题？请详细说明。我真的很想了解原型继承。

Answer 1

您不会对传递给构造函数的参数做任何事情，可能假设它们只是分配给新创建的对象。问题是，他们不是。

你应该这样写……

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 上。

Answer 2

这样的事情会起作用：

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

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

var shape = new Shape(); //follow the requirements a bit more literally :)
Triangle.prototype = shape;

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

jsfiddle 示例：http://jsfiddle.net/TbR6q/1

切线，这是一个咖啡脚本非常好的领域，可以让你更加清晰/简洁。这是 Coffeescript 中的等价物。

class Shape 
  constructor: ->
    @type = "shape"
  getType : -> @type

class Triangle extends Shape
  constructor: (@a,@b,@c) ->
     @type="triangle"
  getPerimeter: () -> @a + @b + @c

http://jsfiddle.net/qGtmX/

Answer 3

你在正确的轨道上。你的代码是正确的。你只需要再添加几行代码：

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;

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

要了解发生了什么，我建议您阅读以下答案：

1. Object Inheritance in JavaScript
2. What are the downsides of defining functions on prototype this way?
3. JavaScript inheritance and the constructor property

Answer 4

为了学习，我会变成这样

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

Answer 5

这是一种解决方案（对 cme​​ts 的解释）：

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