JS中類(lèi)的靜態(tài)方法,靜態(tài)變量,實(shí)例方法,實(shí)例變量區(qū)別與用法實(shí)例分析
本文實(shí)例講述了JS中類(lèi)的靜態(tài)方法,靜態(tài)變量,實(shí)例方法,實(shí)例變量區(qū)別與用法。分享給大家供大家參考,具體如下:
1.類(lèi)的靜態(tài)方法
先來(lái)段代碼之后分析
// JS類(lèi)靜態(tài)函數(shù) function BaseClass() { } // 類(lèi)添加add函數(shù) BaseClass.add = function() { console.log("BaseClass add()方法被調(diào)用"); }; // 類(lèi)方法(類(lèi)的靜態(tài)函數(shù))直接調(diào)用 // 類(lèi)名.類(lèi)方法名 BaseClass.add(); //BaseClass add()方法被調(diào)用 var instance = new BaseClass(); // 實(shí)例不能調(diào)用類(lèi)方法(即類(lèi)的靜態(tài)方法) //instance.add();
a.類(lèi)的靜態(tài)方法通過(guò)[類(lèi)名.類(lèi)方法名稱(chēng)]賦值;
b.調(diào)用時(shí)用[類(lèi)名.類(lèi)方法名稱(chēng)()]直接調(diào)用;
C.類(lèi)的實(shí)例無(wú)法調(diào)用類(lèi)的靜態(tài)函數(shù)。
原因:因在js中function也是對(duì)象,即給函數(shù)對(duì)象添加了一個(gè)函數(shù)
2.類(lèi)的靜態(tài)成員
先來(lái)段代碼之后分析
// JS類(lèi)的靜態(tài)成員變量 function BaseClass(params) { } // 類(lèi)添加靜態(tài)變量nameTest BaseClass.nameTest = "jadeshu"; // 類(lèi)的靜態(tài)變量直接調(diào)用 // 類(lèi)名.類(lèi)變量名 console.log(BaseClass.nameTest); // jadeshu var instance = new BaseClass(); // 實(shí)例不能調(diào)用類(lèi)的靜態(tài)成員變量) console.log(instance.nameTest); // undefined
a.類(lèi)的靜態(tài)變量通過(guò)[類(lèi)名.類(lèi)變量名稱(chēng)]賦值;
b.調(diào)用時(shí)用[類(lèi)名.類(lèi)變量名稱(chēng)]直接調(diào)用;
C.類(lèi)的實(shí)例調(diào)用類(lèi)的靜態(tài)變量為undefined。
-----原因:因在js中function也是對(duì)象,即給函數(shù)對(duì)象添加了一個(gè)屬性
3.實(shí)例方法(兩種情況)
I.單個(gè)實(shí)例的方法
// JS的單個(gè)實(shí)例方法 function BaseClass() { } var instance1 = new BaseClass(); // 單個(gè)實(shí)例添加成員方法 instance1.add = function (params) { console.log("BaseClass類(lèi)實(shí)例的add方法被調(diào)用" + params); }; instance1.add(11222); // BaseClass類(lèi)實(shí)例的add方法被調(diào)用11222 var instance2 = new BaseClass(); //instance2.add(); // Error: instance2.add is not a function
II.所有實(shí)例創(chuàng)建時(shí)都創(chuàng)建了同名的方法
// JS所有實(shí)例的共享方法 function BaseClass() { // 所有實(shí)例創(chuàng)建時(shí)都創(chuàng)建了同名的方法 this.add = function (params) { console.log("BaseClass類(lèi)實(shí)例的add方法被調(diào)用" + params); }; } var instance1 = new BaseClass(); instance1.add(11); // BaseClass類(lèi)實(shí)例的add方法被調(diào)用11 var instance2 = new BaseClass(); //實(shí)例1和實(shí)例2各有一個(gè)add函數(shù)的本地方法 instance2.add(22); // BaseClass類(lèi)實(shí)例的add方法被調(diào)用22 console.log(instance1.add === instance2.add); // false
方法也是每個(gè)實(shí)例各存在一個(gè),占用內(nèi)存,這既沒(méi)有必要,又浪費(fèi)系統(tǒng)資源,所以不建議這樣添加實(shí)例的本地方法,或者在外部定義函數(shù),然后直接賦給一個(gè)變量即可,就可以做到所有創(chuàng)建的實(shí)例都引用一份代碼,但這樣做代碼不優(yōu)雅。
// JS所有實(shí)例的共享方法 function add(params){ console.log("BaseClass類(lèi)實(shí)例的add方法被調(diào)用" + params); } function BaseClass() { // 所有實(shí)例創(chuàng)建時(shí)都創(chuàng)建了同名的方法 this.add = add; } var instance1 = new BaseClass(); instance1.add(11); // BaseClass類(lèi)實(shí)例的add方法被調(diào)用11 var instance2 = new BaseClass(); //實(shí)例1和實(shí)例2則共用add函數(shù)的代碼 instance2.add(22); // BaseClass類(lèi)實(shí)例的add方法被調(diào)用22 console.log(instance1.add === instance2.add); // true
單個(gè)實(shí)例添加方法建議直接如第一種方法,如果是共享方法就加入prototype屬性上[即js中采用原型]。
4.實(shí)例變量(兩種情況)---即是實(shí)例的本地屬性
I.單個(gè)實(shí)例的變量
// JS的單個(gè)實(shí)例成員變量 function BaseClass() { } var instance1 = new BaseClass(); // 單個(gè)實(shí)例添加成員變量 instance1.nameTest = "jadeshu"; console.log(instance1.nameTest); // jadeshu var instance2 = new BaseClass(); console.log(instance2.nameTest); // instance2.nameTest is undefined
II.所有實(shí)例創(chuàng)建的時(shí)候都創(chuàng)建了同名的各自本地屬性變量
// JS所有實(shí)例共享的成員變量 function BaseClass() { // 所有實(shí)例創(chuàng)建時(shí)都有的同名實(shí)例變量 this.nameTest = "jadeshu"; } var instance1 = new BaseClass(); instance1.nameTest = "shu"; // 改變實(shí)例1的變量nameTest的值為shu console.log(instance1.nameTest); // shu var instance2 = new BaseClass(); //實(shí)例1和實(shí)例2各自都有一個(gè)nameTest console.log(instance2.nameTest);; // jadeshu
感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運(yùn)行工具:http://tools.jb51.net/code/HtmlJsRun測(cè)試上述代碼運(yùn)行效果。
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專(zhuān)題:《javascript面向?qū)ο笕腴T(mén)教程》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
- Js類(lèi)的靜態(tài)方法與實(shí)例方法區(qū)分及jQuery拓展的兩種方法
- JavaScript面向?qū)ο笾接徐o態(tài)變量實(shí)例分析
- js靜態(tài)方法與實(shí)例方法分析
- JavaScript創(chuàng)建類(lèi)/對(duì)象的幾種方式概述及實(shí)例
- javascript定義類(lèi)和類(lèi)的實(shí)現(xiàn)實(shí)例詳解
- JavaScript中的類(lèi)與實(shí)例實(shí)現(xiàn)方法
- 淺談js函數(shù)中的實(shí)例對(duì)象、類(lèi)對(duì)象、局部變量(局部函數(shù))
- JavaScript類(lèi)繼承及實(shí)例化的方法
- JavaScript 實(shí)現(xiàn)類(lèi)的多種方法實(shí)例
相關(guān)文章
JS與JQuery分別實(shí)現(xiàn)淘寶五星好評(píng)特效
這篇文章主要為大家詳細(xì)介紹了JS與JQuery分別實(shí)現(xiàn)淘寶五星好評(píng)特效,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-02-02Bootstrap輪播加上css3動(dòng)畫(huà),炫酷到底!
這篇文章將展示如何在 Bootstrap輪播上添加有趣的動(dòng)畫(huà)效果,同時(shí)確保這個(gè)js組件自由擴(kuò)展和快速上手,感興趣的小伙伴們可以參考一下2015-12-12JavaScript數(shù)字?jǐn)?shù)組的13個(gè)實(shí)用小技巧
數(shù)組是JS最常見(jiàn)的一種數(shù)據(jù)結(jié)構(gòu),咱們?cè)陂_(kāi)發(fā)中也經(jīng)常用到,在這篇文章中,提供一些小技巧,幫助咱們提高開(kāi)發(fā)效率,這篇文章主要給大家分享介紹了關(guān)于JavaScript數(shù)字?jǐn)?shù)組的13個(gè)實(shí)用小技巧,需要的朋友可以參考下2023-11-11javascript在firefox下設(shè)為首頁(yè)的代碼
javascript在firefox下設(shè)為首頁(yè)的代碼...2007-09-09JS實(shí)現(xiàn)動(dòng)態(tài)給圖片添加邊框的方法
這篇文章主要介紹了JS實(shí)現(xiàn)動(dòng)態(tài)給圖片添加邊框的方法,涉及javascript操作圖片border的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-04-04微信JS-SDK updateAppMessageShareData安卓不能自定義分享詳解
這篇文章主要介紹了微信JS-SDK updateAppMessageShareData安卓不能自定義分享詳解,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03JS實(shí)現(xiàn)可改變列寬的table實(shí)例
本文為大家詳細(xì)介紹下通過(guò)JS實(shí)現(xiàn)可改變列寬的table,具體的思路及代碼如下,感興趣的朋友可以參考下哈,希望對(duì)大家有所幫助2013-07-07js實(shí)現(xiàn)的網(wǎng)頁(yè)顏色代碼表全集
js實(shí)現(xiàn)的網(wǎng)頁(yè)顏色代碼表全集...2007-07-07對(duì)比分析Django的Q查詢及AngularJS的Datatables分頁(yè)插件
通過(guò)本文給大家對(duì)比分析了Django的Q查詢及AngularJS的Datatables分頁(yè)插件,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2017-02-02js下劃線和駝峰互相轉(zhuǎn)換的實(shí)現(xiàn)(多種方法)
本文主要介紹了js下劃線和駝峰互相轉(zhuǎn)換的實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-10-10