Question

我试图了解原型继承。有人可以把这个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; }
}

Answer 1

var FormElement = function() {}

var Rectangle = function() {
    // Set Everything
    this.Top = 3;
    this.Left = 3;
    this.Width = 3;
    this.Height = 3;
}

Rectangle.prototype = new FormElement();

var TextRectangle = function() {
    this.Text = '';
}

TextRectangle.prototype = new Rectangle();

像这样的东西

小提琴：http://jsfiddle.net/maniator/mePch/

所以现在你可以这样做：

var TR = new TextRectangle();

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

Answer 2

JavaScript没有经典继承。所以它将完全不同。您应该阅读Prototypical OO并阅读Self。

var Rectangle = {
    area: function() { return this.width * this.height; }
};

var rectangle = function(obj) {
    return Object.create(Rectangle, pd(obj);
};

var rect = rectangle({
    "top": 10,
    "left": 10,
    "width": 10,
    "height": 10
});
rect.area(); // 100
// ...

var TextAble = {
    printText: function() { console.log(this.text); }  
};

var textRectangle = function(obj) { 
    return pd.merge(rectangle(obj), TextAble);
};

var textrect = textrectangle({
    "top": 10,
    "left": 10,
    "height": 10,
    "width": 10,
    "text": "some text"
});
textrect.printText(); // "some text",
textrect.area(); // 100

上面的代码使用Object.create来描述典型的OO含义。它还使用pd

Answer 3

对象工厂是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;
}

虽然您需要将Object.create添加到尚未实施的位置（通过Crockford）：

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

Answer 4

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

Answer 5

使用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);

http://jsfiddle.net/8H9cL/

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

5 个答案: