javascript 类_如何使用JavaScript类

javascript 类

In 2015 the ECMAScript 6 (ES6) standard introduced classes.

2015年,ECMAScript 6(ES6)标准引入了类。

JavaScript has a quite uncommon way to implement inheritance: prototypical inheritance. Prototypal inheritance, while in my opinion great, is unlike most other popular programming language’s implementation of inheritance, which is class-based.

JavaScript有一种非常不常见的实现继承的方法:原型继承。 在我看来, 原型继承虽然很棒,但与大多数其他流行的编程语言基于类的继承不同。

People coming from Java or Python or other languages had a hard time understanding the intricacies of prototypal inheritance, so the ECMAScript committee decided to sprinkle syntactic sugar on top of prototypical inheritance so that it resembles how class-based inheritance works in other popular implementations.

来自Java或Python或其他语言的人很难理解原型继承的复杂性,因此ECMAScript委员会决定在原型继承的基础上撒上语法糖,以使其类似于基于类的继承在其他流行实现中的工作方式。

This is important: JavaScript under the hood is still the same, and you can access an object prototype in the usual way.

这很重要:底层JavaScript仍然相同,并且您可以以通常的方式访问对象原型。

类定义 (A class definition)

This is how a class looks.

这是一个类的外观。

class Person {
  constructor(name) {
    this.name = name
  }

  hello() {
    return 'Hello, I am ' + this.name + '.'
  }
}

A class has an identifier, which we can use to create new objects using new ClassIdentifier().

一个类具有一个标识符,我们可以使用它使用new ClassIdentifier()创建新对象。

When the object is initialized, the constructor method is called, with any parameters passed.

初始化对象时,将调用传递任何参数的constructor方法。

A class also has as many methods as it needs. In this case hello is a method and can be called on all objects derived from this class:

一个类还具有所需的许多方法。 在这种情况下, hello是一种方法,可以在派生自此类的所有对象上调用:

const flavio = new Person('Flavio')
flavio.hello()

类继承 (Class inheritance)

A class can extend another class, and objects initialized using that class inherit all the methods of both classes.

一个类可以扩展另一个类,并且使用该类初始化的对象将继承这两个类的所有方法。

If the inherited class has a method with the same name as one of the classes higher in the hierarchy, the closest method takes precedence:

如果继承的类具有与层次结构中较高级别的类之一名称相同的方法,则最接近的方法优先:

class Programmer extends Person {
  hello() {
    return super.hello() + ' I am a programmer.'
  }
}

const flavio = new Programmer('Flavio')
flavio.hello()

(the above program prints “Hello, I am Flavio. I am a programmer.”)

(上面的程序打印“ 您好,我是Flavio。我是程序员。 ”)

Classes do not have explicit class variable declarations, but you must initialize any variable in the constructor.

类没有显式的类变量声明,但是必须在构造函数中初始化任何变量。

Inside a class, you can reference the parent class calling super().

在类内部,您可以引用父类调用super()

静态方法 (Static methods)

Normally methods are defined on the instance, not on the class.

通常,方法是在实例上定义的,而不是在类上定义的。

Static methods are executed on the class instead:

静态方法改为在类上执行:

class Person {
  static genericHello() {
    return 'Hello'
  }
}

Person.genericHello() //Hello

私人方法 (Private methods)

JavaScript does not have a built-in way to define private or protected methods.

JavaScript没有内置的方法来定义私有或受保护的方法。

There are workarounds, but I won’t describe them here.

有解决方法,但在此不再赘述。

吸气剂和二传手 (Getters and setters)

You can add methods prefixed with get or set to create a getter and setter, which are two different pieces of code that are executed based on what you are doing: accessing the variable, or modifying its value.

您可以添加以getset开头的方法来创建getter和setter,这是基于您正在执行的操作的两个不同的代码段:访问变量或修改其值。

class Person {
  constructor(name) {
    this._name = name
  }

  set name(value) {
    this._name = value
  }

  get name() {
    return this._name
  }
}

If you only have a getter, the property cannot be set, and any attempt at doing so (outside of the constructor, which sets the value when you initialize a new object with this class) will be ignored:

如果只有getter,则无法设置该属性,并且这样做的任何尝试(在构造函数之外,当您使用此类初始化新对象时都会设置值)将被忽略:

class Person {
  constructor(name) {
    this._name = name
  }

  get name() {
    return this._name
  }
}

If you only have a setter, you can change the value but not access it from the outside:

如果只有二传手,则可以更改值,但不能从外部访问它:

class Person {
  constructor(name) {
    this._name = name
  }

  set name(value) {
    this._name = value
  }
}

Getters and setters are very useful when you want to execute some code upon changing the property value, or if you want to create a “computed” property. You can alter the values you return by using a getter.

当您想在更改属性值时执行一些代码,或者要创建“计算”属性时,getter和setter很有用。 您可以使用getter更改返回的值。

You can also run some code, like logging to the console or to a file when a value is changed.

您还可以运行一些代码,例如在更改值时登录到控制台或文件。

翻译自: https://flaviocopes.com/javascript-classes/

javascript 类

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值