Понимание наследования JavaScript при преобразовании C # в JavaScript

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

Что-то в этом роде

Fiddle: http://jsfiddle.net/maniator/mePch/

Так что теперь вы можете сделать что-то вроде:

var TR = new TextRectangle();

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

Answer 2

Объектные фабрики - отличный способ пойти в 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 там, где это еще не реализовано (через Крокфорд ):

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

Answer 3

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 для изображения прототипа значения ОО. Он также использует pd

Answer 4

Используя метод Extend в jQuery (другие библиотеки имеют некоторые аналогичные функции), вы можете сделать что-то вроде этого:

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/

Answer 5

Это не прямой перевод, который вы ищете, но если вам интересны взаимодействия между объектами C # и JavaScript, тогда ExoWeb может иметь очень интересный исходный код для изучения.Упрощенное описание проекта заключается в том, что он создает слой перевода между моделями на стороне сервера в C # и моделями на стороне клиента в JavaScript.