(ES6)JavaScript中面向对象类的实现

在ES5中，我们就知道JS是不支持面向对象的，所以用函数模拟了一个构造函数来实现类的。那么在ES6中，在ES5的原理基础上，将代码书写更为简单，明了。

一、怎样用ES6创建类？首先看一看例子：

 class Student {
          constructor(name, age) {
             this.name = name;
             this.age = age;
         }
     sleep(){console.log(`xx在xx睡觉`);
     };
 }
let s = new Student("ax", 23);
  console.log(s);

这里出现了关键词“class”，之后的Student为类的标识符，使用大驼峰命名法。这是类模板。

constructor()是类中必须存在的构造函数，若没有书写则会默认有一个空构造。在小括号内是类的参数，只要觉得有必要写入的参数都可以写。这是构造器。

二、new：new关键字，调用类。调用类时发生了什么？（这是面试常考题）

1、创建一个空的新对象
var obj = {};
2、将该对象的_proto_（隐式原型）指向创建该对象的类的原型对象
假设类叫做A，obj._proto_ = A.prototype
3、将构造函数环境中的this，指向该对象，执行构造函数中的代码
this = obj;(代码错误，理解环境)
4、返回刚刚的创建的新对象

三、在类中，常用get—set属性，获取和设置属性值，是可控的手段

例子
class Circle {
            constructor(left, top, r) {
                this.createNode(); //在类中调用创建节点
                this.left = left;
                this.top = top;
                this.r = r;
                this.appendToPage(); //将节点放入页面
            }
            createNode() {
                const div = document.createElement("div"); //创建节点，放入div变量
                this.node = div; //类的节点为div
            };
            appendToPage() {
                document.body.appendChild(this.node);
            }
            get left() {
                return this.left + this.r;
            }
            set left(value) {
                this.node.style.left = value - this.r + "px"; //将圆心设为点
            }
            get top() {
                return this.top + this.r;
            }
            set top(value) {
                this.node.style.top = value - this.r + "px";
            }
            get r() {
                return this.noed.offsetWidth / 2 + "px";
            }
            set r(value) {

            }
        }

创建一个圆圈类，其中的位置和半径都用get-set属性设置，他们为一对使用。get（）为调用，set（）为更改属性值（有参数）。当我们操作实例对象的get set属性时，就相当于在不断的调用对应的get—set方法。

四、类的三大特征

（1）封装

隐藏内部细节，不暴露在外面；即，信息的隐藏。不关心具体怎样实现的，只需要知道能达到效果就行了

（2）继承

子类继承父类的“所有”属性和方法，并且拥有自己的属性和方法
不能指向性继承

【extends 扩展】
从子类，扩展到父类，即继承父类

【super 超类】

继承父类，只能写在子类第一行中，并且只能写一次

class Person{
            constructor(name,age,gender){
                this.name = name;
                this.age = age;
                this.gender = gender;
            }
        }
        class Student extends Person{//学生类 扩展 至人类=>即 继承
            constructor(name,age,gender,grade){
                super(name,age,gender)//超类（父类）,调用父亲的构造，实现父亲构造的继承
                this.grade = grade;//用继承省去部分重复的
            }
 }

（3）多态

相同的行为，不同的、多种的实现，传的参数不一样，决定了实现方法不一样。

【重载】

JS自带，参数的不同，实现不同。通过if判断参数表

【重写】

父亲的行为，儿子重写一个，覆盖父亲的

例子：

创建图形类，三角形类为图形类的儿子，使用extends继承；三角形类有父亲没有的特性，因此创建createNode方法重写。

class Graph {
            constructor(color, left, top) {
                this.color = color;
                this.left = left;
                this.top = top;
                this.node = null; //没有创建图形时，图形节点为空，之后重新赋值
            }
        }


        //三角形
        class Triangle extends Graph {//继承
            constructor(color, left, top, bottom, height) {
                super(color, left, top)
                this.bottom = bottom;
                this.height = height;
                this.init();
            }
            createNode() { //oo重写
                this.node = document.createElement("p");
                // this.node.style.backgroundColor = this.color;
                this.node.style.left = this.left + "px";
                this.node.style.top = this.top + "px";
                this.node.style.borderBottom = this.height + "px" + " solid " + this.color;
                this.node.style.borderLeft = this.bottom / 2 + "px" + " solid transparent";
                this.node.style.borderRight = this.bottom / 2 + "px" + " solid transparent";
            }
        }

以上就是ES6的类的创建和使用。