ES6深入浅出 Classes

array_huang 发布于2019-08-23 10:45 / 2252人阅读

摘要：一步，一步前進一步深入浅出之。是构造函数，可在里面初始化我们想初始化的东西。类静态方法大多数情况下，类是有静态方法的。中添加类方法十分容易类方法和静态方法是同一个东西在的语法中，我们可以使用关键字修饰方法，进而得到静态方法。

一步，一步前進の一步

ES6深入浅出之Classes。翻译的同时乱加个人见解，强烈推荐阅读原作者的文章，言简意赅。es6-classes-in-depth

类语法本质

JS 是基于原型的语言，那么ES6里的classes是什么东西？classes 是原型继承的语法糖------主要是用来勾引不太理解 JS 原型链语法的其他语言使用者。ES6有好多新的特性本质上就是语法糖，classes也不例外。我会向你证明 classes 是语法糖，因为classes 的语法很容易使用 ES5的语法实现出来，classes 并不是JS 语法的一个变革，它存在的目的仅仅是使原型继承变得简单。

ES5和 ES6的类实现对比

那么，我假设你已经很好的理解了原型继承的原理,毕竟你已经在阅读ES6这么高级的东西了。下面代码定义车的类，可被实例化,加油,移动。

function Car () {
  this.fuel = 0;
  this.distance = 0;
}

Car.prototype.move = function () {
  if (this.fuel < 1) {
    throw new RangeError("Fuel tank is depleted")
  }
  this.fuel--
  this.distance += 2
}

Car.prototype.addFuel = function () {
  if (this.fuel >= 60) {
    throw new RangeError("Fuel tank is full")
  }
  this.fuel++
}

使用下面的代码使车跑起来吧：

var car = new Car()
car.addFuel()
car.move()
car.move()
// <- RangeError: "Fuel tank is depleted"

上面的代码都是 ES5，那么 ES6该如何实现呢？类声明的书写和对象的写法十分相似，花括号前面只多了 class Name,类方法我们将采用方法名简写的形式。contrustor 是构造函数，可在里面初始化我们想初始化的东西。

class Car {
  constructor () {
    this.fuel = 0
    this.distance = 0
  }
  move () {
    if (this.fuel < 1) {
      throw new RangeError("Fuel tank is depleted")
    }
    this.fuel--
    this.distance += 2
  }
  addFuel () {
    if (this.fuel >= 60) {
      throw new RangeError("Fuel tank is full")
    }
    this.fuel++
  }
}

需要强调的是：类和对象声明写起来是很像，但是在类中属性及方法间是不允许使用逗号分隔的，分号倒是没问题。

类静态方法

大多数情况下，类是有静态方法的。回想一下我们日常使用最多的数组，常见的实例方法有.filter、 .reduce、 .map,类方法有Array.isArray。ES5中添加类方法十分容易(类方法和静态方法是同一个东西)：

// es5
function Car () {
  this.topSpeed = Math.random()
}
Car.isFaster = function (left, right) {
  return left.topSpeed > right.topSpeed
}

在 ES6的 class 语法中，我们可以使用static关键字修饰方法，进而得到静态方法。

class Car {
  constructor () {
    this.topSpeed = Math.random()
  }
  static isFaster (left, right) {
    return left.topSpeed > right.topSpeed
  }
}

那么既然说classes是语法糖，那我们同样可以使用如下方式实现静态方法：

class Car {
  constructor () {
    this.topSpeed = Math.random()
  }
}
Car.isFaster = (left, right) => {
    return left.topSpeed > right.topSpeed;
}

目前 ES6还不支持使用 static 来修饰属性，若想获得类的静态属性，该如何实现？请参考上面代码，给出答案，可以在评论区做答?
提供另一种思路使用 get、set实现静态属性，try it.

类继承

classes不仅使类声明变得简单，它让继承变得更加可读，容易。ES6中的 extends支持从基类衍生出更具个性化的子类。众所周知，特斯拉较其他汽车比较省油,特斯拉是啥。那么，我们基于上面的 Car来实现Tesla类。下面的代码的意思是 Tesla 类继承 Car,并复写 Car 爸爸的 move 方法进而行驶更远的距离。

