编程语言
首页 > 编程语言> > JavaScript真正的面向对象——Class

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();
  }

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