在将C#转换为JavaScript时理解JavaScript继承

我试图理解典型遗传。有人能帮我把这个C#翻译成JS吗

public class FormElement { }

public class Rectangle : FormElement {
    public int Top { get; set; }
    public int Left { get; set; }
    public int Width { get; set; }
    public int Height { get; set; }
}

public class TextRectangle : Rectangle {
    public string Text { get; set; }
}

诸如此类

小提琴：

因此，现在您可以执行以下操作：

var TR = new TextRectangle();

console.log(TR.Height); //outputs: 3

---

这不是您想要的直接翻译，但是如果您对C#对象和JavaScript对象之间的交互感兴趣，那么可能会有一些非常有趣的源代码供您学习。该项目的一个简化描述是，它在C#中的服务器端模型和JavaScript中的客户端模型之间创建了一个转换层。

JavaScript没有经典继承。所以这将是完全不同的。你应该不断地读下去

---

上面的代码用来描述典型的OO含义。它还使用jQuery的Extend方法（其他库具有一些分析功能），您可以这样做：

function FormElement() { }

function Rectangle() { }
$.extend(true, Rectangle.prototype, FormElement.prototype);
Rectangle.prototype.top = function(val) { if (arguments.length == 0) return this._top; else this._top = val; };
Rectangle.prototype.left = function(val) { if (arguments.length == 0) return this._left; else this._left = val; };
Rectangle.prototype.width = function(val) { if (arguments.length == 0) return this._width; else this._width = val; };
Rectangle.prototype.height = function(val) { if (arguments.length == 0) return this._height; else this._height = val; };

function TextRectangle() { }
$.extend(true, TextRectangle.prototype, Rectangle.prototype);
TextRectangle.prototype.text = function(val) { if (arguments.length == 0) return this._text; else this._text = val; };

var rect = new TextRectangle();
rect.top(5);

---

在JS中，对象工厂是一种很好的方式：

var makeRectangle = function(t, l, w, h)
{
    return {
        top: t || 0,
        left: l || 0,
        width: w || 0,
        height: h || 0
    };
}

var makeTextRectangle = function(t, l, w, h, text)
{
    var rect = makeRectangle(t, l, w, h);
    rect.text = text || '';
    return rect;
}

或者，利用原型：

var makeTextRectangle = function(t, l, w, h, text)
{
    var rect = Object.create(makeRectangle(t, l, w, h));
    rect.text = text || '';
    return rect;
}

尽管您需要在尚未实现的位置添加

对象。创建
（通过）：

注意：我认为JS没有属性，因此这些属性可能会衰减为普通的公共字段。@delnan通常，可以通过转换为get_Property（）和set_Property（value）函数并保持变量私有来模拟属性。注意“私有”当使用伪经典设计范式时，变量只存在于JavaScript中。但是你必须做
this.Rectangle.Top=4
，这真是一团糟。通过公共属性的实例是个坏主意。在经典语言中，这些是“公共静态”变量（通过导入类而无需实例化即可访问）。使用
Rectangle.prototype=new-FormElement（）取而代之。为什么不使用
new
和
this
：\为什么要为将
new
添加到基于原型的继承系统中而感到困惑呢？我知道我并没有真正利用这里的原型（只是添加
Object.create（）
，参数为
makeRectangle（…）
），但是
new
使用的间接方式往往会引起混乱。这只是学习
new
和
这
如何工作的问题。我认为它使代码更干净。
var makeRectangle = function(t, l, w, h)
{
    return {
        top: t || 0,
        left: l || 0,
        width: w || 0,
        height: h || 0
    };
}

var makeTextRectangle = function(t, l, w, h, text)
{
    var rect = makeRectangle(t, l, w, h);
    rect.text = text || '';
    return rect;
}

var makeTextRectangle = function(t, l, w, h, text)
{
    var rect = Object.create(makeRectangle(t, l, w, h));
    rect.text = text || '';
    return rect;
}

if (typeof Object.create !== 'function') {
    Object.create = function (o) {
        function F() {}
        F.prototype = o;
        return new F();
    };
}