Java基于对象基础 基于对象和面向对象的区别（转）

Java基于对象基础

 

基于对象和面向对象的区别

 

JavaScript设计者想把javascript语言设计成基于对象(object-based)的语言，他想把这个与面向对象(object-oriented)语言区分开来。但是实际上，可以将基于对象看作是面向对象。

 

原型对象和类的区别

在JavaScript中没有类这一可以使用关键字，当然保留字不算。所以它有自己对类这种封装结构的实现，这和Java，c++还是有很大区别的。但是我们还是能将原型对象(prototype object)看做是类，它们的用法也很相似。

 

类（原型对象）和对象的区别和联系

1、类是抽象的概念，代表一类事物

2、对象是具体的，代表一类实体

3、对象是以类（原型对象）为模板创建起来的

 

 

案例：
 
  1. <html>  
  2.     <head>  
  3.         <script language="javascript">  
  4.             // 人类  
  5.             function Person(){  
  6.                   
  7.             }  
  8.             // 函数用法  
  9.             // Person();  
  10.             // 对象用法  
  11.             var p = new Person();  
  12.             p.name = "张三";  
  13.             p.age = 20;  
  14.             // 从上面可以看出  
  15.             // 1.js中的对象的属性可以动态的添加  
  16.             // 2.属性没有限制  
  17.             window.alert(p.name + " " + p.age);  
  18.             // 类也是特殊的对象  
  19.             window.alert(Person.constructor);  
  20.             // 判断对象是不是类型  
  21.             if(p instanceof Person){  
  22.                 window.alert('true');  
  23.             }  
  24.   
  25.             if(p.constructor == Person){  
  26.                 window.alert('true');  
  27.             }  
  28.   
  29.             // 访问对象属性方式  
  30.             window.alert(p.name);  
  31.             window.alert(p["age"]);  
  32.             // 拼接  
  33.             var age = "a" + "ge";  
  34.             window.alert(p[age]);  
  35.   
  36.         </script>  
  37.     </head>  
  38. </html>  



 

PS：对象公共属性的访问方式 1：对象名.属性名; 2：对象名[‘属性名’];

 

 

JS中创建对象的7种方式

 

1、使用new Object创建对象并添加相关属性

2、工厂方式

3、使用字面值创建对象

4、使用构造函数来定义类（原型对象）

5、使用prototype

6、构造函数及prototype混合方式

7、动态创建对象模式

 

1——使用new Object创建对象并添加相关属性

[javascript] view plain copy
 
  1. var obj=new Object();  
  2. obj.属性=”aa”;  
  3. obj.show=function (){  
  4. };  



 

2——工厂方式

[javascript] view plain copy
 
  1. function createPerson(name, age){  
  2.     var o = new Object();  
  3.     o.name = name;  
  4.     o.age = age;  
  5.     o.getName() = function(){  
  6.         return this.name;  
  7.     };  
  8.     reuturn o;  
  9. }  
  10. createPerson(“zs”, 20).getName();  

 

3——使用字面值创建对象

[javascript] view plain copy
 
  1. var person = {  
  2.     属性;  
  3. };  
  4. person.属性;  

 

4——通过构造函数来定义类

[javascript] view plain copy
 
  1. function 类名/函数名(){  
  2.     属性;  
  3. }  
  4. var p=new 类名/函数名();   

 

5——通过prototype定义

[javascript] view plain copy
 
  1. function Person(){  
  2.   
  3. }  
  4.   
  5. Person.prototype = {  
  6.     属性;  
  7. };  
  8. var person = new Person();  
  9. person.属性;  



6——构造函数及原型混用（使用最多）

[javascript] view plain copy
 
  1. function Person(){  
  2.     属性;  
  3. }  
  4. var p=new 类名/函数名();   
  5. Person.prototype.属性名 = function{  
  6.     属性;  
  7. };  
  8. Person.prototype.属性名 = 属性;  
  9. var person = new Person();  
  10. person.属性;  

 

