Java基于对象基础 基于对象和面向对象的区别(转)
Java基于對象基礎(chǔ)
?
基于對象和面向?qū)ο蟮膮^(qū)別
?
JavaScript設(shè)計者想把javascript語言設(shè)計成基于對象(object-based)的語言,他想把這個與面向?qū)ο?object-oriented)語言區(qū)分開來。但是實際上,可以將基于對象看作是面向?qū)ο蟆?/p>
?
原型對象和類的區(qū)別
在JavaScript中沒有類這一可以使用關(guān)鍵字,當(dāng)然保留字不算。所以它有自己對類這種封裝結(jié)構(gòu)的實現(xiàn),這和Java,c++還是有很大區(qū)別的。但是我們還是能將原型對象(prototype?object)看做是類,它們的用法也很相似。
?
類(原型對象)和對象的區(qū)別和聯(lián)系
1、類是抽象的概念,代表一類事物
2、對象是具體的,代表一類實體
3、對象是以類(原型對象)為模板創(chuàng)建起來的
?
?
案例:
- <html>??
- ????<head>??
- ????????<script?language="javascript">??
- ????????????//?人類??
- ????????????function?Person(){??
- ??????????????????
- ????????????}??
- ????????????//?函數(shù)用法??
- ????????????//?Person();??
- ????????????//?對象用法??
- ????????????var?p?=?new?Person();??
- ????????????p.name?=?"張三";??
- ????????????p.age?=?20;??
- ????????????//?從上面可以看出??
- ????????????//?1.js中的對象的屬性可以動態(tài)的添加??
- ????????????//?2.屬性沒有限制??
- ????????????window.alert(p.name?+?"?"?+?p.age);??
- ????????????//?類也是特殊的對象??
- ????????????window.alert(Person.constructor);??
- ????????????//?判斷對象是不是類型??
- ????????????if(p?instanceof?Person){??
- ????????????????window.alert('true');??
- ????????????}??
- ??
- ????????????if(p.constructor?==?Person){??
- ????????????????window.alert('true');??
- ????????????}??
- ??
- ????????????//?訪問對象屬性方式??
- ????????????window.alert(p.name);??
- ????????????window.alert(p["age"]);??
- ????????????//?拼接??
- ????????????var?age?=?"a"?+?"ge";??
- ????????????window.alert(p[age]);??
- ??
- ????????</script>??
- ????</head>??
- </html>??
?
PS:對象公共屬性的訪問方式?1:對象名.屬性名;?2:對象名[‘屬性名’];
?
?
JS中創(chuàng)建對象的7種方式
?
1、使用new?Object創(chuàng)建對象并添加相關(guān)屬性
2、工廠方式
3、使用字面值創(chuàng)建對象
4、使用構(gòu)造函數(shù)來定義類(原型對象)
5、使用prototype
6、構(gòu)造函數(shù)及prototype混合方式
7、動態(tài)創(chuàng)建對象模式
?
1——使用new?Object創(chuàng)建對象并添加相關(guān)屬性
[javascript]?view plaincopy- var?obj=new?Object();??
- obj.屬性=”aa”;??
- obj.show=function?(){??
- };??
?
2——工廠方式
[javascript]?view plaincopy- function?createPerson(name,?age){??
- ????var?o?=?new?Object();??
- ????o.name?=?name;??
- ????o.age?=?age;??
- ????o.getName()?=?function(){??
- ????????return?this.name;??
- ????};??
- ????reuturn?o;??
- }??
- createPerson(“zs”,?20).getName();??
?
3——使用字面值創(chuàng)建對象
[javascript]?view plaincopy- var?person?=?{??
- ????屬性;??
- };??
- person.屬性;??
?
4——通過構(gòu)造函數(shù)來定義類
[javascript]?view plaincopy- function?類名/函數(shù)名(){??
- ????屬性;??
- }??
- var?p=new?類名/函數(shù)名();???
?
5——通過prototype定義
[javascript]?view plaincopy- function?Person(){??
- ??
- }??
- ??
- Person.prototype?=?{??
- ????屬性;??
- };??
- var?person?=?new?Person();??
- person.屬性;??
6——構(gòu)造函數(shù)及原型混用(使用最多)
[javascript]?view plaincopy- function?Person(){??
- ????屬性;??
- }??
- var?p=new?類名/函數(shù)名();???
- Person.prototype.屬性名?=?function{??
- ????屬性;??
- };??
- Person.prototype.屬性名?=?屬性;??
- var?person?=?new?Person();??
- person.屬性;??
?
7——動態(tài)原型方法
[javascript]?view plaincopy- function?Person(name,age,job)??
- {??
- ????//屬性??
- ????this.name=name;??
- ????this.age=age;??
- ????this.job=job;??
- ????this.friends=["Jams","Martin"];??
- ????//方法??
- ????if(typeof?this.sayName?!="function")??
- ????{??
- ????????Person.prototype.sayName=function()??
- ????????{??
- ????????????alert(this.name);??
- ????????};??
- ????????Person.prototype.sayFriends=function()??
- ????????{??
- ????????????alert(this.friends);??
- ????????};??
- ????}??
- }??
- var?person?=?new?Person("kevin",31,"SE");??
- person.sayName();??
- person.sayFriends();??
?
特別說明:js中一切都是對象
實例:
[javascript]?view plaincopy- function?Person(){}??
- window.alert(Person.constructor);?//function?Function(){?[native?code?]}??
- var?a=new?Person();??
- window.alert(a.constructor);//對象實例的構(gòu)造函數(shù)?function?Person(){}??
- window.alert(typeof?a);//a的類型是object??
- var?b=123;??
- window.alert(b.constructor);?//?function?Number()?{?[native?code?]?}??
?
如何判斷一個對象實例是不是某個類型
方法1:
[javascript]?view plaincopy- if(a?instanceof?Person){??
- ????window.alert("a是Person");??
- }??
方法2:
[javascript]?view plaincopy- if(a.constructor==Person){??
- ????window.alert("a是Person");??
- }??
補充說明:帶var和不帶var的區(qū)別
[javascript]?view plaincopy- var?abc=89;//全局變量??
- function?test(){??
- ????abc=900;?//?var?abc=900;則輸出89??
- }??
- test();??
- window.alert(abc);???//輸出900,??
PS:這是因為使用在函數(shù)中使用var之后就將那變量看做局部變量了,JS的作用域和Java以塊作用域(Block?Scope)不同,它是函數(shù)作用域(Function?Scope)。
?
對象的引用問題說明:
[javascript]?view plaincopy- function?Person(){}??
- var?a=new?Person();??
- a.age=10;??
- a.name="小明";??
- var?b=a;??
- b.name="小白";??
- window.alert(b.age+"名字"+b.name+"名字"+a.name);??
- //?輸出:10名字小白名字小白??
?
PS:對象是以引用的方式指向堆空間的,所以改變引用對象的值,其堆空間的值也被改變了,那么其他對象在引用,其值是修改后的。
?
JS對象回收機制
PS:JavaScript的對象回收機制是垃圾收集(Garbage?Collection)機制,在這點上和Java很像,都是當(dāng)對象的地址被引用的次數(shù)變成0的時候,GC就認(rèn)為這對象是垃圾,就會回收它。但是不一定是變成0之后立馬回收,GC會按照一個固定的模式進行回收操作。
除此之外,JS還提供了一種主動銷毀對象屬性的方法
基本語法:
?
[javascript]?view plaincopy- delete?對象名.屬性名;?//?delete不同作用于對象??
?
?
this關(guān)鍵字
PS:JavaScript中this關(guān)鍵字,用于指明當(dāng)前是哪個對象調(diào)用函數(shù)或者使用屬性,this也可用于區(qū)分原型對象(類)中的公開或者私有屬性,還可以在傳參的時候指定所傳入的對象。
?
案例:
[javascript]?view plaincopy- function?Person(){??
- ????var?name="abc";?//私有的,只能在內(nèi)部使用??
- ????var?age=900;?//私有的,只能在內(nèi)部使用??
- ????//this說明?show屬性是公開.?該屬性是指向一個函數(shù)地址屬性.???
- ????//則通過?show去調(diào)用該函數(shù).??
- ????this.show=function(){??
- ???????window.alert(name+"?"+age);??
- ????}??
- }??
- var?p1=new?Person();??
- //window.alert(p1.name+"?"+p1.age);//錯誤的,因為name,age是私有的??
- p1.show();??
?
案例:
[html]?view plaincopy- <html>??
- ????<head>??
- ????<script?type="text/javascript">??
- ????????function?test1(){??
- ????????????alert(this.v);???
- ????????}??
- ????????var?v=190;??
- ????????test1();?//?<==>?window.test1();???
- ????????window.test1();?//?輸出190??
- ????</script>??
- ????</head>??
- </html>??
?
?
this?只能在類定義的內(nèi)部使用
?
[javascript]?view plaincopy- //說明this?只能在?類定義的內(nèi)部使用??
- function?Dog(){??
- ????this.name="小明";??
- }??
- var?dog1=new?Dog();??
- window.alert(this.name);?//報空,?因為這樣使用,相當(dāng)于去訪問window對象的name屬性,但是你沒有寫.??
?
PS:在原型對象(類)內(nèi)部除了屬性之外,還能有函數(shù),函數(shù)的創(chuàng)建方式可以參考我的另一篇博客JavaScript入門,而函數(shù)的添加到原型對象(類)的方法,可以參考上面寫到的創(chuàng)建對象的7種方式。
?
案例1:
[html]?view plaincopy- <html>??
- ????<head>??
- ????????<script?language="javascript">??
- ????????????function?Person(){??
- ????????????????//?公共屬性??
- ????????????????this.name?=?"abc";????
- ????????????????this.age?=?20;??
- ????????????????//?私有屬性??
- ????????????????var?name2?=?"xyz";????
- ????????????????var?age2?=?30;??
- ????????????????//?公共方法??
- ????????????????this.show?=?function(){???
- ????????????????????window.alert(name2?+?"?"?+?age2);??
- ????????????????????show2();??
- ??
- ????????????????}??
- ????????????????//?私有方法??
- ????????????????function?show2(){??
- ????????????????????window.alert("show2:"?+?name2?+?"?"?+?age2);??
- ????????????????}??
- ????????????}??
- ????????????var?p1?=?new?Person();??
- ????????????var?p2?=?new?Person();??
- ????????????//window.alert(p1.name?+?"?"?+?p2.name);??
- ??????????????
- ????????????//p2.name?=?"cba";??
- ????????????//window.alert(p1.name?+?"?"?+?p2.name);??
- ????????????p1.show();??
- ????????????//?不能使用??
- ????????????//p1.show2();??
- ????????????//?JavaScript支持這種屬性名,屬性值的定義方式,這和CSS很像??
- ????????????var?dog?=?{name:?'小狗',?age:?5,?fun1?:?function(){?window.alert('hello?world');?},???
- ????????????????????????fun2?:?function(){?window.alert('hello?js');?}};??
- ????????????window.alert(dog.name?+?"?"?+?dog.age);??
- ????????????dog.fun1();??
- ????????????dog.fun2();??
- ????????????for(var?key?in?history){??
- ????????????????document.writeln(key?+?":"?+?history[key]?+?"<br/>");??
- ????????????}??
- ????????</script>??
- ????</head>??
- </html>?????
?
?
案例2:
[html]?view plaincopy- <html>??
- ????<head>??
- ????????<script?language="javascript">??
- ????????????function?Person(name,?age){??
- ????????????????//?傳入?yún)?shù),進行初始化??
- ????????????????this.name?=?name;??
- ????????????????this.age?=?age;??
- ??
- ????????????????this.show?=?function(){??
- ????????????????????document.write("名字是"?+?this.name);??
- ????????????????}??
- ?????????????????//?1?+?2?+?...?+?n??
- ????????????????this.plus?=?function(n){??
- ????????????????????var?res?=?0;??
- ????????????????????for(var?i?=?1;?i?<=?n;?i++){??
- ????????????????????????res?+=?i;??
- ????????????????????}??
- ????????????????????return?res;??
- ????????????????}??
- ????????????}??
- ????????????var?p1?=?new?Person("張三",?20);??`??
- ????????????p1.show();??
- ????????????document.write("<br/>"?+?p1.plus(10));??
- ??
- ????????</script>??
- ????</head>??
- </html>??
?
綜合案例:
JS7.css
[css]?view plaincopy- /*?游戲?*/??
- .gamediv?{??
- ????width:?500px;??
- ????height:?400px;??
- ????background-color:?silver;??
- ????border:?1px?solid?red;??
- ??
- }??
- ??
- /*?表格樣式?*/??
- .controlcenter{??
- ????width:?200px;??
- ????height:?100px;??
- ????border:?1px?solid?red;??
- }??
- ??
- /*?圖片樣式?*/??
- .mario{??
- ????width:?80;??
- ????position:?relative;??
- ??????
- }??
?
JS7.html
[html]?view plaincopy- <html>??
- ????<head>??
- ????????<!--引入CSS-->??
- ????????<link?href="JS7.css"?type="text/css"?rel="stylesheet">??
- ????????<script?languege="javascript"?type="text/javascript">??
- ????????????//?Mario類??
- ????????????function?Mario(){??
- ????????????????//?初始化坐標(biāo)??
- ????????????????this.x?=?0;??
- ????????????????this.y?=?0;??
- ??
- ????????????????//?移動方式?0上,1右,2下,3左??
- ????????????????this.move?=?function(direct){??
- ????????????????????switch(direct){??
- ????????????????????????case?0:??
- ????????????????????????????//?window.alert("向上移動");??
- ????????????????????????????//?獲取img元素??
- ????????????????????????????var?mymario?=?document.getElementById("mymario");??
- ????????????????????????????//?通過這樣的獲取方式,top和left必須直接在HTML里面定義??
- ????????????????????????????var?top?=?mymario.style.top;??
- ????????????????????????????top?=?parseInt(top.substr(0,?top.length?-?2));??
- ????????????????????????????//?邊界情況??
- ????????????????????????????if((top?-?10)?<=?0){??
- ????????????????????????????????mymario.style.top?=?0?+?"px";??
- ????????????????????????????}?else?{??
- ????????????????????????????????mymario.style.top?=?(top?-?10)?+?"px";??
- ????????????????????????????}??
- ????????????????????????????break;??
- ????????????????????????case?1:??
- ????????????????????????????//?window.alert("向右移動");??
- ????????????????????????????//?獲取img元素??
- ????????????????????????????var?mymario?=?document.getElementById("mymario");??
- ????????????????????????????var?left?=?mymario.style.left;??
- ????????????????????????????left?=?parseInt(left.substr(0,?left.length?-?2));??
- ????????????????????????????//?邊界情況??
- ????????????????????????????if((left?+?10)?>=?420){??
- ????????????????????????????????mymario.style.left?=?420?+?"px";??
- ????????????????????????????}?else?{??
- ????????????????????????????????mymario.style.left?=?(left?+?10)?+?"px";??
- ????????????????????????????}??
- ????????????????????????????break;??
- ????????????????????????case?2:??
- ????????????????????????????//?window.alert("向下移動");??
- ????????????????????????????//?獲取img元素??
- ????????????????????????????var?mymario?=?document.getElementById("mymario");??
- ????????????????????????????var?top?=?mymario.style.top;??
- ????????????????????????????top?=?parseInt(top.substr(0,?top.length?-?2));??
- ????????????????????????????//?邊界情況??
- ????????????????????????????if((top?+?10)?>=?340){??
- ????????????????????????????????mymario.style.top?=?340?+?"px";??
- ????????????????????????????}?else?{??
- ????????????????????????????????mymario.style.top?=?(top?+?10)?+?"px";??
- ????????????????????????????}??
- ????????????????????????????break;??
- ????????????????????????case?3:??
- ????????????????????????????//?window.alert("向左移動");??
- ????????????????????????????//?獲取img元素??
- ????????????????????????????var?mymario?=?document.getElementById("mymario");??
- ????????????????????????????var?left?=?mymario.style.left;??
- ????????????????????????????left?=?parseInt(left.substr(0,?left.length?-?2));??
- ????????????????????????????//?邊界情況??
- ????????????????????????????if((left?-?10)?<=?0){??
- ????????????????????????????????mymario.style.left?=?0?+?"px";??
- ????????????????????????????}?else?{??
- ????????????????????????????????mymario.style.left?=?(left?-?10)?+?"px";??
- ????????????????????????????}??
- ????????????????????????????break;??
- ????????????????????}??
- ????????????????}??
- ????????????}??
- ??????????????
- ????????????//?創(chuàng)建Mario對象??
- ????????????var?mario?=?new?Mario();??
- ??
- ????????????//?全局函數(shù)??
- ????????????function?marioMove(direct){??
- ????????????????switch(direct){??
- ????????????????????????case?0:??
- ????????????????????????????mario.move(0);??
- ????????????????????????????break;??
- ????????????????????????case?1:??
- ????????????????????????????mario.move(1);??
- ????????????????????????????break;??
- ????????????????????????case?2:??
- ????????????????????????????mario.move(2);??
- ????????????????????????????break;??
- ????????????????????????case?3:??
- ????????????????????????????mario.move(3);??
- ????????????????????????????break;??
- ????????????????????}??
- ????????????}??
- ??
- ????????</script>??
- ????</head>??
- ????<body>??
- ????????<div?class="gamediv">??
- ????????????<img?class="mario"?id="mymario"?src="cat1.jpg"?style="left:?0px;?top:?0px;?"/>??
- ????????</div>??
- ??????????
- ????????<!--?控制中心-->??
- ????????<table?border="1px"?class="controlcenter">??
- ????????????<tr>??
- ????????????????<td?colspan="3">游戲鍵盤</td>??
- ????????????</tr>??
- ????????????<tr>??
- ????????????????<td>**</td>??
- ????????????????<td><input?type="button"?value="↑↑"?οnclick="mario.move(0)"></td>??
- ????????????????<td>**</td>??
- ????????????</tr>??
- ????????????<tr>??
- ????????????????<td><input?type="button"?value="←←"?οnclick="mario.move(3)"></td>??
- ????????????????<td>**</td>??
- ????????????????<td><input?type="button"?value="→→"?οnclick="mario.move(1)"></td>??
- ????????????</tr>??
- ????????????<tr>??
- ????????????????<td>**</td>??
- ????????????????<td><input?type="button"?value="↓↓"?οnclick="mario.move(2)"></td>??
- ????????????????<td>**</td>??
- ????????????</tr>??
- ????????</table>??
- ????</body>??
- </html>??
?
?
JS閉包
?
PS:在說明閉包之前,要先弄清楚js的變量作用域,JS的變量作用域是函數(shù)作用域(Function?Scope),這也就是說在如果是在嵌套層內(nèi)定義的變量會覆蓋嵌套層之外的變量。可以這樣理解,每當(dāng)進入一個函數(shù)的時候,它會想檢查這個函數(shù)中的各個變量的聲明,如果有和函數(shù)外相同的,那么就被覆蓋掉了,這個將聲明提前到函數(shù)頭而定義位置不變的語法是JS的一個特色。
除了了解函數(shù)作用域之外,還要知道一點作用域鏈的知識,在JS實現(xiàn)時,它將函數(shù)的變量通過鏈表的形式進行組織的,當(dāng)執(zhí)行到嵌套層內(nèi)部時,嵌套層內(nèi)部的定義將在鏈表最前面,之后是上一層,如果還有上一層的話,又會被掛在之后,這也就是為什么嵌套層數(shù)越多,全局變量訪問越慢的原因了,當(dāng)然,我們可以通過在嵌套層中獲取全局變量的副本,再使用,這樣優(yōu)化,在大型程序中,還是能節(jié)省很多時間的。
?
代碼:
[html]?view plaincopy- <html>??
- <head>??
- <meta?http-equiv="content-type"?content="text/html;charset=utf-8"/>??
- <script?type="text/javascript">??
- ????a=20;??
- ????function?test1(){??
- ????????var?a=700;??
- ????????function?test2(){??
- ????????????//如果沒?var?,則會到父函數(shù)去,找a,找到就使用父函數(shù)的a,否則創(chuàng)建??
- ????????????//?這里有個需要注意的地方是,當(dāng)a前面沒有任何符號時,JS會默認(rèn)它是公開的,也就是說會自動在前面加一個this.??
- ????????????a=890;??
- ????????}??
- ????????return?test2;??
- ????}??
- ????var?var1=test1();??
- ????var1();??
- ????document.write(a);??
- </script>??
- </head>??
- </html>??
?
[javascript]?view plaincopy- function?test1(){??
- ????var?n=90;??
- ????//test1函數(shù)的內(nèi)部函數(shù),可以訪問?var?n??
- ????funciton?test2(){??
- ????????window.alert(n++);??
- ????}??
- ????//把內(nèi)部函數(shù)test2返回外部調(diào)用者??
- ????return?test2;??
- }??
- var?res=test1();//調(diào)用test1?,返回?test2函數(shù)??
- res();?//這時res就是test1內(nèi)部函數(shù)?test2,?輸出90??
?
閉包的主要用處
?
1、把局部變量保存在內(nèi)存中,不讓垃圾回收(GC)機制將其回收.
2、讓外部去訪問內(nèi)部函數(shù)的局部變量.
?
PS:當(dāng)你return的是內(nèi)部function時,就是一個閉包。內(nèi)部function會close-over外部function的變量直到內(nèi)部function結(jié)束。
推薦閱讀:
http://kb.cnblogs.com/page/110782/?
http://www.cnblogs.com/xiaotie/archive/2011/08/03/2126145.html
?
?
?
----------參考《韓順平.輕松搞定網(wǎng)頁設(shè)計(html+css+js)》
轉(zhuǎn)載于:https://www.cnblogs.com/chentanyueying/p/7466258.html
總結(jié)
以上是生活随笔為你收集整理的Java基于对象基础 基于对象和面向对象的区别(转)的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 洛可可公主妆能换什么呢
- 下一篇: 求一个为梦想努力的个性签名。