JavaScript真正的面向对象——Class

　　今天复习了Javascript的对象操作，小写一篇总结一下。

　　众所周知，JavaScript是一门面向对象的编程语言。

　　而对象的三大基本特征为：

• 封装
• 继承
• 多态

　　封装：就是把属性和方法都放在对象里面，想要读取它或者修改它的属性，就需要调用它内部的方法

　　继承：就是一个对象能够继承另一个对象的属性和方法

　　多态：同一操作应用于不同的对象，产生的结果不同

 

　　我们通常工厂化创建对象的格式如下：

　　

 

 

 　　

 　　这就是封装的基本操作，你还可以在构造函数中使用var、let、const声明私有变量，并且可以在构造函数内部使用闭包来从外部访问它的值

　　 

 

　　

　　如何简单实现继承？

　　

　　这里我新建了一个Bicycle自行车类，在Bicycle类内我调用了Car的构造函数并且使用apply方法将应用对象绑定到了当前Bicycle中，这样就可以实现继承了。

　　

　　那么如何实现多态，多态前面说过了，就是相同的操作作用于不同的对象会产生不同的结果，最根本的原理其实是原型方法(父类)的覆盖。

　　这是我们的基类(车)：

　　

 

　　 接下来在基类的基础上扩充两个子类：

  　 

　　结果输出：

　　

 

　　这里发现，我们调用的都是从相同原型继承而来的getChairCount函数，但是输出结果是不同的，这是因为我们在每个子类里面通过this.getChairCount = ... 分别重写了该方法，得到的结果不同，这就叫做多态。

 

　　

---

 

 　　好在ES6中真正意义上地引入了“类”的概念，上文不过是对对象的简单操作，而ES6中的 class关键字为没有真正类的javascript带来了 “久旱逢甘霖” 的沐浴。

　　　　基本语法：

　　　　

 1 class Polygon {
 2   // 添加一个自定义的constructor构造器，如果你没有添加的话，构造器将默认为 constructor () {}
 3   constructor(height, width) {
 4     this.name = 'Polygon';
 5     this.height = height;
 6     this.width = width;
 7   }
 8 
 9   // 方法定义
10   sayName() {
11     console.log('Hi, I am a ', this.name + '.');
12   }
13 
14   sayHistory() {
15     console.log('"Polygon" is derived from the Greek polus (many) ' +
16       'and gonia (angle).');
17   }
18 }

 　　创建该类的对象的方式与上文的构造函数一样：

　let p = new Polygon(100, 100)

　　在class这种模式下，我们如何实现继承？

　　答：使用extends关键字

// 含义：创建一个Square类继承自Polygon类
class Square extends Polygon {
  constructor(length) {
    // super关键字使你能够使用父类的构造器，以及调用父类的方法
    super(length, length);
    // 提示： 在你用this之前，必须先使用super，否则会出现引用错误
    this.name = 'Square';
  }

  // Getter/setter 方法在class中也是支持的
  get area() {
    return this.height * this.width;
  }

  set area(value) {
    this.area = value;
  }

　// 子类的sayName方法覆盖类从父类继承而来的sayName方法
  // 由此便可以实现多态

  sayName() {
    ChromeSamples.log('Sup! My name is ', this.name + '.');
    super.sayHistory();
  }

}

　　这两段代码片段摘自MDN文档-Classes 

　　本文旨在学习总结，如有不足之处，敬请评论区补足或提出疑问，本人邮箱： younger_17@163.com

　　顺便寻找前端开发交流的伙伴！

　　

 

 

 

 

  sayName() {
    ChromeSamples.log('Sup! My name is ', this.name + '.');
    super.sayHistory();
  }