书读百遍其义自见

学习《JavaScript设计模式》一书时，前两个章节中的讲解的JavaScript基础知识，让我对属性和方法有了清晰的认识。如下是我的心得体会以及部分摘录的代码。

不同于大多数面向对象语言一样，JavaScript作为一种解释性的弱类型语言，通过自身的一些特性实现类的封装，从而实现面向对象的。面向对象编程的思想就是一些属性方法的隐藏和暴露，比如私有属性、私有方法、共有属性、共有方法等。既然JavaScript实现了面向对象，同样具有这些属性和方法。

JavaScript中包含：

  • 私有属性（私有方法）
  • 特权方法
  • 公有属性（公有方法）
  • 类静态共有公有属性（类静态公有方法）   注：对象不能访问
  • 共有属性（共有方法）
  • 静态私有属性（静态私有方法） 注：通过闭包可以实现

如下是代码实例：

 <!DOCTYPE html>

 <html>

 <head>

     <title>属性与方法</title>

     <meta charset="utf-8">

     <script type="text/javascript">

         var Book=function(id,name,price){

             // 私有属性

             var num=1;

             var name,price;

             // 私有方法

             function checkId(){

             };

             // 特权方法

             this.getName=function(){};

             this.setName=function(){};

             this.getPrice=function(){};

             this.setPrice=function(){};

             // 对象公有属性

             this.id=id;

             this.chapters=["章节1","章节2"];

             // 对象公有方法

             this.copy=function(){

                 console.log('公有方法，对象实例可访问');

             };

             //构造器

             this.setName(name);

             this.setPrice(price);

         }

         // 类静态公有属性（对象不能访问）

         Book.isChinese=true;

         // 类静态公有方法（对象不能访问）

         Book.resetTime=function(){

             console.log('new time');

         }

         Book.prototype={

             // 共有属性

             isJSBook:false,

             // 共有方法

             display:function(){}

         }

         var b1=new Book(1,'爱的教育',20);

         console.log(b1.num);            //undefined 对象实例无法访问私有属性

         console.log(b1.id);            //1            对象实例可访问公有属性

         console.log(b1.isJSBook);        //false    对象实例可访问共有属性

         console.log(b1.isChinese);    //undefined    对象实例无法访问类静态公有属性

         console.log(Book.isChinese);    //true 类直接访问类静态公有属性

         console.log(b1.chapters);    //["章节1","章节2"] 对象实例可访问公有属性

         //以下验证公有属性各个对象实例之间互不影响

         var b2=new Book(2,'茶花女',30);

         console.log(b2.id);            //

         console.log(b2.chapters);    //["章节1","章节2"]

         b2.chapters.push("章节3");

         console.log(b2.chapters);    //["章节1","章节2","章节3"]

         console.log(b1.chapters);    //["章节1","章节2"]

     </script>

 </head>

 <body>

 </body>

 </html>

通过闭包实现类的静态私有变量和静态私有方法：

 <!DOCTYPE html>

 <html>

 <head>

     <title>属性与方法</title>

     <meta charset="utf-8">

     <script type="text/javascript">

         var Book=(function(){

             // 静态私有属性

             var isChinese=true;

             // 静态私有方法

             var resetTime=function(){

                 console.log('new time');

             }

             function _book(id,name,price){

                 // 私有属性

                 var num=1;

                 var name,price;

                 // 私有方法

                 function checkId(){

                 };

                 // 特权方法

                 this.getName=function(){};

                 this.setName=function(){};

                 this.getPrice=function(){};

                 this.setPrice=function(){};

                 // 对象公有属性

                 this.id=id;

                 this.chapters=["章节1","章节2"];

                 // 对象公有方法

                 this.copy=function(){

                     console.log('公有方法，对象实例可访问');

                 };

                 //构造器

                 this.setName(name);

                 this.setPrice(price);

             }

             //构建原型

             _book.prototype={

                 isJSBook:false,

                 // 共有方法

                 display:function(){}

             }

             //返回类

             return _book;

         })();

         var b1=new Book(1,'爱的教育',20);

         console.log(b1.num);            //undefined 对象实例无法访问私有属性

         console.log(b1.id);            //1            对象实例可访问公有属性

         console.log(b1.isJSBook);        //false    对象实例可访问共有属性

         console.log(b1.isChinese);    //undefined    对象实例无法访问类静态私有属性

         console.log(b1.chapters);    //["章节1","章节2"] 对象实例可访问公有属性

         //以下验证公有属性各个对象实例之间互不影响

         var b2=new Book(2,'茶花女',30);

         console.log(b2.id);            //

         console.log(b2.chapters);    //["章节1","章节2"]

         b2.chapters.push("章节3");

         console.log(b2.chapters);    //["章节1","章节2","章节3"]

         console.log(b1.chapters);    //["章节1","章节2"]

     </script>

 </head>

 <body>

 </body>

 </html>

