es6中的类和es5的类

典型的es6类:
类的成员: 构造方法,属性,方法,静态方法等

class Parent {
  height = 20;
  constructor(name) {
    this.name = name;
  }

  static sayHello() {
    console.log('hello');
  }

  sayName() {
    console.log('my name is ' + this.name);
    return this.name;
  }
}

class Child extends Parent {
  constructor(name, age) {
    super(name);
    this.age = age;
  }

  sayAge() {
    console.log('my age is ' + this.age);
    return this.age;
  }
}

类的使用时new出来的,跟es5不一样; 类的写法跟es5也是不一样,那么有如下问题:

1. es6这样的写法对应于es5写法,类定义哪些属性和方法是对应起来的
2. 当继承发生的时候,过程是怎样的

1. es6这样的写法对应于es5写法,类定义哪些属性和方法是对应起来的

es5类的定义

function ClassName () {
  this.x = 1;
  this.y = 2;
  this.sayHello = function () {
    console.log('hello');
  }
}
ClassName.prototype.sayHello = function () {
  console.log('hello');
}
var className = new ClassName();
className.sayHello();

es6类的定义

class ClassName {
  x = 1;
  y = 2;
  constructor () {}
  sayHello () {
    console.log('hello');
  }
}

es5对象:

定义在实例对象上的:
this.x
this.y
this.sayHello
定义在类的原型上的:
ClassName.prototype.sayHello

---

es6对象:

定义在实例对象上的:
x = 1;
y = 2;
定义在原型上的:
sayHello方法(非静态方法)

---

另外,es6对象上的静态方法(前缀是static),不在原型上, 不可被实例化对象调用,且不能被子类的实例化对象调用,但是可以被子类继承,通过子类名调用.

2. 当继承发生的时候,过程是怎么样的

es5的继承

function Parent () {
  this.x = 1;
  this.y = 2;
}

function Child () {
  this.z = 3;
}

Child.prototype = new Parent();

var parent = new Parent();
var child = new Child();

es6的继承

class Parent {
  height = 20;
  static width = 30;
  constructor(name) {
    this.name = name;
  }

  static sayHello() {
    console.log('hello');
  }

  sayName() {
    console.log('my name is ' + this.name);
    return this.name;
  }
}

class Child extends Parent {
  constructor(name, age) {
    super(name);
    this.age = age;
  }

  sayAge() {
    console.log('my age is ' + this.age);
    return this.age;
  }
}

let parent = new Parent('Parent');
let child = new Child('Child', 18);

下面将探索继承发生了什么
es5的继承中,只存在单个原型链;
es6的继承中,同时存在两条原型链;

es5的继承如下:
在构造函数这条原型链上是不存在的;
在实例上的原型链是存在的,

function Parent () {
  this.x = 1;
  this.y = 2;
}

function Child () {
  this.z = 3;
}

Child.prototype = new Parent();

var parent = new Parent();
var child = new Child();

// 在构造函数这条原型链上是不存在的
console.log('Child.__proto__ === Parent', Child.__proto__ === Parent);

/**
在实例上的原型链存在
*/ 
// 子类实例继承自子类原型
console.log('Child.__proto__ === Child.prototype', child.__proto__ === Child.prototype);
// 子类原型继承自父类原型
console.log('Child.prototype.__proto__ === parent.prototype', Child.prototype.__proto__ === Parent.prototype);
// 父类实例继承自父类原型
console.log('parent.__proto__ === Parent.prototype', parent.__proto__ === Parent.prototype);
// 子类实例继承自父类实例(Child.prototype = new Parent();)
console.log('Child.prototype.__proto__ === parent.__proto__', Child.prototype.__proto__ === parent.__proto__);

es6的继承,存在2条原型链

class Parent {
  height = 20;
  static width = 30;
  constructor(name) {
    this.name = name;
  }

  static sayHello() {
    console.log('hello');
  }

  sayName() {
    console.log('my name is ' + this.name);
    return this.name;
  }
}

class Child extends Parent {
  constructor(name, age) {
    super(name);
    this.age = age;
  }

  sayAge() {
    console.log('my age is ' + this.age);
    return this.age;
  }
}

let parent = new Parent('Parent');
let child = new Child('Child', 18);
// 构造函数原型链
console.log('Child.__proto__ === Parent', Child.__proto__ === Parent);
console.log('Parent.__proto__ === Function.prototype', Parent.__proto__ === Function.prototype);
console.log('Function.prototype.__proto__ === Object.prototype', Function.prototype.__proto__ === Object.prototype);
console.log('Parent.__proto__ === Function.prototype', Object.prototype.__proto__ === null);

// 实例原型链
console.log('child.__proto__ === Child.prototype', child.__proto__ === Child.prototype);
console.log('Array.prototype.__proto__ === Object.prototype', Child.prototype.__proto__ === Parent.prototype);
console.log('Array.prototype.__proto__ === Object.prototype', Parent.prototype.__proto__ === Object.prototype);
console.log('Array.prototype.__proto__ === Object.prototype', Object.prototype.__proto__ === null);

最后附上一张图:

751551798315_.pic_hd.jpg