[TOC]
# 語法
~~~
static methodName() { ... }
~~~
# 描述
靜態方法調用直接在類上進行,不能在類的實例上調用。靜態方法通常用于創建實用程序函數。
# 調用靜態方法
## 從另一個靜態方法
靜態方法調用同一個類中的其他靜態方法,可使用`[this]`關鍵字。
~~~js
class StaticMethodCall {
static staticMethod() {
return 'Static method has been called';
}
static anotherStaticMethod() {
return this.staticMethod() + ' from another static method';
}
}
StaticMethodCall.staticMethod();
// 'Static method has been called'
StaticMethodCall.anotherStaticMethod();
// 'Static method has been called from another static method'
~~~
## 從類的構造函數和其他方法
非靜態方法中,不能直接使用`[this]`關鍵字來訪問靜態方法。而是要用類名來調用:`CLASSNAME.STATIC_METHOD_NAME()`?,或者用構造函數的屬性來調用該方法:`this.constructor.STATIC_METHOD_NAME()`.
~~~js
class StaticMethodCall {
constructor() {
console.log(StaticMethodCall.staticMethod());
// 'static method has been called.'
console.log(this.constructor.staticMethod());
// 'static method has been called.'
}
static staticMethod() {
return 'static method has been called.';
}
}
~~~
# 示例
下面的例子說明了這幾點:
1. 靜態方法如何在類上實現。
2. 具有靜態成員的類,可以被子類化 。
3. 什么情況下靜態方法可以調用,什么情況下不能調用。
~~~js
class Tripple {
static tripple(n = 1) {
return n * 3;
}
}
class BiggerTripple extends Tripple {
static tripple(n) {
return super.tripple(n) * super.tripple(n);
}
}
console.log(Tripple.tripple());// 3
console.log(Tripple.tripple(6));// 18
let tp = new Tripple();
console.log(BiggerTripple.tripple(3));// 81(不會受父類實例化的影響)
console.log(tp.tripple());// 'tp.tripple 不是一個函數'.
~~~
- 內容介紹
- EcmaScript基礎
- 快速入門
- 常量與變量
- 字符串
- 函數的基本概念
- 條件判斷
- 數組
- 循環
- while循環
- for循環
- 函數基礎
- 對象
- 對象的方法
- 函數
- 變量作用域
- 箭頭函數
- 閉包
- 高階函數
- map/reduce
- filter
- sort
- Promise
- 基本對象
- Arguments 對象
- 剩余參數
- Map和Set
- Json基礎
- RegExp
- Date
- async
- callback
- promise基礎
- promise-api
- promise鏈
- async-await
- 項目實踐
- 標簽系統
- 遠程API請求
- 面向對象編程
- 創建對象
- 原型繼承
- 項目實踐
- Classes
- 構造函數
- extends
- static
- 項目實踐
- 模塊
- import
- export
- 項目實踐
- 第三方擴展庫
- immutable
- Vue快速入門
- 理解MVVM
- Vue中的MVVM模型
- Webpack+Vue快速入門
- 模板語法
- 計算屬性和偵聽器
- Class 與 Style 綁定
- 條件渲染
- 列表渲染
- 事件處理
- 表單輸入綁定
- 組件基礎
- 組件注冊
- Prop
- 自定義事件
- 插槽
- 混入
- 過濾器
- 項目實踐
- 標簽編輯
- iView
- iView快速入門
- 課程講座
- 環境配置
- 第3周 Javascript快速入門