js模擬類


ECMAScript6已經支持了class,但之前版本都不支持類,但是可以通過一些方法來模擬類。

js中的類,既是重點,也是難點,很多時候都感覺模棱兩可。

首先強調一下js中很重要的3個知識點:this、prototype、constructor。

下面我們來總結一下定義(模擬)類的幾種方法:

1.工廠模式

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function createObject(name,age){
   var obj = new Object();
   obj.name = name;
   obj.age = age;
   obj.getName = function (){
     return this .name;
   };
   obj.getAge = function (){
     return this .age;
   }
   return obj;
}
var obj2 = createObject( "王五" ,19);
console.log(obj2.getName());
console.log(obj2.getAge());
console.log(obj2.constructor);

工廠模式的方法創建對象,工廠模式可以根據接受的參數來創建一個包含必要信息的對象,可以無限次數的調用這個方法,每次都返回一個包含2個屬性2個方法的對象。工廠模式解決了創建類似對象的問題,但沒有解決對象的識別問題,即不能確定一個對象的類別,統一為Object。

2.構造函數法

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
function Person(name,age,job){
   this .name = name;
   this .age = age;
   this .job = job;
}
 
Person.prototype = {
   constructor:Person,
   getName: function (){
     return this .name;
   },
   getAge: function (){
     return this .age;
   },
   getJob: function (){
     return this .job;
   }
}
 
var p = new Person( "二麻子" ,18, "worker" );
console.log(p.constructor);
console.log(p.getName());
console.log(p.getAge());
console.log(p.getJob());

構造函數的方式雖然確定了對象的歸屬問題,能夠確定對象的類型,但構造函數中的方法需要在每個對象中都要重新創建一遍,導致一些性能問題。

3.原型模式

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
function Person(){
 
}
Person.prototype = {
   constructor:Person,
   name: "張三" ,
   age:21,
   job: "teacher" ,
   getName: function (){
     return this .name;
   },
   getJob: function (){
     return this .job;
   }
}
 
var p = new Person();
console.log(p.getName()); //張三
console.log(p.getJob()); //teacher
var p2 = new Person();
p2.name = "李四" ;
console.log(p2.getName()); //李四

由實例代碼我們可以知道,對象實例可以訪問原型中的值,但不能重寫原型中的值,如果對象實例中定義了和原型重名的屬性,那么該屬性就會屏蔽原型中的那個屬性,但並不會重寫。

4.封裝(暫且這么叫吧)

?
1
2
3
4
5
6
7
8
9
10
11
12
var Dog = {
   createDog: function (){
     var dog = {};
     dog.name = "汪汪" ;
     dog.sayHello = function (){
       console.log( "Hello World!" );
     };
     return dog;
   }
};
var dog = Dog.createDog();
dog.sayHello();

就是把代碼都封裝起來,將實例對象作為一個整體返回,有點類似於工廠模式。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM