JS原型對象操作實例分析
本文實例講述了JS原型對象操作。分享給大家供大家參考,具體如下:
萬物皆對象,函數(shù)也同樣是對象,是特殊的函數(shù)對象
function fn() {} let a = new fn(); let b = new Function() console.log(typeof a); // object console.log(typeof b); // function
打開瀏覽器,輸入fn,會發(fā)現(xiàn)fn有一個prototype(原型)屬性,這個屬性是一個指針,指向原型對象,這個對象包括了特定類型所有共享的屬性和方法。
換句話說,prototype對象包含了函數(shù)所有的共享屬性和方法。
function fn() {} fn.prototype.a = 18; fn.prototype.b = "b"; fn.prototype.test = function() { console.log(123); } var r = new fn(); console.log(r.a); // 18
我們直接在函數(shù)fn的原型屬性上加了兩個屬性和一個方法,實例化后便可以訪問原型中的值。
- 原型對象有一個constructor屬性,它也是一個指針,它指向原來的函數(shù),也就是說,fn.prototype.constructor == fn。
- 所有的實例都有這個原型對象,因此實例可以訪問到原型對象中的屬性和方法。
那么實例怎么搜索變量或者方法的值呢?首先,函數(shù)實例會在函數(shù)本身上去尋找該變量,如果沒有找到,會在原型對象上尋找變量。
function fn() {} fn.prototype.a = 18; fn.prototype.b = "b"; fn.prototype.test = function() { console.log(123); } var a = new fn(); var b = new fn(); b.a = 20 console.log(b.a); // 20 console.log(a.a); // 18
創(chuàng)建了兩個實例,在b實例上手動添加了一個a屬性,在fn的原型對象上也有一個a屬性,那么對于b實例會優(yōu)先訪問本身的屬性而不是原型上的屬性。
參考內(nèi)容:JavaScript高級程序設計
感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運行工具:http://tools.jb51.net/code/HtmlJsRun測試上述代碼運行效果。
更多關于JavaScript相關內(nèi)容感興趣的讀者可查看本站專題:《javascript面向?qū)ο笕腴T教程》、《JavaScript錯誤與調(diào)試技巧總結》、《JavaScript數(shù)據(jù)結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript數(shù)學運算用法總結》
希望本文所述對大家JavaScript程序設計有所幫助。
相關文章
深入淺析JavaScript中數(shù)據(jù)共享和數(shù)據(jù)傳遞
這篇文章主要介紹了深入淺析JavaScript中數(shù)據(jù)共享和數(shù)據(jù)傳遞的相關資料,需要的朋友可以參考下2016-04-04使用weixin-java-tools完成微信授權登錄、微信支付的示例
這篇文章主要介紹了使用weixin-java-tools完成微信授權登錄、微信支付的示例,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-09-09微信小程序?qū)崿F(xiàn)的數(shù)字滑塊拼圖效果
滑塊拼圖(Slider?Puzzle)是一種經(jīng)典的智力游戲,通常由一個3x3或更大的格子組成,其中一個格子為空,玩家通過滑動拼圖塊來達到特定的圖案或順序,這篇文章主要介紹了微信小程序?qū)崿F(xiàn)的數(shù)字滑塊拼圖,需要的朋友可以參考下2024-08-08基于JavaScript實現(xiàn)除夕煙花秀與隨機祝福語
新年即將來臨,本文將為大家介紹一個基于JavaScript實現(xiàn)的頁面特效:煙花秀+春節(jié)隨機祝福語。文中的示例代碼講解詳細,感興趣的可以了解一下2022-01-01javascript createElement()創(chuàng)建input不能設置name屬性的解決方法
今天在使用document.createElement()動態(tài)創(chuàng)建input時,發(fā)現(xiàn)不能為其name賦值,以下是測試代碼。2009-10-10