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

ProgramBox

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

Post author:admin
Запись опубликована:23 апреля, 2023
Post category:Вопросы по программированию

#javascript #inheritance

#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; }
}

1. Примечание: Я не думаю, что у JS есть свойства, поэтому они, вероятно, будут преобразованы в обычные общедоступные поля.

2. @delnan Как правило, свойства можно имитировать, преобразуя в функции get_Property() и set_Property(значение) и сохраняя переменные закрытыми.

3. Обратите внимание, что «частные» переменные существуют в JavaScript только при использовании псевдоклассической парадигмы проектирования.

Ответ №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

1. Но тогда вам придется сделать this.Rectangle.Top = 4 это правильный беспорядок.

2. Экземпляры через общедоступные свойства — плохая идея. В классических языках это «общедоступные статические» переменные (доступные через импорт класса без создания экземпляра). Используйте Rectangle.prototype = new FormElement(); вместо этого.

Ответ №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 где это еще не реализовано (через Crockford):

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

1. Почему бы не использовать new и this :

2. Зачем беспокоиться о путанице добавления new в систему наследования на основе прототипа? Я знаю, что на самом деле я не использую здесь прототип в своих интересах (просто добавьте Object.create() с аргументом makeRectangle(...) ), но косвенное обращение, которое new используется, имеет тенденцию вызывать путаницу.

3. это всего лишь вопрос изучения того, как new и this работает. Я думаю, что это делает код чище. Люблю ES5

Ответ №3:

В JavaScript нет классического наследования. Итак, все будет совершенно по-другому. Вам следует прочитать о прототипическом 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

Ответ №4:

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

Ответ №5:

Используя метод расширения 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/