javascript
4.JavaScript对象和初始面向对象
?
?
JavaScript中的基本數(shù)據(jù)類型
-
-
- number(數(shù)值類型)
- string(字符串類型)
- boolean(布爾類型)
- null(空類型)
- undefined(未定義類型)
- object
-
?
- 屬性
- 方法
- 面向?qū)ο髢H僅是一個(gè)概念或者編程思想
- 通過一種叫做原型的方式來實(shí)現(xiàn)面向?qū)ο缶幊?/li>
?
基于Object對象的方式創(chuàng)建對象
語法:
var 對象名稱=new Object( );
示例:----------通過 ?. 添加屬性和方法
var flower=new Object();flower.name="長春花";flower.genera="夾竹桃科 長春花屬";flower.area="非洲、亞熱帶、熱帶以及中國大陸的華東、西南、中南等地";flower.uses="觀賞或用藥等";flower.showName=function(){ ???alert(this.name); ???}flower.showName();?
使用字面量賦值方式創(chuàng)建對象
示例:
var flower={name:"長春花",genera:"夾竹桃科 長春花屬",area:"非洲、亞熱帶、熱帶以及中國大陸的華東、西南、中南等地",uses:"觀賞或用藥等",showName:function(){ alert(this.name); }}flower.showName();?
常見的內(nèi)置對象:
String(字符串)對象
Date(日期)對象
Array(數(shù)組)對象
Boolean(邏輯)對象
Math(算數(shù))對象
RegExp對象
練習(xí):
實(shí)現(xiàn)思路
使用new創(chuàng)建對象person
????var person=new Object();
使用“.”添加屬性
???person.name="朗曉明";
????person.age="38";
使用+把各屬性的值拼接起來,使用innerHTML為頁面元素賦值
???var str="姓名:"+this.name+"<br/>年齡:"+this.age+"……;
簡寫:var str=this.name+this.age+……;
???document.getElementById("intro").innerHTML=str;
?
如何解決使用同一個(gè)接口不需要創(chuàng)建很多對象,減少產(chǎn)生大量的重復(fù)代碼?
構(gòu)造函數(shù)
原型對象
?
示例:
function Flower(name,genera,area,uses){this.name=name;…….this.showName=function(){alert(this.name);}}????var flower1=new Flower("長春花","夾竹桃科 長春花屬","非洲、亞熱帶、熱帶以及中國大陸的華東、西南、中南等地","觀賞或用藥等")
???flower1.showName();
?
示例:
var flower2=new Flower("牡丹","芍藥科 芍藥屬","中國","觀賞、食用或藥用");
flower2.showName();
var flower3=new Flower("曼陀羅花","茄科 曼陀羅屬","印度、中國北部","觀賞或藥用");
flower3.showName();
調(diào)用構(gòu)函數(shù)的4個(gè)步驟:
創(chuàng)建一個(gè)新對象
將構(gòu)造函數(shù)的作用域賦給新對象(this就指向了這個(gè)新對象)
執(zhí)行構(gòu)造函數(shù)中的代碼
返回新對象
?
constructor屬性指向Flower
示例:
alert (flower1.constructor==Flower);alert (flower2.constructor==Flower);alert (flower3.constructor==Flower);使用instanceof操作符檢測對象類型
alert(flower1 instanceof Object);alert(flower1 instanceof Flower);alert(flower2 instanceof Object);alert(flower2 instanceof Flower);alert(flower3 instanceof Object);alert(flower3 instanceof Flower);?
示例:
function Flower(){}Flower.prototype.name="曼陀羅花";Flower.prototype.genera="茄科 曼陀羅屬";Flower.prototype.area="印度、中國北部";Flower.prototype.uses="觀賞或藥用";Flower.prototype.showName=function() {alert(this.name);}var flower1=new Flower();flower1.showName();var flower2=new Flower();flower2.showName();alert(flower1.showName==flower2.showName);?
示例:
function Flower(){}Flower.prototype.name="曼陀羅花";Flower.prototype.genera="茄科 曼陀羅屬";Flower.prototype.area="印度、中國北部";Flower.prototype.uses="觀賞或藥用";Flower.prototype.showName=function() {alert(this.name);}var flower1=new Flower();var flower2=new Flower();flower1.name="長春花";alert(flower1.name);alert(flower2.name);?
?
示例:
function Humans(){this.foot=2;}Humans.prototype.getFoot=function(){return this.foot;}function Man(){this.head=1;}Man.prototype=new Humans(); ?????????//繼承了HumansMan.prototype.getHead=function(){return this.head;}var man1=new Man();alert(man1.getFoot()); ?????????????????????????//2alert(man1 instanceof Object); ?????????//true ????alert(man1 instanceof Humans); ???????//truealert(man1 instanceof Man); ?????????//true?
構(gòu)造函數(shù)和原型之間的關(guān)系
?
調(diào)用man1.getFoot( ) 經(jīng)歷的三個(gè)步驟:
搜索實(shí)例
搜索Man.prototype
搜索Humans.prototype
?
Object在原型鏈中的位置
示例:
?function Humans(){this.clothing=["trousers","dress","jacket"];}function Man(){ ????}//繼承了HumansMan.prototype=new Humans();var man1=new Man();man1.clothing.push("coat");alert(man1.clothing);var man2=new Man();alert(man2.clothing);?
語法:
apply([thisOjb[,argArray]])
應(yīng)用某一對象的一個(gè)方法,用另一個(gè)對象替換當(dāng)前對象
語法:
call([thisObj[,arg1[,arg2[, ?[,argN]]]]])
調(diào)用一個(gè)對象的一個(gè)方法,以另一個(gè)對象替換當(dāng)前對象
?
示例:??
function Humans(name){this.name=name;}function Man(){Humans.call(this,"mary"); ??//繼承了Humans,同時(shí)還傳遞了參數(shù)this.age=38; ?????????????//實(shí)例屬性}var man1=new Man();alert(man1.name); ??????//輸出maryalert(man1.age); ???????//輸出38?
組合繼承:有時(shí)也叫做偽經(jīng)典繼承
-
-
- 將原型鏈和借用構(gòu)造函數(shù)的技術(shù)組合到一塊,發(fā)揮二者之長的一種繼承模式
- 使用原型鏈實(shí)現(xiàn)對原型屬性和方法的繼承,而通過借用構(gòu)造函數(shù)來實(shí)現(xiàn)對實(shí)例屬性的繼承
-
?
?
總結(jié)
以上是生活随笔為你收集整理的4.JavaScript对象和初始面向对象的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: Torch和torchvision的安装
- 下一篇: JS的数据类型分类以及用法,没有这些基础