JS中關(guān)于Class類的靜態(tài)屬性和靜態(tài)方法
更新時間：2022年10月13日 12:19:02 作者：燕穗子博客
這篇文章主要介紹了JS中關(guān)于Class類的靜態(tài)屬性和靜態(tài)方法，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
一、類的兩個概念
1、類自身；
2、類的實例對象；
總的來說：靜態(tài)的是指向類自身，而不是指向?qū)嵗龑ο?，主要是歸屬不同，這是靜態(tài)屬性，靜態(tài)方法的核心。
二、對象的兩個部分
1、屬性
分為：實例屬性、靜態(tài)屬性（類屬性）、只讀屬性
2、方法
分為：實例方法、靜態(tài)方法（類方法）
class Person {
? //1、定義方法
? /* 1.1、實例屬性，直接定義的屬性，要new實例后，實例去訪問的*/
? name= "tom";
? age = 10;
? /* 1.2、靜態(tài)屬性（類屬性），通過static開頭的屬性，Person類可以訪問,
? ? 不需要創(chuàng)建實例，實例訪問不到 */
? static height = 180;
? /* 1.3、只讀屬性，readonly開頭的屬性，只可讀，不可改*/
? readonly money= 1000;
?
? //2、定義方法
?
? say(){
? ? ? console.log('hello world'); ? ?
? }
? static work(){
? ? ? console.log('我能掙錢'); ? ?
? }
}
const per = new Person();
//per.money=2000 ?報錯，不可修改
console.log(per, Person.height);
per.say() ?//調(diào)用實例方法
Person.work() //調(diào)用類方法三、靜態(tài)方法使用：在方法前加上static關(guān)鍵字
1、為什么使用靜態(tài)方法
阻止方法被實例繼承，類的內(nèi)部相當(dāng)于實例的原型，所有在類中直接定義的方法相當(dāng)于在原型上定義方法，都會被類的實例繼承，但是使用static靜態(tài)方法定義的不會被實例繼承。
? class User{
? ? ? ? ? ? static call(){
? ? ? ? ? ? ? ?console.log('你好呀');
? ? ? ? ? ? }
? ? ? ? }
? ? ? User.call()//你好呀
?
? ? ? let ff = new User()
? ? ? ff.call()//報錯，實例不能訪問類的靜態(tài)方法這里類User可以直接使用call方法，但它的是實例ff卻不可以！
但是我們可以通過繼承的方式，讓另一個類來繼承User里面的方法
class User{
? ? ? ? ? ? static call(){
? ? ? ? ? ? ? ?console.log('你好呀');
? ? ? ? ? ? }
? ? ? ? }
??
??
? ? ?class foo extends User{}
? ? ?foo.call()//'你好呀' ? ?這里foo類通過繼承User類，才可以使用User里面的靜態(tài)方法。
我們知道class類這個概念是es6后出來的新特性，用以前的es5方法寫就是：
?class User{
? ? ? ? ? ? static call(){
? ? ? ? ? ? ? ?console.log('靜態(tài)方法的你好呀');
? ? ? ? ? ? }
? ? ? ? ? ? call(){
? ? ? ? ? ? ? ?console.log('構(gòu)造函數(shù)方法的你好呀');
? ? ? ? ? ? }
? ? ? ? }
?
//等同于
function User(){}
? ? ?User.call=function(){
? ? ? ? ?console.log('靜態(tài)方法的你好呀');
? ? ?}
? ?
? ? User.prototype.call=function(){
? ? ? ? ?console.log('構(gòu)造函數(shù)方法的你好呀');
? ? ?}但是User類里面的構(gòu)造函數(shù)方法是可以被實例調(diào)用的，如圖：
function User(){}
User.prototype.call=function(){
? ? ? ? ?console.log('你好呀');
? ? ?}
? ? ?let h1 =new User()
? ? ?h1.call()//你好呀完整版如下
class User {
? ? ? ? ? ? call() {
? ? ? ? ? ? ? ? // 這里面的this指向構(gòu)造函數(shù)的對象
? ? ? ? ? ? ? ? console.log(this === hh); // true
? ? ? ? ? ? ? ? console.log("構(gòu)造函數(shù)方法的你好呀");
? ? ? ? ? ? }
? ? ? ? ? ? static call() {
? ? ? ? ? ? ? ? // 這里面的this指向類本身
? ? ? ? ? ? ? ? console.log(this === User); // true
? ? ? ? ? ? ? ? console.log("靜態(tài)方法的你好呀");
? ? ? ? ? ? }
? ? ? ? }
? ? ? ? // 靜態(tài)方法
? ? ? ? User.call(); //靜態(tài)方法的你好呀
?
? ? ? ? // 構(gòu)造函數(shù)方法
? ? ? ? let hh = new User();
? ? ? ? hh.call(); //構(gòu)造函數(shù)方法的你好呀三、總結(jié)
1、靜態(tài)屬性和非靜態(tài)屬性的區(qū)別
- 在內(nèi)存中存放的位置不同：所有static修飾的屬性和方法都存放在內(nèi)存的方法區(qū)里，而非靜態(tài)的都存在堆內(nèi)存中
- 出現(xiàn)的時機(jī)不同：靜態(tài)屬性和方法在沒創(chuàng)建對象之前就存在，而非靜態(tài)的需要在創(chuàng)建對象才存在
- 靜態(tài)屬性是整個類都公用的
- 生命周期不一樣，靜態(tài)在類消失后被銷毀，非靜態(tài)在對象銷毀后銷毀
- 用法：靜態(tài)的可以直接通過類名訪問，非靜態(tài)只能通過對象進(jìn)行訪問
2.使用static的注意事項
- 帶靜態(tài)修飾符的方法只能訪問靜態(tài)屬性
- 非靜態(tài)方法既能訪問靜態(tài)屬性也能訪問非靜態(tài)屬性
- 非靜態(tài)方法不能定義靜態(tài)變量
- 靜態(tài)方法不能使用this關(guān)鍵字
- 靜態(tài)方法不能調(diào)用非靜態(tài)方法，反之可以
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了javascript 的變量、作用域和內(nèi)存問題的相關(guān)資料,需要的朋友可以參考下2017-04-04
javascript實現(xiàn)網(wǎng)站加入收藏功能
這篇文章主要介紹了javascript實現(xiàn)網(wǎng)站加入收藏功能的相關(guān)資料,需要的朋友可以參考下2015-12-12
感謝網(wǎng)友“l(fā)iufabin”提出的關(guān)于不支持FF的問題，第一個在FF下經(jīng)過測試時支持的，第二個中的高度自適應(yīng)不支持，我在網(wǎng)上找了一個JQUERY的插件2009-05-05
這篇文章主要為大家詳細(xì)介紹了jquery實現(xiàn)右側(cè)欄菜單選擇操作，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-03-03
前端本地文件獲取excel表格內(nèi)容并渲染在頁面的方法
這篇文章主要介紹了前端本地文件獲取excel表格內(nèi)容并渲染在頁面的方法,主要利用SheetJS插件用于處理Excel文件,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2025-03-03
這篇文章主要為大家詳細(xì)介紹了JavaScript實現(xiàn)篩選數(shù)組，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-03-03
JS動態(tài)改變?yōu)g覽器標(biāo)題的方法
這篇文章主要介紹了JS動態(tài)改變?yōu)g覽器標(biāo)題的方法,涉及JavaScript頁面元素結(jié)合時間函數(shù)動態(tài)操作的相關(guān)技巧,需要的朋友可以參考下2016-04-04
這篇文章主要為大家詳細(xì)介紹了js中利用cookie實現(xiàn)記住密碼功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-10-10
JavaScript跨平臺的開源框架NativeScript
本文給大家分享的是一款使用javascript來構(gòu)建跨平臺原生移動應(yīng)用的開源框架--NativeScript，可以使用JavaScript開發(fā)跨平臺、真正原生的iOS, Android 和 Windows 移動App。開發(fā)人員使用NativeScript提供的庫來構(gòu)建應(yīng)用UI，其抽象了各種原生平臺之間的不同。2015-03-03
HBuilderX開發(fā)一個簡單的微信小程序的實現(xiàn)步驟
本文主要介紹了HBuilderX開發(fā)一個簡單的微信小程序的實現(xiàn)步驟，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-02-02