ES6 的知识点学习笔记(2) - class 静态方法 继承

在之前的 ES5 中, 是没有类 (class) 的概念的,
例子:

• ES5 构造函数 Person

// es5 构造函数

function Person(name, age) {
  this.name = name
  this.age = age
}

Person.prototype.say = function() {
  console.log('my name is ' + this.name)
}

const boy = new Person('GY', 24)

boy.say() // 输出: my name is GY

运行结果

---

ES6 class

• class Person

// ES6 class Person

class Person {
  constructor(name, age) {
    this.name = name
    this.age = age
  }

  // say 方法
  say() {
    console.log('My name is ' + this.name + ". I'm " + this.age + ' years old')
  }
}

// 实例化
const girl = new Person('water', 24)

// 调用 say 方法
girl.say() // 输出: My name is water. I'm 24 years old

运行结果

---

• class Person 的本质: Function

本质上是一个 Function, 但必须通过 new 的方式来使用

//  本质上是一个 Function
console.log(typeof Person) // 输出:function

console.log(Person.prototype) // 输出: Person { constructor: f, say: f }

// 但必须通过 new 的方式来使用
Person('Tina', 13) // 报错 Class constructor Person cannot be invoked without 'new'

---

• 静态方法

回顾下静态方法是怎样的:

// 回顾下静态方法是怎样的:
var str = '有'
console.log(str.charCodeAt(0)) // 输出: 26377

通过 charCode 反查 中文字符, 需用用到 String 这个字符串对象, 这个 fromCharCode 就是 String 的一个静态方法

console.log(String.fromCharCode(26377)) // 输出: 有

在 Person 中定义静态方法

class Person {
  constructor(name, age) {
    this.name = name
    this.age = age
  }

  // 静态方法
  static isHuman(o) {
    // 测试一个参数 o 在其原型链中是否存在一个 Person 的 prototype 属性
    return o instanceof Person
  }

  // code ...
}

// Person 的静态方法调用
const ben = new Person('ben', 8)

console.log(Person.isHuman(ben)) // 输出: true
console.log(Person.isHuman(1)) // 输出: false

运行结果

• class 的继承

class Person {
  constructor(name, age) {
    this.name = name
    this.age = age
  }

  // 静态方法
  static isHuman(o) {
    // 测试一个参数 o 在其原型链中是否存在一个 Person 的 prototype 属性
    return o instanceof Person
  }

  // say
  say() {
    console.log('My name is ' + this.name + ". I'm " + this.age + ' years old')
  }

  // 多个方法
  eat() {
    console.log('eating...')
  }
}

// class 的继承
class Coder extends Person {
  constructor(name, age, sex) {
    // 必须调用 super(), super() 指向 Person
    super(name, age)
    this.sex = sex
  }

  // 重写 Person 的 say 方法, 并不会影响父类的 say
  say() {
    console.log('My name is ' + this.name + ". I'm a " + this.sex)
  }
}

const you= new Coder('You', 24, 'boy')

you.say() // 输出: My name is You. I'm a boy

运行结果

每天学习一点点

上一篇: ES6 的知识点学习笔记(1) - let const 和解构赋值