Translation Does JavaScript need classes?

Original: http://www.nczonline.net/blog/2012/10/16/does-javascript-need-classes/

Translator: In my year-long career, I've met people who call constructors a class, and others refer to the object literal as a class. It hurts me more than calling Firefox extensions a plugin. Here is a video of Brendan Eich to this year's jsconf.eu, which mentions classes.

Whether you like it or not, ECMAScript 6 will contain the new thing in class [1]. In JavaScript, the need for classes has always been polarized. Some people especially like JavaScript without classes, Because this is different from other languages. On the other hand, there are some people who dislike JavaScript without classes, because this is different from other languages. One of the most popular psychological hurdles for people who go from C + + or Java to JavaScript is that "there is no class in JavaScript," Some people have told me that this is one of the reasons why they don't like JavaScript or don't continue to learn JavaScript in depth.

JavaScript did not have a real class from the day it was invented, which caused confusion from the start. There are a lot of JavaScript books or articles that talk about classes, as if there were really classes in JavaScript. But actually, the class they're talking about is just some custom constructor, These functions can be used to construct some custom reference types. In JavaScript, the reference type is already the closest thing to the class. You should be familiar with the following code:

function Mycustomtype (value) {    this.property = value;} MyCustomType.prototype.method = function () {    return this.property;};

In many cases, this code is interpreted as declaring a MyCustomType class. But in fact, everything that the code does is simply declaring a MyCustomType function ,配合new运算符可以用它创建一个引用类型 MyCustomType的实例 . This function is not fundamentally different from other functions. Because other custom functions can also be used as constructors.

Such code does not seem to define a class at all, and there seems to be no connection between the defined constructor and the method on its prototype object. If you're new to JavaScript, you probably think this is a completely unrelated piece of code. But in fact, the two pieces of code are very closely related, It's just a far cry from the way the classes in other languages differ.

What is even more confusing is that when it comes to inheritance, most people think of terms like subclasses and superclass, and so on, which is only meaningful if there are real classes. In JavaScript, the code that implements inheritance is also verbose:

function Animal (name) {    this.name = name;} Animal.prototype.sayName = function () {    console.log (this.name);}; function Dog (name) {    Animal.call (this, name);} Dog.prototype = new Animal (null);D Og.prototype.bark = function () {    console.log ("woof!");};

Implementing inheritance requires two steps, creating constructors and overriding prototype objects, which is confusing.

In the first edition of JavaScript Advanced programming, I used the term "class". But from the feedback I received, it was confusing. So in the second edition, I replaced all of the classes with the type. It turns out that using the "type" This term can reduce a lot of confusion.

However, there is a more prominent problem: The syntax for defining a custom type is verbose, and it is more complex to implement inheritance between the two types. There is no easy way to invoke a method that is a super-type. It is painful to create and manage a custom type at this point, if you don't believe it, You can see how many JavaScript frameworks below use their own custom types and inherited methods:

• YUI – with Y.extend()来实现继承 . Using this method adds a " superclass"属性. [2] to the subtype
• Prototype – with Class.create()和 Object.extend()来处理对象和"类" . [ 3]
• Dojo – Use dojo.declare()和 dojo.extend() . [ 4]
• MooTools – There is a custom type Class,可以用来定义和扩展"类" . [ 5]

So many JavaScript frameworks have their own solutions, which is obviously very confusing. JavaScript developers need a better syntax to implement this functionality.

The classes in ECMAScript 6 don't really have anything new, just add a layer of syntactic sugar to the pattern you're already familiar with. Take a look at the following example:

Class Mycustomtype {    Constructor (value) {        this.property = value;    }    Method () {        return this.property;    }}

The class definition in this ECMAScript 6 is actually another way of writing the Mycustomtype example above in this article. An object instance created with this class is exactly the same as an object instance created with a constructor. The only difference is that the former has a more compact syntax. Let's look at the inheritance:

Class Animal {    constructor (name) {        this.name = name;    }    Sayname () {        console.log (this.name);    }} Class Dog extends Animal {    constructor (name) {        super (name);    }    Bark () {        console.log ("woof!");}    }

The actual effect of this example is also equivalent to the previous type of inheritance. Just a complex implementation step is a simple one extends关键字代替了 . You can also use it directly in the class definition. super(),无需明确指出超类型的构造函数

The classes in ECMAScript 6 are based on the JavaScript pattern you already know. The principle of implementing inheritance is also the same as before (based on the prototype chain, calling the super-type constructor), the method is added on the prototype, and the property is declared in the constructor. The real difference is only one: you can adaption fewer words.

So, if you still disagree with the introduction of ECMAScript 6, you can imagine that the class being introduced is not something new, and it doesn't fundamentally change the way JavaScript works. But I personally recommend using keywords type而不是 class .

So does JavaScript really need classes? The answer is no, but JavaScript does need a cleaner way to create a custom type. This happens to be what the "class" in ECMAScript 6 is going to do. If this "class" It's good to help developers from other languages turn to JavaScript more easily.

Reference

1. maximally minimal classes (ECMA)
2. YUI Extend () (yuilibrary)
3. Prototype Classes and Inheritance (Prototype)
4. Creating and enhancing Dojo Classes (SitePen)
5. MooTools Class (MooTools)

Translation Does JavaScript need classes?