Javascript类和对象基础知识

Javascript中的类其实就是一个function

如下面定义一个Person类

[javascript]  view plain  copy

1. //定义一个类  
2. function Person(){  
3.     this.name = 'jaune';  
4.     this.age = 18;  
5. }  
6.   
7. //创建一个对象  
8.   
9. var person1 = new Person();  
10. console.log(person1);  
11.   
12. /* 
13.  * 控制台打出以下内容 
14.  * Person {name: "jaune", age: 18} 
15.  */   

上面是一个简单的定义类及创建类的方法

[javascript]  view plain  copy

1. //定义一个带有方法的类  
2. function Person(){  
3.     this.name = 'jaune';  
4.     this.age = 18;  
5.       
6.     this.getName=function(){  
7.         return this.name;  
8.     }  
9.       
10.     this.setName = function(name){  
11.         this.name = name;  
12.     }  
13. }  
14.   
15. //创建一个对象  
16.   
17. var person1 = new Person();  
18. person1.setName('me')  
19. console.log(person1);  
20.   
21. /* 
22.  * 控制台打出以下内容 
23.  * Person {name: "me", age: 18, getName: function, setName: function} 
24.  */   

[javascript]  view plain  copy

1. //定义一个带有参数的类  
2. function Person(name,age){  
3.     this.name = name || 'jaune';  
4.     this.age = age || 18;  
5.       
6.     this.getName=function(){  
7.         return this.name;  
8.     }  
9.       
10.     this.setName = function(name){  
11.         this.name = name;  
12.     }  
13. }  
14.   
15. //创建一个对象  
16.   
17. var person1 = new Person();  
18. console.log(person1);  
19. var person2 = new Person('jaune162',23);  
20. console.log(person2);  
21. /* 
22.  * 控制台打出以下内容 
23.  * Person {name: "jaune", age: 18, getName: function, setName: function} 
24.  * Person {name: "jaune162", age: 23, getName: function, setName: function} 
25.  */   

Javascript对象的操作

对象原型prototype的应用，利用prototype可以为类添加一些属性或方法，注意必须是类，对象是没有原型的

[javascript]  view plain  copy

1. console.log(Person.prototype);  
2.   
3. Person.prototype.getInfo = function(){  
4.     return this.name + ' is ' + this.age + ' years old';  
5. };  
6. //创建一个对象  
7.   
8. var person2 = new Person('jaune162',23);  
9. console.log(person2.getInfo());  
10.   
11. console.log(person2.prototype);  
12. /* 
13.  * 控制台打出以下内容,第一行是类的原型属性，第二行是利用原型添加的方法，第三行是对象原型，由此可见对象是没有原型的 
14.  * Person {}  
15.  * jaune162 is 23 years old  
16.  * undefined  
17.  */   

[javascript]  view plain  copy

1. /** 
2.  * apply方法：为对象批量添加属性和方法 
3.  * @param {Object} obj 对象或类 
4.  * @param {Object} config 属性和方法的集合 
5.  */  
6. function apply(obj,config){  
7.       
8.     if (config == null) return obj;  
9.       
10.     for(var name in config){  
11.         if(config.hasOwnProperty(name)){  
12.             obj[name] = config[name];  
13.         }  
14.     }  
15.       
16.     return obj;  
17. }  
18.   
19. //有了这个方法我们的Person类就可以改造的更加灵活了  
20. function Person(config){  
21.       
22.     apply(this,config);  
23.       
24. }  
25.   
26. var person = new Person({  
27.     name:'wang',  
28.     age:16,  
29.     email:'xxx@126.com'  
30. });  
31.   
32. console.log(person);  
33. //Person {name: "wang", age: 16, email: "xxx@126.com"}   

下面我们对apply进行一些改造，改为applyIf，让这个方法只覆盖对象中有的属性

[javascript]  view plain  copy

1. /** 
2.  * applyIf方法：可以称之为，为对象批量赋值 
3.  * @param {Object} obj 对象或类 
4.  * @param {Object} config 属性和方法的集合 
5.  */  
6. function applyIf(obj,config){  
7.       
8.     if (config == null) return obj;  
9.       
10.     for(var name in config){  
11.         if(config.hasOwnProperty(name) && obj.hasOwnProperty(name)){  
12.             obj[name] = config[name];  
13.         }  
14.     }  
15.       
16.     return obj;  
17. }  
18.   
19. //测试applyIf用在上面的类中的效果  
20. function Person(config){  
21.       
22.     applyIf(this,config);  
23.       
24. }  
25. var person = new Person({  
26.     name:'wang',  
27.     age:16,  
28.     email:'xxx@126.com'  
29. });  
30.   
31. console.log(person);  
32. //Person {}   

可以看出根本没有打出任何属性，因为类中不存在这些属性，我们对Person类，稍做改造来看我们的成果

[javascript]  view plain  copy

1. function Person(config){  
2.     this.name = '';  
3.     this.age = '';  
4.       
5.     applyIf(this,config);  
6.       
7. }  
8. var person = new Person({  
9.     name:'wang',  
10.     age:16,  
11.     email:'xxx@126.com'  
12. });  
13.   
14. console.log(person);  
15. //Person {name: "wang", age: 16}   

可以看出通过这个方法可以实现对类的属性的控制，不会在new对象时出现类中本来就不存在的属性。