7——动态原型方法

[javascript] view plain copy
 
  1. function Person(name,age,job)  
  2. {  
  3.     //属性  
  4.     this.name=name;  
  5.     this.age=age;  
  6.     this.job=job;  
  7.     this.friends=["Jams","Martin"];  
  8.     //方法  
  9.     if(typeof this.sayName !="function")  
  10.     {  
  11.         Person.prototype.sayName=function()  
  12.         {  
  13.             alert(this.name);  
  14.         };  
  15.         Person.prototype.sayFriends=function()  
  16.         {  
  17.             alert(this.friends);  
  18.         };  
  19.     }  
  20. }  
  21. var person = new Person("kevin",31,"SE");  
  22. person.sayName();  
  23. person.sayFriends();  



 

特别说明：js中一切都是对象

实例：

[javascript] view plain copy
 
  1. function Person(){}  
  2. window.alert(Person.constructor); //function Function(){ [native code ]}  
  3. var a=new Person();  
  4. window.alert(a.constructor);//对象实例的构造函数 function Person(){}  
  5. window.alert(typeof a);//a的类型是object  
  6. var b=123;  
  7. window.alert(b.constructor); // function Number() { [native code ] }  



 

如何判断一个对象实例是不是某个类型

方法1：

[javascript] view plain copy
 
  1. if(a instanceof Person){  
  2.     window.alert("a是Person");  
  3. }  



方法2：

[javascript] view plain copy
 
  1. if(a.constructor==Person){  
  2.     window.alert("a是Person");  
  3. }  



补充说明：带var和不带var的区别

[javascript] view plain copy
 
  1. var abc=89;//全局变量  
  2. function test(){  
  3.     abc=900; // var abc=900;则输出89  
  4. }  
  5. test();  
  6. window.alert(abc);   //输出900，  



PS：这是因为使用在函数中使用var之后就将那变量看做局部变量了，JS的作用域和Java以块作用域(Block Scope)不同，它是函数作用域(Function Scope)。

 

对象的引用问题说明：

[javascript] view plain copy
 
  1. function Person(){}  
  2. var a=new Person();  
  3. a.age=10;  
  4. a.name="小明";  
  5. var b=a;  
  6. b.name="小白";  
  7. window.alert(b.age+"名字"+b.name+"名字"+a.name);  
  8. // 输出：10名字小白名字小白  

 

PS：对象是以引用的方式指向堆空间的，所以改变引用对象的值，其堆空间的值也被改变了，那么其他对象在引用，其值是修改后的。

 

JS对象回收机制

PS：JavaScript的对象回收机制是垃圾收集(Garbage Collection)机制，在这点上和Java很像，都是当对象的地址被引用的次数变成0的时候，GC就认为这对象是垃圾，就会回收它。但是不一定是变成0之后立马回收，GC会按照一个固定的模式进行回收操作。

除此之外，JS还提供了一种主动销毁对象属性的方法

基本语法：

 

[javascript] view plain copy
 
  1. delete 对象名.属性名; // delete不同作用于对象  

 

 

this关键字

PS：JavaScript中this关键字，用于指明当前是哪个对象调用函数或者使用属性，this也可用于区分原型对象(类)中的公开或者私有属性，还可以在传参的时候指定所传入的对象。

 

案例：

[javascript] view plain copy
 
  1. function Person(){  
  2.     var name="abc"; //私有的，只能在内部使用  
  3.     var age=900; //私有的，只能在内部使用  
  4.     //this说明 show属性是公开. 该属性是指向一个函数地址属性.   
  5.     //则通过 show去调用该函数.  
  6.     this.show=function(){  
  7.        window.alert(name+" "+age);  
  8.     }  
  9. }  
  10. var p1=new Person();  
  11. //window.alert(p1.name+" "+p1.age);//错误的，因为name,age是私有的  
  12. p1.show();  



 

案例：

