日韩性视频-久久久蜜桃-www中文字幕-在线中文字幕av-亚洲欧美一区二区三区四区-撸久久-香蕉视频一区-久久无码精品丰满人妻-国产高潮av-激情福利社-日韩av网址大全-国产精品久久999-日本五十路在线-性欧美在线-久久99精品波多结衣一区-男女午夜免费视频-黑人极品ⅴideos精品欧美棵-人人妻人人澡人人爽精品欧美一区-日韩一区在线看-欧美a级在线免费观看

歡迎訪問 生活随笔!

生活随笔

當(dāng)前位置: 首頁 > 前端技术 > javascript >内容正文

javascript

4.JavaScript对象和初始面向对象

發(fā)布時(shí)間:2024/1/8 javascript 33 豆豆
生活随笔 收集整理的這篇文章主要介紹了 4.JavaScript对象和初始面向对象 小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
  • 本章任務(wù)
  • 創(chuàng)建person對象
  • 創(chuàng)建Person構(gòu)造函數(shù)
  • 創(chuàng)建Person對象并畫原型鏈圖
  • 創(chuàng)建繼承Person的Student子類
  • ?

  • 本章目標(biāo)
  • 了解什么是對象和面向?qū)ο?/li>
  • 會創(chuàng)建對象
  • 理解什么是構(gòu)造函數(shù)和對象原型
  • 理解什么是原型鏈并且使用對象繼承,會畫原型鏈圖
  • ?

  • 回顧JavaScript數(shù)據(jù)類型
  • JavaScript中的基本數(shù)據(jù)類型

        • number(數(shù)值類型)
        • string(字符串類型)
        • boolean(布爾類型)
        • null(空類型)
        • undefined(未定義類型)
        • object

    ?

  • 對象是什么?
  • 對象是包含相關(guān)屬性和方法的集合體
    • 屬性
    • 方法
  • 什么是面向?qū)ο?/strong>
    • 面向?qū)ο髢H僅是一個(gè)概念或者編程思想
    • 通過一種叫做原型的方式來實(shí)現(xiàn)面向?qū)ο缶幊?/li>
  • 創(chuàng)建對象
  • 自定義對象
  • 內(nèi)置對象
  • ?

  • 自定義對象2-1
  • 基于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();

    ?

  • 自定義對象2-2
  • 使用字面量賦值方式創(chuàng)建對象

    示例:

    var flower={name:"長春花",genera:"夾竹桃科 長春花屬",area:"非洲、亞熱帶、熱帶以及中國大陸的華東、西南、中南等地",uses:"觀賞或用藥等",showName:function(){ alert(this.name); }}flower.showName();

    ?

  • 內(nèi)置對象2-1
  • 常見的內(nèi)置對象:

    String(字符串)對象

    Date(日期)對象

    Array(數(shù)組)對象

    Boolean(邏輯)對象

    Math(算數(shù))對象

    RegExp對象

  • 學(xué)員操作—創(chuàng)建person對象2-2
  • 練習(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òu)造函數(shù)和原型對象
  • 如何解決使用同一個(gè)接口不需要創(chuàng)建很多對象,減少產(chǎn)生大量的重復(fù)代碼?

    構(gòu)造函數(shù)

    原型對象

    ?

  • 構(gòu)造函數(shù)
  • 創(chuàng)建構(gòu)造函數(shù)
  • 示例:

    function Flower(name,genera,area,uses){this.name=name;…….this.showName=function(){alert(this.name);}}

    ????var flower1=new Flower("長春花","夾竹桃科 長春花屬","非洲、亞熱帶、熱帶以及中國大陸的華東、西南、中南等地","觀賞或用藥等")

    ???flower1.showName();

    ?

  • 使用構(gòu)造函數(shù)創(chuàng)建對象
  • 示例:

    var flower2=new Flower("牡丹","芍藥科 芍藥屬","中國","觀賞、食用或藥用");

    flower2.showName();

    var flower3=new Flower("曼陀羅花","茄科 曼陀羅屬","印度、中國北部","觀賞或藥用");

    flower3.showName();

  • 使用構(gòu)造函數(shù)創(chuàng)建新實(shí)例
  • 調(diào)用構(gòu)函數(shù)的4個(gè)步驟:

    創(chuàng)建一個(gè)新對象

    將構(gòu)造函數(shù)的作用域賦給新對象(this就指向了這個(gè)新對象)

    執(zhí)行構(gòu)造函數(shù)中的代碼

    返回新對象

    ?

  • constructor屬性
  • constructor屬性指向Flower

    示例:

    alert (flower1.constructor==Flower);alert (flower2.constructor==Flower);alert (flower3.constructor==Flower);

  • instanceof操作符
  • 使用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);

    ?

  • 原型對象2-1
  • 示例:

    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);

    ?

  • 原型對象2-2
  • 示例:

    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);

    ?

  • 繼承
  • 原型鏈
  • 對象繼承
  • ?

  • 原型鏈4-1
  • 一個(gè)原型對象是另一個(gè)原型對象的實(shí)例
  • 相關(guān)的原型對象層層遞進(jìn),就構(gòu)成了實(shí)例與原型的鏈條,就是原型鏈
  • 原型鏈4-2
  • 示例:

    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

    ?

  • 原型鏈4-3
  • 構(gòu)造函數(shù)和原型之間的關(guān)系

    ?

  • 原型鏈4-4
  • 調(diào)用man1.getFoot( ) 經(jīng)歷的三個(gè)步驟:

    搜索實(shí)例

    搜索Man.prototype

    搜索Humans.prototype

    ?

  • 完整的原型鏈
  • Object在原型鏈中的位置

  • 對象繼承
  • man1.clothing和man2.clothing輸入的信息一樣,為什么?
  • 創(chuàng)建子類型的實(shí)例時(shí),不能向父類型的構(gòu)造函數(shù)中傳遞參數(shù)
  • 示例:

    ?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);

    ?

  • 借用構(gòu)造函數(shù)2-1
  • 語法:

    apply([thisOjb[,argArray]])

    應(yīng)用某一對象的一個(gè)方法,用另一個(gè)對象替換當(dāng)前對象

    語法:

    call([thisObj[,arg1[,arg2[, ?[,argN]]]]])

    調(diào)用一個(gè)對象的一個(gè)方法,以另一個(gè)對象替換當(dāng)前對象

    ?

  • 借用構(gòu)造函數(shù)2-2
  • 示例:??

    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é)
  • ?

    總結(jié)

    以上是生活随笔為你收集整理的4.JavaScript对象和初始面向对象的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。

    如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò),歡迎將生活随笔推薦給好友。