实例方法、实例属性、静态方法与静态属性的创建与使用（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