JavaScript継承とprototypeについてのちょっとの体験(一)
14112 ワード
JavaScriptのプロトタイプは初心者を混乱させやすいです.私もこの言語を勉強し始めたばかりです.短いコードを書いて理解を助けます.(千語万語、コメントの中で)
1、まず簡単な関数でJavaScriptの対象かどうかを判断します.JavaScriptにおけるデータタイプは、元のタイプとオブジェクトタイプ(関数を含む)に分けられます.
2、継承方法を実現し、サブオブジェクトを返します.
未完…
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));
未完…