[html] view plain copy
 
  1. <html>  
  2.     <head>  
  3.     <script type="text/javascript">  
  4.         function test1(){  
  5.             alert(this.v);   
  6.         }  
  7.         var v=190;  
  8.         test1(); // <==> window.test1();   
  9.         window.test1(); // 输出190  
  10.     </script>  
  11.     </head>  
  12. </html>  

 

 

this 只能在类定义的内部使用

 

[javascript] view plain copy
 
  1. //说明this 只能在 类定义的内部使用  
  2. function Dog(){  
  3.     this.name="小明";  
  4. }  
  5. var dog1=new Dog();  
  6. window.alert(this.name); //报空, 因为这样使用，相当于去访问window对象的name属性，但是你没有写.  

 

PS：在原型对象（类）内部除了属性之外，还能有函数，函数的创建方式可以参考我的另一篇博客JavaScript入门，而函数的添加到原型对象(类)的方法，可以参考上面写到的创建对象的7种方式。

 

案例1：

[html] view plain copy
 
  1. <html>  
  2.     <head>  
  3.         <script language="javascript">  
  4.             function Person(){  
  5.                 // 公共属性  
  6.                 this.name = "abc";    
  7.                 this.age = 20;  
  8.                 // 私有属性  
  9.                 var name2 = "xyz";    
  10.                 var age2 = 30;  
  11.                 // 公共方法  
  12.                 this.show = function(){   
  13.                     window.alert(name2 + " " + age2);  
  14.                     show2();  
  15.   
  16.                 }  
  17.                 // 私有方法  
  18.                 function show2(){  
  19.                     window.alert("show2:" + name2 + " " + age2);  
  20.                 }  
  21.             }  
  22.             var p1 = new Person();  
  23.             var p2 = new Person();  
  24.             //window.alert(p1.name + " " + p2.name);  
  25.               
  26.             //p2.name = "cba";  
  27.             //window.alert(p1.name + " " + p2.name);  
  28.             p1.show();  
  29.             // 不能使用  
  30.             //p1.show2();  
  31.             // JavaScript支持这种属性名，属性值的定义方式，这和CSS很像  
  32.             var dog = {name: '小狗', age: 5, fun1 : function(){ window.alert('hello world'); },   
  33.                         fun2 : function(){ window.alert('hello js'); }};  
  34.             window.alert(dog.name + " " + dog.age);  
  35.             dog.fun1();  
  36.             dog.fun2();  
  37.             for(var key in history){  
  38.                 document.writeln(key + ":" + history[key] + "<br/>");  
  39.             }  
  40.         </script>  
  41.     </head>  
  42. </html>     

 

 

案例2：

