상속 : Inheritance

1. simple Object Literal

var myApp = {};
myApp.panel = {};
myApp.panel.toggleDisplay = function() {
    this.displayed = (this.displayed==="none")? "" : "none";
}

myApp.panel.defaultWidth = 300;
myApp.notepad = {};
myApp.notepad.writeable = true;
myApp.notepad.font = 'helvetica';
myApp.notepad.setFont = function(theFont) {
    myApp.notepad.font = theFont;
}

//OK not inheritance at all. But best we can do, since notepad has no relation to panel.
myApp.panel.toggleDisplay.call(myApp.notepad);
myApp.notepad.defaultWidth = myApp.panel.defaultWidth;

2. Nested Object Literal

var myApp = {};
myApp.panel = {
    toggleDisplay : function() {
        this.displayed = (this.displayed==="none") ? "" : "none";
    },
    defaultWidth : 300
};

myApp.notepad = {
    writeable: true,
    font: 'helvetica',
    setFont: function(theFont) {
        this.font = theFont;
    }
};

//Same brute-force inheritance as example (1)
myApp.panel.toggleDisplay.call(myApp.notepad);
myApp.notepad.defaultWidth = myApp.panel.defaultWidth;

3. Constructor using Object Literal (courtesy of Douglas Crockford)

var myApp = {};

myApp.Panel = function(defaultWidth ) {
    var that = {};
    that.defaultWidth = defaultWidth ;
    that.toggleDisplay = function() {
        that.displayed = (that.displayed==="none") ? "" : "none";
    }
    return that;
}

myApp.Notepad = function(defaultFont, width) {
    var that = myApp.Panel(300);
    that.writeable = true;
    that.font = defaultFont;
    that.setFont = function(theFont) {
        that.font = theFont;
    }
    return that;
}

//true inheritance without using new or prototype (courtesy of Douglas Crockford)
myApp.notepad1 = myApp.Notepad('helvetica',300);
myApp.notepad1.defaultWidth;

4. Simple Constructor for new

var myApp = {};

myApp.Panel = function(defaultWidth) {
    this.defaultWidth=defaultWidth ;
    this.toggleDisplay = function() {
        this.displayed = (this.displayed==="none") ? "" : "none";
    }
}

myApp.Notepad = function(defaultFont) {
    this.writeable = true;
    this.font = defaultFont;
    this.setFont = function(theFont) {
        this.font = theFont;
    }
}

myApp.notepad1 = new myApp.Notepad('helvetica');
//Without prototype we can only kluge inheritance here. Example (5) will fix it.
myApp.notepad1.defaultWidth; //undefined

5. Prototype with Constructor for new

//utility function
function deepClone(obj) {
    var clone = {};
    for(var i in obj) {
        if(typeof(obj[i])==="object") {
            clone[i] = deepClone(obj[i]);
        } else {
            clone[i] = obj[i];
        }
    }
    return clone;
}
 myApp = {};

myApp.Panel = function(defaultWidth) {
    this.defaultWidth = defaultWidth;
}

myApp.Panel.prototype.toggleDisplay = function() {
    this.displayed = (this.displayed==="none") ? '' : "none";
    alert('display = ' + (this.displayed ? 'on' : 'off'));
}

myApp.Notepad = function(defaultFont,defaultWidth) {
    myApp.Panel.call(this,defaultWidth); //inject self into Panel constructor
    this.font = defaultFont;
}

//inherit from Panel....
//better to simply grab Panel's prototype rather than create new instance of Panel
myApp.Notepad.prototype = deepClone(myApp.Panel.prototype);

myApp.Notepad.prototype.writeable = true;
myApp.Notepad.prototype.setFont = function(theFont) {
    this.font = theFont;
}

//true inheritance - this time using prototype
myApp.notepad1 = new myApp.Notepad('helvetica',300);
myApp.notepad1.defaultWidth; //300