實例方法、實例屬性、靜態方法與靜態屬性的創建與使用（es5 vs es6）

一、es5版本

相關知識點

• 構造函數
• 原型鏈

const Person = function (name, age) {
  this.name = name // 實例屬性，可以通過對象.屬性訪問的屬性叫實例屬性
  this.age = age
}

// 靜態屬性，掛載在構造函數
Person.info = 'nice'

// 實例方法，掛載在原型鏈，生成的對象可直接點方法的方式調用
Person.prototype.say = function () {
  console.log('實例方法');
}

// 靜態方法
Person.show = function () {
  console.log('靜態方法');
}


const p1 = new Person('steven', 20)
console.log(p1.name) // 實例屬性獲取方式
p1.say() // 實例方法調用方式
console.log(Person.info + '-----') // 靜態屬性調用方式
Person.show() // 靜態方法調用方式

二、es6版本

相關知識點

• class關鍵字

class Animal {
  // 類構造器 默認爲空
  // 構造器的作用：每當new一個類，會優先執行構造器中代碼
  constructor(name, age) {
    // 實例屬性
    this.name = name
    this.age = age
  }

  // 靜態屬性
  static info = 'es6 靜態方法'

  // 掛載原型對象上的實例方法
  jump() {
    console.log('es6 實例方法');
  }

  static show() {
    console.log('es6 靜態方法');
  }
}

const a1 = new Animal('大黃', 4)
console.log(a1.name); // 實例屬性調用
console.log(Animal.info); // 靜態方法
a1.jump() // 實例方法調用
Animal.show() // 靜態方法調用

三、一句話總結

靜態屬性

掛載在構造函數函數,使用static關鍵字

eg. info

靜態方法

掛載在構造函數函數的方法，使用static關鍵字

eg. show

實例屬性

掛載在原型對象上的屬性

eg. name

實例方法

掛載在原型對象上的方法

eg. jump

END