含义

• 类：是抽象的，用来描述一个抽象事物
• 对象：是具体的，是类的实例化

---

1.普通方法和属性

class

class Person1 {
  constructor(name){
    this.name = name
  }

  play(){
    console.log(`${this.name} 在打游戏`)
  }
}

const p1 = new Person1('德玛')
console.log(p1)
console.log(p1.name)
p1.play()

• 输出结果

  
  image.png

• 属性是直接挂载实例化的对象上面，而方法则是挂载[[Prototype]]上面
• 实例化的对象上不存在__proto__
• 实例化的[[Prototype]]指向的是一个对象

---

function

const Person2 = function(name){
  this.name = name
  this.play = function(){
    console.log(`${this.name} 在打游戏`)
  }
}
const p2 = new Person2('诺手')
console.log(p2)
console.log(p2.name)
p2.play()

• 输出结果

  
  image.png
• 属性，方法都是挂载实例上
• 实例化的[[Prototype]]指向的也是一个对象

---

2. 静态方法和属性

class

class Person1 {
  static nickName

  static play(){
    console.log(`${this.nickName} 在打游戏`)
  }
}
Person1.nickName = '德玛西亚'
Person1.play()

const p1 = new Person1()
console.log(p1)

• 输出结果

  
  image.png
• 静态方法需要用类本身去调用
• 实例化的对象上面不存在静态属性和方法

---

function

const Person2 = function(){
}
Person2.nickName = '洛克萨斯'
Person2.play = function(){
  console.log(`${this.nickName} 在打游戏`)
}
Person2.play()

const p2 = new Person2()
console.log(p2)

• 输出结果

  
  image.png
• 静态属性和方法需要用构造器调用
• 实例化的对象上面不存在静态属性和方法

---

3.继承

继承使用

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

  eat(){
    console.log(`${this.name} 在吃东西`)
  }

  play(){
    console.log(`${this.name} 在打游戏`)
  }
}

const p = new Person('德玛西亚')
p.eat()
p.play()

// 继承 Person
class Man extends Person {
  constructor(name){
    super(name)
  }

  // 重写play
  play(){
    console.log(`${this.name} 再打英雄联盟`)
  }
}
const m = new Man('洛克萨斯')
m.eat()
m.play()

class Son extends Man {
  constructor(name){
    super(name)
  }

  sleep(){
    console.log(`${this.name} 在睡觉`)
  }
}

const s = new Son('儿子')
s.eat()
s.play()
s.sleep()

• 输出

  
  image.png

• constructor 调用super,以执行父类的构造器

• Man 继承 Person,并重写play方法.

• Son 继承 Man,可以使用Man和Person的所有方法

---

原理(使用bebal 编译上述代码)

"use strict";

function _inheritsLoose(subClass, superClass) { 
   subClass.prototype = Object.create(superClass.prototype);
   subClass.prototype.constructor = subClass; 
   _setPrototypeOf(subClass, superClass); 
}

function _setPrototypeOf(o, p) { 
  _setPrototypeOf = Object.setPrototypeOf  || 
  function _setPrototypeOf(o, p) {
     o.__proto__ = p; 
    return o; 
  };
   return _setPrototypeOf(o, p); 
}

var Person = /*#__PURE__*/function () {
  function Person(name) {
    this.name = name;
  }

  var _proto = Person.prototype;

  _proto.eat = function eat() {
    console.log(this.name + " \u5728\u5403\u4E1C\u897F");
  };

  _proto.play = function play() {
    console.log(this.name + " \u5728\u6253\u6E38\u620F");
  };

  return Person;
}();

var p = new Person('德玛西亚');
p.eat();
p.play(); // 继承 Person

var Man = /*#__PURE__*/function (_Person) {
  _inheritsLoose(Man, _Person);

  function Man(name) {
    return _Person.call(this, name) || this;
  } // 重写play


  var _proto2 = Man.prototype;

  _proto2.play = function play() {
    console.log(this.name + " \u518D\u6253\u82F1\u96C4\u8054\u76DF");
  };

  return Man;
}(Person);

var m = new Man('洛克萨斯');
m.eat();
m.play();

var Son = /*#__PURE__*/function (_Man) {
  _inheritsLoose(Son, _Man);

  function Son(name) {
    return _Man.call(this, name) || this;
  }

  var _proto3 = Son.prototype;

  _proto3.sleep = function sleep() {
    console.log(this.name + " \u5728\u7761\u89C9");
  };

  return Son;
}(Man);

var s = new Son('儿子');
s.eat();
s.play();
s.sleep();

函数实现类，使用匿名函数，返回构造函数

var Person = /*#__PURE__*/function () {
  function Person(name) {
    this.name = name;
  }

  var _proto = Person.prototype;

  _proto.eat = function eat() {
    console.log(this.name + " \u5728\u5403\u4E1C\u897F");
  };

  _proto.play = function play() {
    console.log(this.name + " \u5728\u6253\u6E38\u620F");
  };

  return Person;
}();

函数实现继承

var Man = /*#__PURE__*/function (_Person) {
  _inheritsLoose(Man, _Person);

  function Man(name) {
    return _Person.call(this, name) || this;
  } // 重写play


  var _proto2 = Man.prototype;

  _proto2.play = function play() {
    console.log(this.name + " \u518D\u6253\u82F1\u96C4\u8054\u76DF");
  };

  return Man;
}(Person);

• 匿名函数传入需要继承的函数
• 创建一个需要的继承函数的prototype,赋值给自己，并且将prototype.constructor指向自己
• 将自己的__proto__指向继承函数