class Tesla extends Car {
  move () {
    super.move()
    this.distance += 4
  }
}

var car = new Tesla()
car.addFuel()
car.move()
console.log(car.distance)

关于继承，有一点需要特别注意，当子类想要实现特有的构造函数 constructor 时，首行必须使用 super(...)调用父类的构造函数，先得到父类的this作为自己的 this。此处的理论有一点点深，有机会再讲。

class Car {
  constructor (speed) {
    this.speed = speed
  }
}
class Tesla extends Car {
  constructor (speed) {
    // 不调用 super 的话，会报错
    super(speed * 2)
    // 做其他初始化工作 。。。
  }
}

知识点总结

classes 只是语法糖，使类声明和继承书写变的容易

子类 constructor 要么有，要么首行调用super

静态方法static修饰

子类会覆盖父类的同名方法，但是可以使用 super.xxxx 方法调用父类方法。

一步本人作了个决定，把Nicolás Bevacqua es6-in-depth都给翻译了，如果侵权了我就立刻删除

私有云混合云 Classes ES6 es6-系列 ES6入门

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/96655.html

React类，方法绑定（第三部分）

摘要：使用箭头函数和构造函数当方法被调用时，会保留上下文。我们能使用这个特征用下面的方法在构造函数中重定义函数。在调用方法的方使用函数绑定语法你也可以直接在非构造函数里面的里面直接使用函数绑定。这是React和ECMAScript6／ECMAScript7结合使用系列文章的第三篇。下面是所有系列文章章节的链接： React 、 ES6 - 介绍（第一部分） React类、ES7属性初始...

livem 2019-08-20 17:59 评论0 收藏0
深入理解 JavaScript 中的 class

摘要：在规范中，引入了的概念。使用中的声明一个类，是非常简单的事。中面向对象实例化的背后原理，实际上就是原型对象。与区别理解上述原理后，还需要注意与属性的区别。实际上，在中，类继承的本质依旧是原型对象。在 ES6 规范中，引入了 class 的概念。使得 JS 开发者终于告别了，直接使用原型对象模仿面向对象中的类和类继承时代。但是JS 中并没有一个真正的 class 原始类型， clas...

Vicky 2019-08-20 14:16 评论0 收藏0
ES6学习笔记之Classes

摘要：静态方法静态方法直接用类名来调用就可以了，熟悉面向对象编程的同学应该都不陌生。在中，一个类不能继承多个类。为了解决这个问题，可以使用。当类表达式有命名时，该命名仅作为类内部使用。本文同步自我得博客：http://www.joeray61.com 简介 ES6的Classes是在原型链继承的基础上，由语言本身提供的语法糖，并非是一种全新的继承模式。这使得Javascript有一种更加简...

MSchumi 2019-08-19 18:15 评论0 收藏0
es6的classes

摘要：的构造方法我会跑宋泽打印宋泽。我会跑去读书宋泽大胖获取加赋值。和的方法名相同，而且可以同名方法重载方法覆盖我会跑宋泽我一直在跑老师男我会跑我一直在跑注释虽然子类继承了父类的方法，但是子类会把父类的方法给覆盖掉，这个就是方法覆盖。 es6的classes 构造方法： class Student{ constructor (name,age){ this.name=...

NickZhou 2019-08-20 18:05 评论0 收藏0
Vue.js 的注意事项与技巧

摘要：需要注意的是，同样的行为也适用于。这意味着我们必须重新绑定每个事件。组件的由调用它的父组件提供，这意味着所有事件都应该与父组件相关联。原文链接：Vue.js — Considerations and Tricks showImg(https://segmentfault.com/img/bVbqHOd?w=1600&h=1599); Vue.js 是一个很棒的框架。然而，当你开始构建...

lsxiao 2019-08-26 13:39 评论0 收藏0