• 微信公众号:美女很有趣。 工作之余,放松一下,关注即送10G+美女照片!

es6 快速入门 系列 —— 类 (class)

互联网 diligentman 11个月前 (03-05) 57次浏览

其他章节请看:

es6 快速入门 系列

类(class)是 javascript 新特性的一个重要组成部分,这一特性提供了一种更简洁的语法和更好的功能,可以让你通过一个安全、一致的方式来自定义对象类型。

试图解决的问题

es5 及早期版本中没有类的概念,通常会编写类似下面这样的代码来自定义类

// 自定义类的思路是:首先创建一个构造函数,然后定义一个方法并赋值给构造函数的原型function Rectangle(length, width){ this.length = length; this.width = width;}Rectangle.prototype.getArea = function(){ return this.length * this.width}let rect = new Rectangle(2, 3)console.log(rect.getArea()) // 6console.log(rect instanceof Rectangle) // true

如果还需要实现继承,可能会这么实现:

// 定义类:Rectanglefunction Rectangle(length, width){ this.length = length; this.width = width;}Rectangle.prototype.getArea = function(){ return this.length * this.width}// 定义类:Squarefunction Square(length){ // 对象冒充 Rectangle.call(this, length, length)}// 指定 Square 的原型Square.prototype = Object.create(Rectangle.prototype, { constructor: {  value: Square,  enumerable: true,  writable: true,  configurable: true }});let square = new Square(3)console.log(square.getArea()) // 9 - getArea() 方法从父类继承console.log(square instanceof Square) // trueconsole.log(square instanceof Rectangle) // true

通过自己模拟类、模拟继承,实现起来比较复杂,也非常容易出错。

解决方法

es6引入类(class),让类的创建和继承都更加容易。下面我们重写 Rectangle 的例子:

// 通过 class 定义一个类class Rectangle{ constructor(length, width){  this.length = length;  this.width = width; } // 方法直接写在 class 中 getArea(){  return this.length * this.width }}// 通过 extends 关键字指定类继承的函数,原型会自动调整class Square extends Rectangle{ constructor(length){  // 通过调用 super() 方法即可访问基类的构造函数  super(length, length) }}let square = new Square(3)console.log(square.getArea()) // 9console.log(square instanceof Square) // trueconsole.log(square instanceof Rectangle) // true

这个版本比我们自定义的要简单很多,如果你先前对其他语言中的继承语法有所了解,那么你应该会觉得很亲切。

有关类(class)的具体使用、其他特性,都可以在下面的补充章节中找到答案

补充

类的创建

类和函数都存在声明形式和表达式形式。

声明类,首先编写 class 关键字,接着是类的名字,其他部分的语法类似对象字面量的简写形式,但类的各元素之间不需要使用逗号。就像这样:

// class 类名class People{ constructor(name){  this.name =name; } // 不需要逗号 sayName(){  console.log(this.name) }}let people = new People('aaron')people.sayName() // aaronconsole.log(typeof People) // function {1} - People 其实还是一个函数

类的表达式语法:

// 直接将一个类赋值给变量 Peoplelet People = class{ constructor(name){  this.name =name; } sayName(){  console.log(this.name) }}let people = new People('aaron')people.sayName() // aaron

类(class)只是自定义类的一个语法糖。用 class 声明的类是一个函数,那么将这个函数赋值给一个变量,当然没问题。

类是一等公民

在程序中,一等公民是指可以传入函数,可以从函数返回,也可以赋值给变量。javascript 函数是一等公民,这是 javascript 中的一个独特之处,es6 也把类(class)设计成了一等公民。例如,将类(class)作为参数传入函数:

function createObject(classDef){ return new classDef()}let obj = createObject(class People{ sayName(){  console.log('aaron') }})obj.sayName() // aaron

继承

在”解决方法“章节中,我们已经学会用 class 创建类,通过 extends 关键字指定类继承的函数,以及使用 super() 调用基类的构造函数。

当使用 super() 时切记以下几个关键点

  • 只可以在派生类(使用 extends 声明的类)的构造函数中使用 super(),否则会导致程序抛出错误
  • 在构造函数中访问 this 之前,一定要调用 super(),它负责初始化 this,如果在调用 super() 之前访问 this 会导致程序报错
  • 如果不想调用 super(),唯一的方法是让构造函数返回一个对象,否则也会导致程序报错
class A{}class B extends A{ constructor(){   }}let b = new B() // 报错 - 没有调用super()

内建对象的继承

现在可以通过继承创建自己的特殊数组。请看下面:

class MyArray extends .........

展开阅读全文

举报

打赏

0


0 收藏

微信
QQ
微博

分享

作者的其它热门文章

力扣数据库题目176第二高的薪水
八大排序算法-初学笔记
JavaSE 基础大纲
Virtual DOM 简直就是挥霍


程序员灯塔
转载请注明原文链接:es6 快速入门 系列 —— 类 (class)
喜欢 (0)