书读百遍其义自见
学习《JavaScript设计模式》一书时,前两个章节中的讲解的JavaScript基础知识,让我对属性和方法有了清晰的认识。如下是我的心得体会以及部分摘录的代码。
不同于大多数面向对象语言一样,JavaScript作为一种解释性的弱类型语言,通过自身的一些特性实现类的封装,从而实现面向对象的。面向对象编程的思想就是一些属性方法的隐藏和暴露,比如私有属性、私有方法、共有属性、共有方法等。既然JavaScript实现了面向对象,同样具有这些属性和方法。
JavaScript中包含:
- 私有属性(私有方法)
- 特权方法
- 公有属性(公有方法)
- 类静态共有公有属性(类静态公有方法) 注:对象不能访问
- 共有属性(共有方法)
- 静态私有属性(静态私有方法) 注:通过闭包可以实现
如下是代码实例:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>属性与方法</title> 5 <meta charset="utf-8"> 6 <script type="text/javascript"> 7 var Book=function(id,name,price){ 8 // 私有属性 9 var num=1; 10 var name,price; 11 // 私有方法 12 function checkId(){ 13 14 }; 15 16 // 特权方法 17 this.getName=function(){}; 18 this.setName=function(){}; 19 this.getPrice=function(){}; 20 this.setPrice=function(){}; 21 // 对象公有属性 22 this.id=id; 23 this.chapters=["章节1","章节2"]; 24 // 对象公有方法 25 this.copy=function(){ 26 console.log('公有方法,对象实例可访问'); 27 }; 28 //构造器 29 this.setName(name); 30 this.setPrice(price); 31 } 32 // 类静态公有属性(对象不能访问) 33 Book.isChinese=true; 34 // 类静态公有方法(对象不能访问) 35 Book.resetTime=function(){ 36 console.log('new time'); 37 } 38 39 Book.prototype={ 40 // 共有属性 41 isJSBook:false, 42 // 共有方法 43 display:function(){} 44 } 45 46 var b1=new Book(1,'爱的教育',20); 47 console.log(b1.num); //undefined 对象实例无法访问私有属性 48 console.log(b1.id); //1 对象实例可访问公有属性 49 console.log(b1.isJSBook); //false 对象实例可访问共有属性 50 console.log(b1.isChinese); //undefined 对象实例无法访问类静态公有属性 51 console.log(Book.isChinese); //true 类直接访问类静态公有属性 52 console.log(b1.chapters); //["章节1","章节2"] 对象实例可访问公有属性 53 54 //以下验证公有属性各个对象实例之间互不影响 55 var b2=new Book(2,'茶花女',30); 56 console.log(b2.id); // 57 console.log(b2.chapters); //["章节1","章节2"] 58 b2.chapters.push("章节3"); 59 console.log(b2.chapters); //["章节1","章节2","章节3"] 60 console.log(b1.chapters); //["章节1","章节2"] 61 </script> 62 </head> 63 <body> 64 </body> 65 </html>
通过闭包实现类的静态私有变量和静态私有方法:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>属性与方法</title> 5 <meta charset="utf-8"> 6 <script type="text/javascript"> 7 var Book=(function(){ 8 // 静态私有属性 9 var isChinese=true; 10 // 静态私有方法 11 var resetTime=function(){ 12 console.log('new time'); 13 } 14 15 function _book(id,name,price){ 16 // 私有属性 17 var num=1; 18 var name,price; 19 // 私有方法 20 function checkId(){ 21 }; 22 23 // 特权方法 24 this.getName=function(){}; 25 this.setName=function(){}; 26 this.getPrice=function(){}; 27 this.setPrice=function(){}; 28 // 对象公有属性 29 this.id=id; 30 this.chapters=["章节1","章节2"]; 31 // 对象公有方法 32 this.copy=function(){ 33 console.log('公有方法,对象实例可访问'); 34 }; 35 //构造器 36 this.setName(name); 37 this.setPrice(price); 38 } 39 40 //构建原型 41 _book.prototype={ 42 isJSBook:false, 43 // 共有方法 44 display:function(){} 45 } 46 47 //返回类 48 return _book; 49 })(); 50 51 var b1=new Book(1,'爱的教育',20); 52 console.log(b1.num); //undefined 对象实例无法访问私有属性 53 console.log(b1.id); //1 对象实例可访问公有属性 54 console.log(b1.isJSBook); //false 对象实例可访问共有属性 55 console.log(b1.isChinese); //undefined 对象实例无法访问类静态私有属性 56 console.log(b1.chapters); //["章节1","章节2"] 对象实例可访问公有属性 57 58 //以下验证公有属性各个对象实例之间互不影响 59 var b2=new Book(2,'茶花女',30); 60 console.log(b2.id); // 61 console.log(b2.chapters); //["章节1","章节2"] 62 b2.chapters.push("章节3"); 63 console.log(b2.chapters); //["章节1","章节2","章节3"] 64 console.log(b1.chapters); //["章节1","章节2"] 65 </script> 66 </head> 67 <body> 68 </body> 69 </html>