ES6 class 类

<h1>1、定义 “类”</h1>
<p style="margin-left:0cm;">之前都是使用new function来定义一个函数的类型，现在我们可以使用class关键字来定义一个函数类</p>
<h2 style="margin-left:0cm;">1.1 普通函数定义的类</h2>
<pre class="blockcode"><code class="language-javascript">function People(name, age, sex) {
this.name = name;
this.age = age;
this.sex = sex;
}
People.prototype.play = function () {
console.log(`我是${this.name},今年${this.age}岁，我喜欢打游戏`)
}
People.prototype.sing = function () {
console.log(`${this.name}还喜欢唱个歌`)
}
var zhangSan = new People("张三", 25, "男")
zhangSan.play();
zhangSan.sing();</code></pre>
<p><img alt="" height="60" src="https://beijingoptbbs.oss-cn-beijing.aliyuncs.com/cs/5606289-792918b7bf0c1712ed81073ae050628d.png" width="319"></p>
<h2>1.2 class定义的类</h2>
<pre class="blockcode"><code class="language-javascript">class People {
constructor(name, age, sex) {
      this.name = name;
      this.age = age;
      this.sex = sex;
}
play() {
      console.log(`我是${this.name}今年${this.age}岁，我喜欢打游戏`)
}
sing() {
      console.log(`${this.name}还喜欢唱歌`)
}
}
var lisi = new People("李四", 23, "女");
lisi.play();
lisi.sing();</code></pre>
<p><img alt="" height="54" src="https://beijingoptbbs.oss-cn-beijing.aliyuncs.com/cs/5606289-547a44b5099b4b95e89b6ac62ffb88d0.png" width="322"></p>
<p><img alt="" height="313" src="https://beijingoptbbs.oss-cn-beijing.aliyuncs.com/cs/5606289-102a6008cea71dbe3ff5e270d913965c.png" width="470"></p>
<p style="margin-left:0cm;"><strong><span style="color:#ff0000;">虽然</span><span style="color:#ff0000;">es6</span></strong><strong><span style="color:#ff0000;">增加了</span><span style="color:#ff0000;">class</span></strong><strong><span style="color:#ff0000;">关键字，但是</span><span style="color:#ff0000;">JavaScript</span></strong><strong><span style="color:#ff0000;">中还是没有类的概念！依然是基于面向对象，而不是真正的面向对象，基于原型链来模型实现</span><span style="color:#ff0000;">class</span></strong><strong><span style="color:#ff0000;">，机理和普通函数定义的类是一样的</span></strong></p>
<pre class="blockcode"><code class="language-javascript">console.log(xiaohong.singsong === People.prototype.singsong) // true
console.log(xiaohong.hasOwnProperty("singsong")) // false
console.log(xiaohong.hasOwnProperty("name")) // true
</code></pre>
<p><img alt="" height="294" src="https://beijingoptbbs.oss-cn-beijing.aliyuncs.com/cs/5606289-183a894c0fdd35349516e7cdb1983456.png" width="571"></p>
<h1> 2、继承</h1>
<h2>2.1普通函数的继承</h2>
<pre class="blockcode"><code class="language-javascript">function People(name, age, sex) {
this.name = name;
this.age = age;
this.sex = sex;
}
People.prototype.play = function () {
console.log(`我是${this.name},今年${this.age}岁了，我喜欢打游戏`);
}
People.prototype.sing = function () {
console.log("我花喜欢唱歌");
}

function Student(name, age, sex, id, score, school) {
this.name = name;
this.age = age;
this.sex = sex;
this.id = id;
this.score = score;
this.school = school;
}
Student.prototype = new People();

Student.prototype.study = function () {
console.log(`我的学校是${this.school},学号${this.id},成绩${this.score}`);
}
var xiaoming = new Student("小明", 22, "男", "100001", "90", "实验中学");
xiaoming.play();
xiaoming.study();</code></pre>
<p><img alt="" height="70" src="https://beijingoptbbs.oss-cn-beijing.aliyuncs.com/cs/5606289-53a3914649d81fd08c2cb4f0c0fd07a3.png" width="283"></p>
<h2>2.2继承的原理</h2>
<p><img alt="" height="285" src="https://beijingoptbbs.oss-cn-beijing.aliyuncs.com/cs/5606289-730403a5c2381d3ec34e2d98221bff61.png" width="568"></p>
<h2>2.3ES6实现继承</h2>
<pre class="blockcode"><code class="language-javascript">class People {
constructor(name, age, sex) {
      this.name = name;
      this.age = age;
      this.sex = sex;
}
play() {
      console.log(`我是${this.name}今年${this.age}岁，我喜欢打游戏`)
}
sing() {
      console.log(`${this.name}还喜欢唱歌`)
}
}
class Student extends People {
constructor(name, age, sex, id, score, school) {
      super(name, age, sex);
      this.id = id;
      this.score = score;
      this.school = school;
}
study() {
      console.log(`我的学校是${this.school},学号${this.id},成绩${this.score}`);
}
}
var xiaoming = new Student("小明", 30, "男", 10001, 89, "实验中学")
xiaoming.play();
xiaoming.study();</code></pre>
<p><img alt="" height="49" src="https://beijingoptbbs.oss-cn-beijing.aliyuncs.com/cs/5606289-94e66e5fba21b6d385dc460208bb86fe.png" width="317"></p>
<h1>3、constructor方法</h1>
<p style="margin-left:0cm;">constructor方法是类的默认方法，通过new命令生成对象实例时，自动调用该方法<span style="color:#ff0000;">。一个类必须有</span><span style="color:#ff0000;">co