[html] view plain copy
 
  1. <html>  
  2.     <head>  
  3.         <script language="javascript">  
  4.             function Person(name, age){  
  5.                 // 传入参数，进行初始化  
  6.                 this.name = name;  
  7.                 this.age = age;  
  8.   
  9.                 this.show = function(){  
  10.                     document.write("名字是" + this.name);  
  11.                 }  
  12.                  // 1 + 2 + ... + n  
  13.                 this.plus = function(n){  
  14.                     var res = 0;  
  15.                     for(var i = 1; i <= n; i++){  
  16.                         res += i;  
  17.                     }  
  18.                     return res;  
  19.                 }  
  20.             }  
  21.             var p1 = new Person("张三", 20);  `  
  22.             p1.show();  
  23.             document.write("<br/>" + p1.plus(10));  
  24.   
  25.         </script>  
  26.     </head>  
  27. </html>  

 

综合案例：

JS7.css

[css] view plain copy
 
  1. /* 游戏 */  
  2. .gamediv {  
  3.     width: 500px;  
  4.     height: 400px;  
  5.     background-color: silver;  
  6.     border: 1px solid red;  
  7.   
  8. }  
  9.   
  10. /* 表格样式 */  
  11. .controlcenter{  
  12.     width: 200px;  
  13.     height: 100px;  
  14.     border: 1px solid red;  
  15. }  
  16.   
  17. /* 图片样式 */  
  18. .mario{  
  19.     width: 80;  
  20.     position: relative;  
  21.       
  22. }  

 

JS7.html

[html] view plain copy
 
  1. <html>  
  2.     <head>  
  3.         <!--引入CSS-->  
  4.         <link href="JS7.css" type="text/css" rel="stylesheet">  
  5.         <script languege="javascript" type="text/javascript">  
  6.             // Mario类  
  7.             function Mario(){  
  8.                 // 初始化坐标  
  9.                 this.x = 0;  
  10.                 this.y = 0;  
  11.   
  12.                 // 移动方式 0上，1右，2下，3左  
  13.                 this.move = function(direct){  
  14.                     switch(direct){  
  15.                         case 0:  
  16.                             // window.alert("向上移动");  
  17.                             // 获取img元素  
  18.                             var mymario = document.getElementById("mymario");  
  19.                             // 通过这样的获取方式,top和left必须直接在HTML里面定义  
  20.                             var top = mymario.style.top;  
  21.                             top = parseInt(top.substr(0, top.length - 2));  
  22.                             // 边界情况  
  23.                             if((top - 10) <= 0){  
  24.                                 mymario.style.top = 0 + "px";  
  25.                             } else {  
  26.                                 mymario.style.top = (top - 10) + "px";  
  27.                             }  
  28.                             break;  
  29.                         case 1:  
  30.                             // window.alert("向右移动");  
  31.                             // 获取img元素  
  32.                             var mymario = document.getElementById("mymario");  
  33.                             var left = mymario.style.left;  
  34.                             left = parseInt(left.substr(0, left.length - 2));  
  35.                             // 边界情况  
  36.                             if((left + 10) >= 420){  
  37.                                 mymario.style.left = 420 + "px";  
  38.                             } else {  
  39.                                 mymario.style.left = (left + 10) + "px";  
  40.                             }  
  41.                             break;  
  42.                         case 2:  
  43.                             // window.alert("向下移动");  
  44.                             // 获取img元素  
  45.                             var mymario = document.getElementById("mymario");  
  46.                             var top = mymario.style.top;  
  47.                             top = parseInt(top.substr(0, top.length - 2));  
  48.                             // 边界情况  
  49.                             if((top + 10) >= 340){  
  50.                                 mymario.style.top = 340 + "px";  
  51.                             } else {  
  52.                                 mymario.style.top = (top + 10) + "px";  
  53.                             }  
  54.                             break;  
  55.                         case 3:  
  56.                             // window.alert("向左移动");  
  57.                             // 获取img元素  
  58.                             var mymario = document.getElementById("mymario");  
  59.                             var left = mymario.style.left;  
  60.                             left = parseInt(left.substr(0, left.length - 2));  
  61.                             // 边界情况  
  62.                             if((left - 10) <= 0){  
  63.                                 mymario.style.left = 0 + "px";  
  64.                             } else {  
  65.                                 mymario.style.left = (left - 10) + "px";  
  66.                             }  
  67.                             break;  
  68.                     }  
  69.                 }  
  70.             }  
  71.               
  72.             // 创建Mario对象  
  73.             var mario = new Mario();  
  74.   
  75.             // 全局函数  
  76.             function marioMove(direct){  
  77.                 switch(direct){  
  78.                         case 0:  
  79.                             mario.move(0);  
  80.                             break;  
  81.                         case 1:  
  82.                             mario.move(1);  
  83.                             break;  
  84.                         case 2:  
  85.                             mario.move(2);  
  86.                             break;  
  87.                         case 3:  
  88.                             mario.move(3);  
  89.                             break;  
  90.                     }  
  91.             }  
  92.   
  93.         </script>  
  94.     </head>  
  95.     <body>  
  96.         <div class="gamediv">  
  97.             <img class="mario" id="mymario" src="cat1.jpg" style="left: 0px; top: 0px; "/>  
  98.         </div>  
  99.           
  100.         <!-- 控制中心-->  
  101.         <table border="1px" class="controlcenter">  
  102.             <tr>  
  103.                 <td colspan="3">游戏键盘</td>  
  104.             </tr>  
  105.             <tr>  
  106.                 <td>**</td>  
  107.                 <td><input type="button" value="↑↑" onclick="mario.move(0)"></td>  
  108.                 <td>**</td>  
  109.             </tr>  
  110.             <tr>  
  111.                 <td><input type="button" value="←←" onclick="mario.move(3)"></td>  
  112.                 <td>**</td>  
  113.                 <td><input type="button" value="→→" onclick="mario.move(1)"></td>  
  114.             </tr>  
  115.             <tr>  
  116.                 <td>**</td>  
  117.                 <td><input type="button" value="↓↓" onclick="mario.move(2)"></td>  
  118.                 <td>**</td>  
  119.             </tr>  
  120.         </table>  
  121.     </body>  
  122. </html>  

 

 

JS闭包

 

PS:在说明闭包之前，要先弄清楚js的变量作用域，JS的变量作用域是函数作用域(Function Scope)，这也就是说在如果是在嵌套层内定义的变量会覆盖嵌套层之外的变量。可以这样理解，每当进入一个函数的时候，它会想检查这个函数中的各个变量的声明，如果有和函数外相同的，那么就被覆盖掉了，这个将声明提前到函数头而定义位置不变的语法是JS的一个特色。

除了了解函数作用域之外，还要知道一点作用域链的知识，在JS实现时，它将函数的变量通过链表的形式进行组织的，当执行到嵌套层内部时，嵌套层内部的定义将在链表最前面，之后是上一层，如果还有上一层的话，又会被挂在之后，这也就是为什么嵌套层数越多，全局变量访问越慢的原因了，当然，我们可以通过在嵌套层中获取全局变量的副本，再使用，这样优化，在大型程序中，还是能节省很多时间的。

 

代码:

[html] view plain copy
 
  1. <html>  
  2. <head>  
  3. <meta http-equiv="content-type" content="text/html;charset=utf-8"/>  
  4. <script type="text/javascript">  
  5.     a=20;  
  6.     function test1(){  
  7.         var a=700;  
  8.         function test2(){  
  9.             //如果没 var ,则会到父函数去，找a,找到就使用父函数的a,否则创建  
  10.             // 这里有个需要注意的地方是，当a前面没有任何符号时，JS会默认它是公开的，也就是说会自动在前面加一个this.  
  11.             a=890;  
  12.         }  
  13.         return test2;  
  14.     }  
  15.     var var1=test1();  
  16.     var1();  
  17.     document.write(a);  
  18. </script>  
  19. </head>  
  20. </html>  



 

[javascript] view plain copy
 
  1. function test1(){  
  2.     var n=90;  
  3.     //test1函数的内部函数,可以访问 var n  
  4.     funciton test2(){  
  5.         window.alert(n++);  
  6.     }  
  7.     //把内部函数test2返回外部调用者  
  8.     return test2;  
  9. }  
  10. var res=test1();//调用test1 ,返回 test2函数  
  11. res(); //这时res就是test1内部函数 test2, 输出90  

 

闭包的主要用处

 

1、把局部变量保存在内存中，不让垃圾回收(GC)机制将其回收.

2、让外部去访问内部函数的局部变量.

 

PS：当你return的是内部function时，就是一个闭包。内部function会close-over外部function的变量直到内部function结束。

推荐阅读：

http://kb.cnblogs.com/page/110782/ 

http://www.cnblogs.com/xiaotie/archive/2011/08/03/2126145.html

 

 

 

----------参考《韩顺平.轻松搞定网页设计(html+css+js)》

posted @ 2017-09-02 12:04  Moonshadows  阅读(513)  评论(0)  编辑  收藏  举报