JavaScript中的方法和属性的更多相关文章

  1. 全面理解Javascript中Function对象的属性和方法

    http://www.cnblogs.com/liontone/p/3970420.html 函数是 JavaScript 中的基本数据类型,在函数这个对象上定义了一些属性和方法,下面我们逐一来介绍这 ...

  2. JavaScript中的可枚举属性与不可枚举属性

    在JavaScript中,对象的属性分为可枚举和不可枚举之分,它们是由属性的enumerable值决定的.可枚举性决定了这个属性能否被for…in查找遍历到. 一.怎么判断属性是否可枚举 js中基本包 ...

  3. JavaScript中reduce()方法

    原文  http://aotu.io/notes/2016/04/15/2016-04-14-js-reduce/   JavaScript中reduce()方法不完全指南 reduce() 方法接收 ...

  4. JavaScript中的方法、方法引用和参数

    首先,我们来看一段代码,如果觉得不甚明白的,则本文会对你有益: var player = function (e) {             return (function f(m) {      ...

  5. 详解 JavaScript 中 splice() 方法

    splice() 方法是一个比较少用的方法,但是功能确实很好,并且在我们 coding 的时候,经常有需要 splice() 方法,先介绍一下该方法. 在 JavaScript 中 splice() ...

  6. JavaScript中的方法

    JavaScript中的方法 在JavaScript中,可以通过对象来调用对应的方法.在JavaScript中,有三个重要的window对象方法:用于显示警告信息的alert.用于显示确认信息的con ...

  7. JavaScript中Array方法总览

    title: JavaScript中Array方法总览 toc: true date: 2018-10-13 12:48:14 push(x) 将x添加到数组最后,可添加多个值,返回数组长度.改变原数 ...

  8. javascript中对象访问自身属性的方式

    在javascript中,通过对象的方法访问对象自身属性时,必须采用this.fieldName的方式. 原因是javascript中Function是无状态的,访问对象的属性时,必须指定当前的上下文 ...

  9. JavaScript中trim 方法实现

    Java中的 String 类有个trim() 能够删除字符串前后的空格字符.jQuery中也有trim()方法能够删除字符变量前后的字符串. 可是JavaScript中却没有对应的trim() 方法 ...

随机推荐

  1. vue 自定义封装组件 使用 model 选项

    自定义组件的 v-model 一个组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件,但是像单选框.复选框等类型的输入控件可能会将 value 特性用于不同 ...

  2. Django中如何将javascript中的变量传给位于javascript内的{% url %}中的参数？

    这个问题困扰了我一天,不知道困扰了你多久,希望能帮助你 django 中的url模版使用起来可以说是非常方便的,但是怎么在url模版中传入参数的 {% url "url.index" ...

  3. B/S大文件断点续传

    一. 功能性需求与非功能性需求 要求操作便利,一次选择多个文件和文件夹进行上传:支持PC端全平台操作系统,Windows,Linux,Mac 支持文件和文件夹的批量下载,断点续传.刷新页面后继续传输. ...

  4. Python_011(生成器)

    一.生成器 def func(): ") return 222 ret = func() print(ret) #结果 111 222 1)这里面函数体里是返回值return;如果将retu ...

  5. QGIS SDK下载

    https://www.e-learn.cn/content/qita/1241748 基于OSGEO4W下载lib包. 并在VS中调用. 这样比直接编译容易一些.可以快速上手.

  6. 调试 & 常数优化：我有特别的 debug 技巧

    rxz 的调试技巧(https://www.zhihu.com/question/60719584/answer/179363450): #define DEBUG printf("Pass ...

  7. 一些比较好的blogs

    01Trie水过普通平衡树 MinMax容斥 Trie与可持久化Trie 圆方树 CDQ分治 网络流 有上下界的网络流 Mobius函数 组合数学盒子小球 dsu on tree VFK大爷的反演课件 ...

  8. jsc2019_qualD Classified

    题目大意 给你一个有n个点的完全图 求一种方案是的给边染色后任何一点不能沿一种颜色的边走奇数条边回到这个点 要求颜色数最少 分析 考场上输出格式打错见祖宗... 我们每次找一个最大二分图将其染一个新颜 ...

  9. AGC024C Sequence Growing Easy

    题目大意 你开始有一个序列x 它所有项都是0 你有一个操作:x[i]=x[i-1]+1 问你至少几次操作可以让x序列变为给定的a序列 分析 老年人完全不会这种脑子题/kk........ 我们定义b[ ...

  10. Spring Boot 读取外部的配置文件

    Spring Boot 程序会按优先级从下面这些路径来加载application.properties 或者 application.yml 配置文件 jar包同级目录下的/config目录jar包同 ...