JavaScript継承とprototypeについてのちょっとの体験(一)

14112 ワード

JavaScriptのプロトタイプは初心者を混乱させやすいです.私もこの言語を勉強し始めたばかりです.短いコードを書いて理解を助けます.(千語万語、コメントの中で)
1、まず簡単な関数でJavaScriptの対象かどうかを判断します.JavaScriptにおけるデータタイプは、元のタイプとオブジェクトタイプ(関数を含む)に分けられます.
 1 function isObject(object) {
 2 
 3     //  ,undefined == null,   null undefined
 4     if(object == null) throw TypeError();
 5 
 6     //object   ,          ,       
 7     var type = typeof object;
 8 
 9     if(type !== "object" && type !== "function") throw TypeError();
10 
11     //object     
12     return true;
13 }
 
2、継承方法を実現し、サブオブジェクトを返します.
 1 function inherit(Base) {
 2 
 3     //Base     
 4     if(isObject(Base)) {
 5 
 6         //Object.create ES5             ,       ,       。
 7         if(Object.create)
 8             return Object.create(Base);
 9 
10         //       ,    Sub  
11         function Sub() {}
12 
13         // Sub prototype     Base,   JavaScript       
14         //Sub "  "Base       ,  Sub       ,   Sub 
15         // Sub               ,      (prototype chain)
16         Sub.prototype = Base;
17 
18         //    Base    , Sub
19         return new Sub();
20     }
21
22 }
3,EvaはPersonから継承しています.Eva.name="Eva"を通じて彼女に名前をつけ直しました.この時、プログラムは"Hello,Eva"を印刷します.(Person.greeting=...この時はPersonの対象として書かれていますが、外とは区別がなく、後で相手の大きい時間に会談します.)
 1 /**
 2  * Person        ,     name   greeting;
 3  * @type {{name: string, greeting}}
 4  */
 5 var Person = {name:"cnblogs"};
 6 
 7 Person.greeting = function() {
 8     console.log("Hello, " + this.name);
 9 };
10 
11 //Eva   Person  ,  Person           
12 var Eva = inherit(Person);
13 
14 //name   Person, Eva      "Eva"
15 Eva.name = "Eva";
16 
17 //greeting   Person
18 Eva.greeting();
4、一般的で効率的な方法で、プログラムは「ハロー、ジョン」を印刷します.
 1 /**
 2  *           Person2   ,     name     greeting;
 3  * 
 4  * @param name
 5  * @constructor
 6  */
 7 var Person2 = function(name) {
 8     this.name = name;
 9 };
10 
11 //"  " Person2    greeting  ,         Person2, 
12 //  Person2.prototype,       Person2          , 
13 //
14 Person2.prototype.greeting = function() {
15     console.log("Hello, " + this.name);
16 };
17 
18 var John = inherit(new Person2("John"));
19 
20 John.greeting();
5、この時、対象の大きさに戻る関数があると、私たちはprototypeが相続を実現する時にどのようなことかもっと分かります.
 1 /**
 2  *          (                     )
 3  * @param object
 4  * @returns {number}
 5  */
 6 function objectSize(object) {
 7 
 8     var size = 0;
 9 
10     //       Object hasOwnProperty  (  Object   )
11     //Object.prototype.hasOwnProperty = function(propertyName) {};
12     var hasOwnProperty = Object.prototype.hasOwnProperty;
13 
14     //    object     "  "      
15     //   "  "      
16     for(var key in object) {
17 
18         // hasOwnProperty     object(this)     
19         //Function.prototype.call = function(thisArg,args) {};
20         if(hasOwnProperty.call(object, key)) {
21 
22             size++;
23 
24         }
25     }
26     //      object        
27     return size;
28 }
6、したがって、実際のプログラミングでは、属性をオブジェクトの内部に書くだけで、プロトタイプを使って、さまざまな方法を追加して、本オブジェクトとサブオブジェクトに使用しますが、これらの方法はメモリに一つしかありません.(スタティックメンバー関数を連想しますか?)
 1 //  (  prototype  )      !!
 2 
 3 //     "2",Person    name greeting
 4 console.log("Person size: " + objectSize(Person));
 5 
 6 //     "1",Eva        name  ,     ,   "0"
 7 console.log("Eva size: " + objectSize(Eva));
 8 
 9 //     "1",Person2       name  
10 console.log("Person2 size: " + objectSize(new Person2("John")));
11 
12 //     "0",John    ,   "  "    
13 console.log("John size: " + objectSize(John));
 
未完…