首页 > 编程语言> 文章详细

JavaScript真正的面向对象——Class

2021-05-09 02:03:26 阅读：234 来源： 互联网

标签：Polygon class JavaScript 多态 sayName 面向对象 super Class name

　　今天复习了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();
  }

标签：Polygon,class,JavaScript,多态,sayName,面向对象,super,Class,name
来源： https://www.cnblogs.com/young17/p/14747044.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

JavaScript真正的面向对象——Class