オブジェクト生成・拡張方法についてのメモ : JavaScript

Tweet

Pocket

JavaScriptのオブジェクトをコンストラクタで生成する方法・コンストラクタを使わずに生成する方法。オブジェクトからオブジェクトを生成・拡張する方法のメモ。

// (1) コンストラクタでオブジェクトを生成する方法。
// (2) コンストラクタを使わずに生成する方法。

// 以下オブジェクトに定義した関数(オブジェクト)をメソッドと呼ぶ。



// (1) コンンストラクタを使う方法
// インスタンスメソッドとプロトタイプメソッドの違いを調べる


function Foo(name) {
    this.name = name;
    // インスタンスメソッド
    this.getName = function() {
        return this.name;
    };
}
// プロトタイプメソッド
Foo.prototype.protoGetName = function() {
    return 'prototype method : ' + this.name;
};

var foo1 = new Foo('foo1');
var foo2 = new Foo('foo2');

// インスタンスメソッド
console.log(foo1.getName === foo2.getName); // false
// プロトタイプメソッド
console.log(foo1.protoGetName === foo2.protoGetName); // ture

// プロトタイプメソッドは参照を共有する。その面では効率が良い。
// 一方インスタンスメソッドはプロトタイプをたどる必要が無い。その面で効率が良い。




// (2). コンストラクタを使わない方法
function baz() {
    function _setName(name) {
        return (this.name = name);
    }

    function _getName() {
        return this.name || null;
    }
    return {        
        setName: _setName,
        getName: _getName
    };
}
var baz1 = baz();
var baz2 = baz();
baz1.setName('baz1');
baz2.setName('baz2');
console.log(baz1.getName()); // baz1
console.log(baz2.getName()); // baz2
// メソッドの参照は異なる。
console.log(baz1.getName === baz2.getName); // false




// JavaScriptはオブジェクトからオブジェクトを生成する方法がいくつか考えられる。
// 以下baz2からオブジェクトを生成する




// (3) Object.createメソッドを使う。
// ※ 内部ではコンストラクタを使う。
if (!Object.create) {
    (function() {
        function F() {}

        Object.create = function(object) {
            F.prototype = object;
            return new F();
        };
    }());
}

var baz3 = Object.create(baz2);
// Object.createで生成するオブジェクトは
// 生成元とメソッドを共有する。
console.log(baz3.getName === baz2.getName); // true 継承




// (4) コンストラクタを使わずにオブジェクトからオブジェクトを生成する
// extendを使ったオブジェクトの拡張
var extend = (function() {
    function extend(target, source) {
        target = target || {};
        if (!source) {
            return target;
        }
        // IE8以前のバクを考慮しない
        var prop;
        for (prop in source) {
            target[prop] = source[prop];
        }
        return target;
    }
    return extend;
}());

var baz4 = {};
extend(baz4, baz3);
// extendで拡張したオブジェクトは
// 生成元のメソッドを共有する(ブレス)。
console.log(baz4.getName === baz3.getName); // true