Javascriptライブラリオブジェクトメソッド宣言

Question

私はOO js noobieの一種で、正しい方法で新しいJavascriptライブラリを作成しようとしていますが、これを行う方法を理解して正しく動作させるには苦労しています。 jsライブラリファイルがhtmlに含まれるとすぐにオブジェクトABCがインスタンス化されるように、自分のライブラリを自己呼び出しするようにしたいと思います。ただし、ユーザーはhtmlページでそのオブジェクトのメソッドを呼び出すことができます。

私は以下のコードのいくつかの異なるバージョンを試しましたが、正しく動作するメソッドを宣言するためのプロトタイプメソッドを取得できないようです。私のHTMLページでは、ABC.alert();と呼ぶことができ、それは適切に警告メッセージを実行します。しかし、私が理解しているプロトタイプ継承を使用しているABC.alert2();を呼び出しようとすると、オブジェクトコンストラクタ内のメソッドを宣言するだけのメモリよりも効率的です。私はABC.alert2 is not a functionを得続けます。私のABCオブジェクトはprotoというプロパティを持っていますが、プロトタイプを使ってメソッドを適切に定義する方法はわかりません。自己呼び出し関数を使用しているからですか？自己呼び出し関数を使用せず、ライブラリの一番下に手動でオブジェクトの新しいインスタンスを手動で作成する必要があります。var ABC = new defineABC();行ですか？また、下にコピーされた

jsbin link

：

(function (window) { 
    'use strict'; 

    function defineABC() { 
    var ABC = {}; 
    ABC.alert = function() { 
     alert("hello this is working"); 
    }; 

    ABC.prototype.alert2 = function() { 
     alert("hello prototype is working inside constructor"); 
    }; 

    return ABC; 

    } 

    defineABC.prototype.alert3 = function() { 
    alert("hello prototype is working outside constructor"); 
    }; 

    if (typeof(ABC) === 'undefined') { 
    window.ABC = defineABC(); 
    } 

})(window); 



ABC.alert(); //successful 

ABC.alert2(); //fails 

ABC.alert3(); //fails 

Answer 1

あなたはプロトタイプのメソッドを使用するようにオブジェクトのインスタンスを作成する必要があります。

var abc = new defineABC() 

    abc.alert2(); 

    abc.alert3(); 

ので、uはあなたが最終的なコードは次のようになります。この

 if (typeof(ABC) === 'undefined') { 
     window.ABC = new defineABC(); 
    } 

ようなあなたのコードでそれを定義することができます。

(function (window) { 
    'use strict'; 

    function defineABC() { 
    } 

    defineABC.prototype.alert3 = function() { 
    alert("hello prototype is working outside constructor"); 
    }; 

    defineABC.prototype.alert = function() { 
     alert("hello this is working"); 
    }; 

    defineABC.prototype.alert2 = function() { 
     alert("hello prototype is working inside constructor"); 
    }; 

    if (typeof(ABC) === 'undefined') { 
    window.ABC = new defineABC(); 
    } 

})(window); 

Answer 2

ABCを一度だけページごとに作成されているので、それは大丈夫ですオブジェクト上でメソッドを宣言すること。

また、工場機能またはIIFEの必要もありません。あなたは、オブジェクトを簡単にインスタンス化します。

window.ABC = window.ABC || { 
    alert: function() { 
    alert("hello this is working"); 
    } 
};