在将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 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

    ,对象工厂是使用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,h,text)
{
    var rect = makeRectangle(t,h);
    rect.text = text || \'\';
    return rect;
}

或者，利用原型：

var makeTextRectangle = function(t,text)
{
    var rect = Object.create(makeRectangle(t,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();
    };
}

    ,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,\"height\": 10,\"text\": \"some text\"
});
textrect.printText(); // \"some text\",textrect.area(); // 100

上面的代码使用

Object.create

表示原型OO含义。它还使用pd     ,它不是您要查找的直接翻译，但是如果您对C＃对象和JavaScript对象之间的交互感兴趣，那么ExoWeb可能会为您提供一些非常有趣的源代码供您学习。该项目的简化描述是，它在C＃中的服务器端模型和JavaScript中的客户端模型之间创建了一个转换层。     ,使用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/