5 Путей создания и 5 путей наслендования объектов в JavaScript плюс замена Switch - Case на объект

5 Путей создания объектов в JavaScript

1. Простой литерал объекта {}

myApp.notepad = {};
myApp.notepad.writable = true;
myApp.notepad.font = 'helvetica';
myApp.notepad.setFont = function(theFont) {
    myApp.notepad.font = theFont;
};

2. Вложенный литерал объекта {}

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

3. Функция конструктор объектов, использующая литерал объекта

myApp.Notepad = function(defaultFont){
    var that = {};
    that.writable = true;
    that.font = defaultFont;
    that.setFont =  function(theFont) {
        that.font = theFont;
    };
    return that;
};

myApp.notepad1 = myApp.Notepad('helvetica');

4. Простая функция конструктор объектов, использующая оператор new

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

myApp.notepad1 = new myApp.Notepad('helvetica');

5. Функция конструктор объектов вместе с prototype

myApp.Notepad = function(defaultFont) {
    this.font = defaultFont;
};

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

или так

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

myApp.notepad1 = new myApp.Notepad('helvetica');


5 Путей наследования свойств объектов в JavaScript

1. Наследование через вызов методов другого объекта посредством call или apply.

var myApp = {};

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

myApp.notepad = {};
myApp.notepad.writable = true;
myApp.notepad.font = 'helvetica';
myApp.notepad.setFont = function(theFont) {
    myApp.notepad.font = theFont;
};

myApp.panel.toggleDisplay.call(myApp.notepad);
myApp.notepad.defaultWidth = myApp.panel.defaultWidth;

2. Тоже, что и пункт 1, но с вложенными литералами объекта {}

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

};

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

myApp.panel.toggleDisplay.call(myApp.notepad);
myApp.notepad.defaultWidth = myApp.panel.defaultWidth;

3. Наследование через функцию конструктор объектов, используя литерал объекта {}

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(width);
    that.writable = true;
    that.font = defaultFont;
    that.setFont = function(theFont) {
        that.font = theFont;
    };
    return that;
};

myApp.notepad1 = myApp.Notepad('helvetica', 300);
myApp.notepad1.defaultWidth;

4. Наследование через функцию конструктор объектов, используя оператор new

var myApp = {};

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

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

};

myApp.notepad1 = new myApp.Notepad('helvetica');
myApp.notepad1.defaultWidth; // undefined - эта погрешность будет исправлена в 5-ом примере.

5. Наследование через функцию коструктор объектов, используя prototype и оператор new

function deepClone(obj) {
    var clone = {};
    for (var key in obj) {
        if (typeof obj[key] === 'object') {
            clone[key] = deepClone(obj[key]);
        } else {
            clone[key] = obj[key];
        }
    }
    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); // запуск функции конструктора объектов Panel
    this.font = defaultFont;
}

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

myApp.notepad1 = new myApp.Notepad('helvetica',300);
myApp.notepad1.defaultWidth; //300


Использование объектов {} взамен switch - case.

var whatToBring;
switch(weather) {
    case "Sunny":
        whatToBring = "Sunscreen and hat";
        break;
    case "Rain":
        whatToBring  ="Umbrella and boots"
        break;
    case "Cold":
        whatToBring = "Scarf and Gloves";
        break;
    default:
         whatToBring = "Play it by ear";
}

Альтернативный вариант.

var whatToBring = {
    "Sunny" : "Sunscreen and hat",
    "Rain" : "Umbrella and boots",
    "Cold" : "Scarf and Gloves",
    "Default" : "Play it by ear"
}

var gear = whatToBring[weather] || whatToBring["Default"];