本文不适合javascript初学者看（javascript水平还停留在函数级别的朋友，看了会觉得很晕的）。如果你想让你的javascript代码变得更加优美，性能更加卓越。或者，你想像jQuery的作者一样，写出属于自己优秀的类库（哪怕是基于jquery的插件）。那么，你请务必要学习javascript面向对象，否则你无法更灵活的使用javascript这门语言。

什么事闭包？到底什么是原型？（知道闭包和原型的，就算得上是javascript的高手了。但真正能够理解，并且灵活运用的人并不多）到底该如何学习javascript中的面向对象呢？在javascript这么语言正如日中天，相信不少人正在为此而困惑。

本文中，我讲用代码+详细注释的方式，一行行一步步讲述javascript中的面向对象编程。当然有些只是我个人的理解，不足之处，敬请谅解！

1.下面部分的代码，将是从目前十分流行的JSON数据格式以及javascript数组，来一步步像大家阐述javascript中的面向对象思想。

view plain
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <title>JSON数据格式</title>
  5. <script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
  6. <script type="text/javascript">
  7. function jsonTest() {
  8. //定义json数据格式 -- 以文本的形式存在，转换为javascript对象或者数组
  9. //对象中可以包含数组，数组中也可以包含对象，可以存在相互嵌套的关系
  10. var json1 = "[1,2,{a:123,b:'str',c:[100,200]}]";//数组形式
  11. var parsejson1 = eval(json1);//将纯文本的内容转换为javascript原生支持的json
  12. var json2 = "{name:'dinglang',age:21,hobby:['武术','电影']}";//对象形式
  13. //var parsejson2 = eval(json2); //这样直接转换会报错
  14. //当被eval()转换的纯文本json数据为对象形式时，需要在前后加上"()"
  15. var parsejson2 = eval("(" + json2 + ")"); //这样转换就可以了
  16. alert("");
  17. }
  18. //探索一下JSON这种数据格式的由来
  19. //1.首先是回顾一下javascript数组的相关知识
  20. function arrTest() {
  21. // 1)数组的基本定义与赋值
  22. var arrOne = new Array(); //第一种创建方法
  23. var arrTwo =  new Array(0,1,2);//第二种创建方式(创建的时候就给数组赋初始值)
  24. var arrThree = []; //第三种方式 --定义一个空数组
  25. var arrFour = [1, 2, 3, 5]; //第四种方式--定义一个数组，并给数组赋初始值
  26. //创建多维数组
  27. var arrFive = new Array(1, new Array(2, 3), 4, 5); //创建一个多维数组(嵌套的)
  28. var arrSix = [1, [2, 3], 4];//创建一个多维数组
  29. // 2)数组的基本操作（数组是javascript语言中一种很重要的数据结构）
  30. alert(arrSix[1]);  //通过数组下标，来获取数组中对应的某个元素
  31. arrSix[0] = 100; //给数组中下标对应的元素赋值(如果该元素还未创建，就创建该元素并赋值)
  32. arrSix[99] = 888; //arrSix中会自动创建下标为99的元素，并给其赋值 --javascript中数组的长度是可以随时改变的
  33. // 3)javascript当中数组常用的一些方法
  34. //concat方法的使用 --可以做数组的连接或者合并，原数组的内容不变，将返回一个新的数组对象
  35. var arrFourarrFour1 = arrFour.concat(101, 102, 103);//第一种连接方式
  36. var arrFourarrFour2 = arrFour.concat([104, 105]);//第二种连接方式
  37. var arrFourarrFour3 = arrFour.concat(arrFour1); //将已经定义的数组进行连接
  38. //join方法--将数组中元素，按照指定的分隔符连接成字符串输出，原数组的内容不变
  39. //slice方法--返回当前数组中的子数组，原数组中的内容不会改变
  40. //push/pop  在数组的尾端追加(push)或弹出(pop),将会修改原数组的内容
  41. arrFive.push(107);//在数组尾部追加一个元素
  42. arrFive.pop(); //弹出数组中最后一个元素
  43. //在数组的开头追加(shift)和unshift(弹出)操作
  44. arrFive.reverse(); //反转数组中的元素
  45. arrFive.sort(); //按照字母是顺序，对数组中的元素进行升序排列
  46. arrFive.sort(function (a, b) {
  47. return a - b;
  48. }); //按照数值大小，进行升序排列。如果返回的是负值，那么a就会出现在b的前面
  49. arrFive.sort(function (a, b) {
  50. return b - a;
  51. }); //按照降序排列
  52. //splice  可以删除数组中一部分元素，并把部分元素进行返回。也可以在指定位置添加元素
  53. var arrSplice1 = arrSix.splice(3, 2); //从下标为3的元素开始删除，删除2个元素
  54. var arrSplice2 = arrSix.splice(4); //从下标为4的元素开始删除，一直删除到数组的末尾
  55. arrSix.splice(1, 0, 401, 402); //在下标为1的元素前面，插入401，402这两个元素
  56. arrSix.splice(1, 0[188, 189]);//在下标为1的元素前面，插入[188,199]
  57. }
  58. //2.javascript中的对象的定义、使用
  59. var obj1 = new Object(); //定义一个对象
  60. var obj2 = {};  //使用"{}"也可以定义一个对象
  61. //给对象增加属性
  62. obj1.num = 1;
  63. obj1.str = "string";
  64. obj1.sayHello = function () {
  65. alert("Hello");
  66. }
  67. obj2.srcObj = obj1; //将obj1对象作为obj2对象的属性
  68. //属性的访问 --第一种访问方式
  69. obj1.num; //也可以这么访问  obj2.srcObj.num;
  70. obj1.str;           //obj2.srcObj.str;
  71. obj1.sayHello();   //obj2.srcObj.sayHello();
  72. //属性的访问 --第二种方式
  73. obj1["num"];        //obj2["srcObj"]["num"];
  74. obj1["str"];        //obj2["srcObj"]["str"];
  75. obj1["sayHello"](); //obj2["srcObj"]["sayHello"]();
  76. //通过对象直接量的方式，定义和调用对象、属性
  77. var obj3 = {
  78. num: 1,
  79. str: "string",
  80. sayHello: function () {
  81. alert('Hello');
  82. }
  83. }
  84. //访问方式同上，例如
  85. obj3.num; //obj3["num"];
  86. //看清楚了吗？这就是javascript中JSON数据格式的原型
  87. //下面来深入讲解javascript语言的面向对象特性
  88. //javascript中定义类，需要用function来模拟
  89. //         function Teacher(){
  90. //
  91. //         }
  92. //建议使用下面这种方法来创建一个类，以便将类和函数区分开来(建议定义类时首字母大写)
  93. var Teacher = function () {
  94. }
  95. //定义一个book类，这里的function还承担了构造函数的工作
  96. //在使用new操作符创建Book对象时，这个funtion里面的代码将会被执行一次
  97. //this关键字代表的是当前对象
  98. function Book(name) {
  99. //定义公有的属性
  100. this.name = name;
  101. //定义公有的函数
  102. this.getName = function () {
  103. return this.name;
  104. }
  105. this.setName = function (nname) {
  106. this.name = nname;
  107. }
  108. }
  109. function ooTest() {
  110. var tech = new Teacher();
  111. alert(tech instanceof Teacher); // instanceof函数，表示是否属于某对象类型
  112. var book1 = new Book("C#");//这里的new操作相当于先创建了一个简单对象，调用了类的构造函数
  113. var book2 = new Book("JAVA");
  114. alert(book1.name);//弹出C#
  115. alert(book2.name);//弹出JAVA
  116. book1.setName(".NET");
  117. alert(book1.name);//弹出.NET
  118. alert(book2.name); //弹出JAVA
  119. //function上面都有一个原型对象 --prototype
  120. var proto = Book.prototype;
  121. proto.str = "string";
  122. proto.hello = function () {
  123. alert("Hello");
  124. }
  125. //给原型定义了属性和方法后，拥有这个原型对象的function模拟出来的类，也具有该属性和方法
  126. alert(book1.str); //弹出string
  127. book1.hello(); //弹出hello
  128. }
  129. </script>
  130. </head>
  131. <body>
  132. <input  type="button" value="测试json" onclick="jsonTest()"/>
  133. </body>
  134. </html>

