<option id="mwy0y"><strong id="mwy0y"></strong></option>
  • <ul id="mwy0y"><sup id="mwy0y"></sup></ul>
  • <ul id="mwy0y"></ul>
  • <del id="mwy0y"><dfn id="mwy0y"></dfn></del><ul id="mwy0y"><sup id="mwy0y"></sup></ul>
  • <abbr id="mwy0y"></abbr>

    千鋒教育-做有情懷、有良心、有品質的職業教育機構

    400-811-9990
    手機站
    千鋒教育

    千鋒學習站 | 隨時隨地免費學

    千鋒教育

    掃一掃進入千鋒手機站

    領取全套視頻
    千鋒教育

    關注千鋒學習站小程序
    隨時隨地免費學習課程

    上海
    • 北京
    • 鄭州
    • 武漢
    • 成都
    • 西安
    • 沈陽
    • 廣州
    • 南京
    • 深圳
    • 大連
    • 青島
    • 杭州
    • 重慶
    當前位置:長沙千鋒IT培訓  >  技術要點  >  長沙Web前端培訓JavaScript教程:原型及原型鏈

    長沙Web前端培訓JavaScript教程:原型及原型鏈

    來源:千鋒教育
    發布人:千鋒長沙
    時間: 2021-05-19 18:35:32

           原型的出現,就是為了解決 構造函數的缺點也就是給我們提供了一個給對象添加函數的方法不然構造函數只能給對象添加屬性,不能合理的添加函數就太LOW了。

    u=4096294128,3228703933&fm=26&gp=0

    prototype
    每一個函數天生自帶一個成員,叫做 prototype,是一個對象空間即然每一個函數都有,構造函數也是函數,構造函數也有這個對象空間這個 prototype 對象空間可以由函數名來訪問
    function Person() {}
    console.log(Person.prototype) // 是一個對象
    即然是個對象,那么我們就可以向里面放入一些東西
    function Person() {}
    Person.prototype.name = 'prototype'
    Person.prototype.sayHi = function () {}
    我們發現了一個叫做 prototype 的空間是和函數有關聯的并且可以向里面存儲一些東西重點: 在函數的 prototype 里面存儲的內容,不是給函數使用的,是給函數的每一個實例化對象使用的那實例化對象怎么使用能?
    proto
    每一個對象都天生自帶一個成員,叫做 proto,是一個對象空間即然每一個對象都有,實例化對象也是對象,那么每一個實例化對象也有這個成員這個 proto 對象空間是給每一個對象使用的當你訪問一個對象中的成員的時候
    如果這個對象自己本身有這個成員,那么就會直接給你結果如果沒有,就會去 proto 這個對象空間里面找,里面有的話就給你結果未完待續。。。
    那么這個 proto 又指向哪里呢?
    這個對象是由哪個構造函數 new 出來的那么這個對象的 proto 就指向這個構造函數的 prototype
    function Person() {}
    var p1 = new Person()
    console.log(p1.proto === Person.prototype) // true
    我們發現實例化對象的 proto 和所屬的構造函數的 prototype 是一個對象空間我們可以通過構造函數名稱來向 prototype 中添加成員對象在訪問的時候自己沒有,可以自動去自己的 proto 中查找那么,我們之前構造函數的缺點就可以解決了
    我們可以把函數放在構造函數的 prototype 中實例化對象訪問的時候,自己沒有,就會自動去 proto 中找那么也可以使用了
    function Person() {}
    Person.prototype.sayHi = function () {
    console.log('hello Person')
    }
    var p1 = new Person()
    p1.sayHi()
    p1 自己沒有 sayHi 方法,就會去自己的 proto 中查找p1.proto 就是 Person.prototype我們又向 Person.prototype 中添加了 sayHi 方法所以 p1.sayHi 就可以執行了
    到這里,當我們實例化多個對象的時候,每個對象里面都沒有方法
    都是去所屬的構造函數的 protottype 中查找那么每一個對象使用的函數,其實都是同一個函數那么就解決了我們構造函數的缺點
    function Person() {}
    Person.prototype.sayHi = function () {
    console.log('hello')
    }
    var p1 = new Person()
    var p2 = new Person()
    console.log(p1.sayHi === p2.sayHi)
    p1 是 Person 的一個實例p2 是 Person 的一個實例也就是說 p1.proto 和 p2.proto 指向的都是 Person.prototype當 p1 去調用 sayHi 方法的時候是去 Person.prototype 中找當 p2 去調用 sayHi 方法的時候是去 Person.prototype 中找那么兩個實例化對象就是找到的一個方法,也是執行的一個方法
    結論
    當我們寫構造函數的時候屬性我們直接寫在構造函數體內方法我們寫在原型上
    插個小消息,也方便想學習入行成為程序員的同學,在文章下方留言即可試聽課程外加領取千鋒HTML5、UI交互設計、PHP、Java+云數據、大數據開發、VR/AR/Unity游戲開發、Python人工智能、Linux云計算、全棧軟件測試、網絡安全等全部的視頻學習教程。
    原型鏈
    我們剛才聊過構造函數了,也聊了原型那么問題出現了,我們說構造函數的 prototype 是一個對象又說了每一個對象都天生自帶一個 proto 屬性那么 構造函數的 prototype 里面的 proto 屬性又指向哪里呢?
    一個對象所屬的構造函數
    每一個對象都有一個自己所屬的構造函數比如: 數組
    // 數組本身也是一個對象
    var arr = []
    var arr2 = new Array()
    以上兩種方式都是創造一個數組我們就說數組所屬的構造函數就是 Array
    比如: 函數
    // 函數本身也是一個對象
    var fn = function () {}
    var fun = new Function()
    以上兩種方式都是創造一個函數我們就說函數所屬的構造函數就是 Function
    constructor
    對象的 proto 里面也有一個成員叫做 constructor這個屬性就是指向當前這個對象所屬的構造函數
    鏈狀結構
    當一個對象我們不知道準確的是誰構造的時候,我們呢就把它看成 Object 的實例化對象也就是說,我們的 構造函數 的 prototype 的 proto 指向的是 Object.prototype那么 Object.prototype 也是個對象,那么它的 proto 又指向誰呢?因為 Object 的 js 中的頂級構造函數,我們有一句話叫 萬物皆對象所以 Object.prototype 就到頂了,Object.prototype 的 proto 就是 null
    原型鏈的訪問原則
    我們之前說過,訪問一個對象的成員的時候,自己沒有就會去 proto 中找接下來就是,如果 proto 里面沒有就再去 proto 里面找一直找到 Object.prototype 里面都沒有,那么就會返回 undefiend
    對象的賦值

           到這里,我們就會覺得,如果是賦值的話,那么也會按照原型鏈的規則來但是: 并不是!并不是!并不是! 重要的事情說三遍賦值的時候,就是直接給對象自己本身賦值如果原先有就是修改原先沒有就是添加不會和 proto 有關系。

           到了這里,我們就發現了面向對象的思想模式了當我想完成一個功能的時候先看看內置構造函數有沒有能給我提供一個完成功能對象的能力如果沒有,我們就自己寫一個構造函數,能創造出一個完成功能的對象然后在用我們寫的構造函數 new 一個對象出來,幫助我們完成功能就行了比如: tab選項卡。

           我們要一個對象對象包含一個屬性:是每一個點擊的按鈕對象包含一個屬性:是每一個切換的盒子對象包含一個方法:是點擊按鈕能切換盒子的能力那么我們就需要自己寫一個構造函數,要求 new 出來的對象有這些內容就好了然后在用構造函數 new 一個對象就行了。

    聲明:本站稿件版權均屬千鋒教育所有,未經許可不得擅自轉載。

    猜你喜歡LIKE

    最新文章NEW

    相關推薦HOT

    更多>>

    快速通道 更多>>

    最新開班信息 更多>>

    網友熱搜 更多>>