• JavaScript中的方法和属性


    书读百遍其义自见

    学习《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>
  • 相关阅读:
    SQL注入
    spring+springMVC+hibernate 三大框架整合
    Spring+SpringMVC+MyBatis深入学习及搭建(十三)——SpringMVC入门程序(二)
    Spring+SpringMVC+MyBatis深入学习及搭建(十二)——SpringMVC入门程序(一)
    [Test_HTML5] HTML5笔试题1
    [Hades_BT5] backtrack5 WIFI配置
    [Hades_BT5] BackTrack5网络设置 用国内更新源更新
    [Android_cracker] 最新安卓解包工具
    [Android_cracker] 安卓破译之路
    [Android_cracker] Android DEX安全攻防战
  • 原文地址:https://www.cnblogs.com/planetwithpig/p/11693863.html
Copyright © 2020-2023  润新知