2.下面部分代码，是从另外一个角度讲解javascript中的面向对象编程。是借鉴EasyJF开源团队的讲解，我个人做了一些补充和说明。

view plain
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <title>javascript面向对象编程</title>
  5. <script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
  6. <script type="text/javascript">
  7. $(function () {
  8. //            function animal(name) {
  9. //                this.name = name;
  10. //                this.age = 0;
  11. //            }
  12. //            var a1 = animal;
  13. //            alert(a1);//弹出整个函数体
  14. //            var a2 = animal("dinglang");
  15. //            alert(a2); //弹出undefined
  16. //            var a3 = new animal();
  17. //            alert(a3);//弹出object
  18. //            var a4 = new animal;
  19. //            alert(a4);//弹出object
  20. //求值
  21. //alert(sum(1, 3)); //要求弹出结果为4
  22. // alert(sum(1, 3, 5, 4, 7)); //要求弹出结果为20
  23. //根据java或者C#的编程经验，首先想到的是函数重载。
  24. //            function sum(a, b) {
  25. //                return a + b;
  26. //            }
  27. //            function sum(a, b, c, d, e) {
  28. //                return a + b + c + d + e;
  29. //            }
  30. //不幸的是，javascript并不支持函数重载。如果照上面那么写，只有下面的那个函数才会生效
  31. //javascript支持可变参数的函数
  32. function sum() {
  33. var n = 0;
  34. for (var i = 0; i < arguments.length; i++) {
  35. n += arguments[i];
  36. }
  37. return n;
  38. }
  39. //javascript高级知识 -- 闭包
  40. //函数里面嵌套函数，且在外部被引用了，所以这个对象i不会被垃圾回收机制清除,所以i递增
  41. function f1() {
  42. var i = 0;
  43. var f2 = function () {
  44. i++;
  45. alert(i);
  46. }
  47. return f2; //f2对象指的是整个函数体
  48. }
  49. var f3 = f1(); // "f1()"就是指该函数的执行结果或者返回值 --f2
  50. //           f3();//1
  51. //            f3();//2
  52. //            f3();//3
  53. //作用域与this关键字
  54. //            var obj = new Object();
  55. //            obj.v = "v is a object";
  56. //            //相当于这么写
  57. //           var obj2 = { v: "v is a object" };
  58. //作用域Scope
  59. var b1 = { v: "this is b1" };
  60. var b2 = { v: "this is b2" };
  61. function b(x, y) {
  62. //  alert(this.v + "," + x + "," + y);
  63. }
  64. b("ding", "lang"); //undefined,"ding","lang"
  65. //调用b函数时，b函数中的this关键字指的是window对象.而Window对象中没有v对象，所以undefined
  66. //window.b("ding", "lang"); //undefined,"ding","lang"   --与 b("ding", "lang");意义相同
  67. //b.call();//就等于b();
  68. //call函数的第一个参数表示的是函数的上下文 --表示b函数中的this 所以this关键字=b1
  69. // b.call(b1, "ding", "lang"); //this is b1,ding,lang
  70. //注意apply函数的用法：第一个参数表示的也是函数中的上下文。不过后面的参数要以数组的形式传递
  71. // b.apply(b2, ["ding", "lang"]); // //this is b1,ding,lang
  72. //关于作用域，再补充一点
  73. var b3 = { v: "this is b3",
  74. sayHello: function () {
  75. alert(this.v);
  76. }
  77. }
  78. // b3.sayHello(); //this is b3
  79. //b3.sayHello.call(b1); //会调用b1对象中的sayHello函数  -- this is b1
  80. // for ... in
  81. //            var arr = new Array(); //new 一个js数组，与c#、java等编程语言不同，可以不指定长度
  82. //            arr[0] = 1; //赋值
  83. //            arr[1] = 2;
  84. //            arr[2] = 3;
  85. //javascript支持直接定义赋值
  86. var arr = new Array(1, 2, 3);
  87. for (var i = 0; i < arr.length; i++) {
  88. // alert(arr[i]); //弹出 1，2 ，3
  89. }
  90. //注意：javascript中的for...in ，看起来与C#或者java中的foreach类似，但是不同
  91. for (var key in arr) {
  92. // alert(key);// 弹出0，1，2   key指的是键，而不是值。在C#的foreach中，“in”前的变量指的是值
  93. //alert(arr[key]);//可以使用这种方式取值 --key指的是键，也就是某个对象中包含的所有的对象，而不是值
  94. }
  95. //假如我没有firebug，想使用IE实现类似与firebug控制台中console.dir的功能，可以这样
  96. for (var key in window) {
  97. // 这样就能将window对象中，包含的全部对象迭代显示出来。也就实现了firebug中console.dir的功能
  98. //document.getElementById("key").innerHTML += (key + ":" + window[key] + "</br>");
  99. }
  100. //对象的删除（释放内存-- 在extjs组件中常用）
  101. //            delete b3.v; //删除b3对象中的v成员
  102. //            alert(b3.v); // undefined --因为v这个成员已经被删除了
  103. //类的修改，扩展（重点，难点）
  104. //1.假如我要实现一个简单的加法计算
  105. //       var numOne = 5;//如果直接这么定义，那么下面的numOne.add(8);执行会报错
  106. //如果我这么写，下面调用就不会报错了(因为此时的numOne，是个类.相当于java或C#语言中原始的基本数据类型、包装类型)
  107. var numOne = new Number(5);
  108. numOne.add = function (numTwo) {
  109. return this + numTwo;
  110. }
  111. //alert(numOne.add); //undefined
  112. // alert(numOne.add(8));//这样写看起来没错，但是会报错--numOne.add is not a function
  113. var numThree = new Number(100);
  114. //如果我现在想要给numThree对象中也加上add这么一个函数
  115. //直接使用prototype这个特殊的属性来实现，给所有的Number类型实例都加入add函数
  116. Number.prototype.add = function (numTwo) {
  117. return this + numTwo;
  118. }
  119. alert(numThree.add(200).add(300)); //弹出600   100+200+300=600
  120. //说明所有的Number类型确实都具有了add这么一个函数   超级延时绑定--类的扩展
  121. //小例子 --扩展String类，给所有的String类加上sayILoveYou
  122. //            String.prototype.sayILoveYou = function () {
  123. //                alert(this.toString() + ", I Love You");
  124. //            }
  125. //            var strOne = "dinglang";
  126. //            strOne.sayILoveYou();
  127. //javascript中的类的用法
  128. //使用构造函数的方式，定义简单的Person类（javascript函数也是一个类）
  129. function Person(name) {
  130. this.name = name;
  131. this.age = 20;
  132. var year = 2010; //定义一个私有的成员sex
  133. //                this.sayHello = function () {
  134. //                    alert(this.name + ":今年" + this.age + "岁,HelloWold");
  135. //可以直接在这里面定义sayHello成员函数（特权方法），但是每次实例化该类的时候都会重新去定义，所有还是选择用prototype属性的方式
  136. //如果在sayHello函数中要使用year这个私有对象，就可以直接在此定义这个特权方法。这就是典型的“闭包”。
  137. }
  138. //如果使用了new关键字，说明Person就是一个类。否则的话，只是一个普通的函数
  139. var p1 = new Person("丁浪"); // new 一个Person类的实例
  140. var p2 = new Person("蔡世友"); //注意：别按照java或者C#的习惯，写成了Person p =new Person("XXX");
  141. //给Person这个自定义的类，添加一个sayHello函数
  142. Person.prototype.sayHello = function () {
  143. alert(this.name + ":今年" + this.age + "岁,HelloWold");
  144. }
  145. p1.sayHello();
  146. p2.sayHello();
  147. //实现javascript中的继承
  148. function classA(name) {
  149. this.name = name;
  150. this.showName = function () {
  151. alert(this.name);
  152. }
  153. }
  154. function classB(name) {
  155. //1)使用newMethod的方式实现继承
  156. //                this.newMethod = classA;
  157. //                this.newMethod(name);
  158. //                delete this.newMethod; //释放对象
  159. //2)调用claasA这个函数，并把他的上下文(作用域)指向this(也就是classB类的实例)
  160. //这样也能实现继承效果（使用call或者apply）
  161. classA.call(this, name);
  162. //classA.apply(this,[name]);
  163. }
  164. objA = new classA("操作系统");
  165. objB = new classB("组成原理");
  166. objA.showName(); //弹出“操作系统”
  167. objB.showName(); //弹出“组成原理”
  168. })
  169. </script>
  170. </head>
  171. <body>
  172. <div id="key"> </div>
  173. </body>
  174. </html>

本文出自blog.csdn.net/dinglang_2009，转载请注明出处。未经本人允许，任何人不得借此牟利。

转载于:https://www.cnblogs.com/dinglang/archive/2011/10/29/2228956.html

如何理解并学习javascript中的面向对象（OOP）相关推荐

  1. javascript中的面向对象理解（一）

    一.注意:提到"面向对象"这一概念,众所周知,javascript中的面向对象思想与其他的编程语言(例如:PHP.Java等)是有着很大区别的.因此,我们先复习下,传统意义上,面向 ...

  2. html5学习笔记---05.JavaScript 中的面向对象,继承和封装

    05.JavaScript 中的面向对象 a.创梦技术qq交流群:CreDream:251572072 a.JavaScript 是一种基于对象的语言   类:JavaScript 对象很抽象,所以下 ...

  3. javascript 中的面向对象实现 如何封装

    javascript 是一门很灵活的语言,也是一门有缺陷的语言. 比如我们今天要谈的,如何用面向对象的手法来封装javascript ,javascript是没有类的概念的. 所以今天谈到的封装,其实 ...

  4. 理解与使用Javascript中的回调函数

    在Javascript中,函数是第一类对象,这意味着函数可以像对象一样按照第一类管理被使用.既然函数实际上是对象:它们能被"存储"在变量中,能作为函数参数被传递,能在函数中被创建, ...

  5. 【JavaScript】理解与使用Javascript中的回调函数

    在Javascript中,函数是第一类对象,这意味着函数可以像对象一样按照第一类管理被使用.既然函数实际上是对象:它们能被"存储"在变量中,能作为函数参数被传递,能在函数中被创建, ...

  6. JavaScript中的面向对象程序设计

    本文内容目录顺序: 1.Object概念讲述: 2.面向对象程序设计特点: 3.JavaScript中类和实例对象的创建: 4.原型概念: 5.原型API: 6.原型对象的具体使用:7.深入理解使用原 ...

  7. javascript中的面向对象_面向对象和函数式编程的本质区别

    编程的本质 当写过许许多多程序后,接触了那么多编程模式.设计模式.框架.语言.算法.数据结构以后,就会发现编程的本质万变不离其宗就是,操纵一坨数据.当然操纵的方式有许多,存储的方式也五花八门,但是本质 ...

  8. JavaScript中的面向对象--对象创建

    JavaScript高级程序设计第3版总结p156 1.JavaScript中的对象 首先,ECMAScript 中函数实际上是对象.每个函数都是 Function 类型的实例,而且都与其他引用类型一 ...

  9. JavaScript基础知识总结 14：学习JavaScript中的File API、Streams API、Web Cryptography API

    目录 一.Atomics和SharedArrayBuffer 二.原子操作基础 1.算术及位操作方法 2.原子读和写 3.原子交换 4.原子Futex操作与加锁 三.跨上下文消息 四.Encoding ...

最新文章

  1. Linux的mount命令简介
  2. 海明嵌入Hamming Embedding生成Binary Signature之matlab程序代码
  3. 简单几步制作软raid
  4. 将一个java工程导入到myeclipse应该注意的地方
  5. python当当图书信息抓取
  6. 超星高级语言程序设计实验作业 （实验03 模块化程序设计）
  7. jsp网页视频播放器
  8. MFC控件学习：图片(bmp/png)
  9. 微信公众服务号申请流程
  10. mac怎么无线打印机连接到服务器,Mac电脑怎么连接打印机
  11. qq传输文件腾讯服务器保存在哪里,电脑接收的QQ文件在哪里？在哪个文件夹可以找到QQ接收的文件...
  12. 【AAAI2022】FDIWN - Feature Distillation Interaction Weighting Network for Lightweight Image SR
  13. 区块链上的中国？2018见分晓
  14. 剽悍一只猫---新书分享
  15. 鼠标移动效果html5,js实现鼠标左右移动，图片也跟着移动效果
  16. PG第五章-体系结构
  17. 织梦dedecms 本地模板安装步骤
  18. uni-app富文本图片太大溢出以及富文本显示问题
  19. Word2003文档中字数统计在哪？
  20. 我用Python爬取了4000+股票数据，并用plotly绘制了树状热力图(treemap)

热门文章

  1. CentOS 5.X用第三方源安装PHP MySQL Apache等
  2. 【Android】刷Rom:adb reboot bootloader
  3. Activity configChanges 含义
  4. JavaScript new对象的四个过程
  5. token和session的区别
  6. 学习转载：Linux命令--grep|正则表达式
  7. auth复习和BBS项目的登录(1)
  8. 思科、华为交换机的一些命令
  9. HttpClient常用的一些常识
  10. 管道实现进程间通讯 、WaitNamedPipe