为什么要使用ES6类? [英] Why should I use ES6 classes?

查看:164
本文介绍了为什么要使用ES6类?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述



由于我了解如何使用函数和WebComponent,所以。我没有看到很多好处。



我不知道使用类的好处是什么。我读到public / private / static将成为ES7的一部分。所以我目前看不到使用它。



此外,类是OOP的概念还是仍然是JavaScript对象概念?这是否意味着我无法使用 .prototype 修改它?或者它只是相同的对象,但是两种不同的方式来声明它。



有关于速度的好处吗?如果您有大型应用程序,如Big Java应用程序,可能更容易维护/理解。



tl; dr:问题是标题。

解决方案

这几乎完全取决于你是否。新的的东西大多只是语法糖。 (但是,你知道那种好的糖)。


此外,将会是一个OOP的概念,或者它仍然是一个 JavaScript对象概念'?


我们一直拥有相同的原型继承,只需更清晰,更方便的语法和派生自 Array 错误(您不能在ES5及更早版本中)。


这是否意味着我无法使用.prototype修改它?


不,您一旦创建了类,您仍然可以在类的构造函数上修改原型对象。例如,这是完全合法的:

  class Foo {
constructor(name){
this.name =名字
}

test1(){
console.log(test1:name =+ this.name);
}
}
Foo.prototype.test2 = function(){
console.log(test2:name =+ this.name);
};




有没有关于速度的好处?


通过为此提供一个特定的成语,我认为这是可能的,引擎可能能够做一个更好的工作优化。但是他们非常善于优化,我不会指望有显着差异。


为什么要使用ES6类? p>

您可以选择的原因:




  • p>语法更简单,更容易出错。


  • 更容易(而且更容易出错)使用新的语法来设置继承层次结构,而不是旧的。


  • class 没有使用 new 与构造函数的错误(如果这个不是一个构造函数抛出异常对于构造函数的有效对象)


  • 调用父原型的方法版本比旧的( super.method()而不是 ParentConstructor.prototype.method.call(this) Object.getPrototypeOf(Object。 getPrototypeOf(本))。您可以从 Array派生 $ / $ >(jQuery可能已经这样做了,如果Resig启动它是可能的)和错误




这是一个层次结构的语法比较:

  // ES6 
class Person {
constructor(first,last){
this.first = first;
this.last = last;
}

personMethod(){
// ...
}
}

类员工扩展Person {
构造函数(first,last,position){
super(first,last);
this.position = position;
}

employeeMethod(){
// ...
}
}

class Manager扩展Employee {
构造函数(first,last,position,department){
super(first,last,position);
this.department = department;
}

personMethod(){
const result = super.personMethod();
// ...使用`result`为某事...
返回结果;
}

managerMethod(){
// ...
}
}

vs。

  // ES5 
var Person = function(first,last){
if(!(this instanceof Person)){
throw new Error(Person is a constructor function,use new with it);
}
this.first = first;
this.last = last;
};

Person.prototype.personMethod = function(){
// ...
};

var Employee = function(first,last,position){
if(!(this instanceof Employee)){
throw new Error(Employee is a constructor function,use新的);
}
Person.call(this,first,last);
this.position = position;
};
Employee.prototype = Object.create(Person.prototype);
Employee.prototype.constructor = Employee;
Employee.prototype.employeeMethod = function(){
// ...
};

var Manager = function(first,last,position,department){
if(!(this instanceof Manager)){
throw new Error(Manager是一个构造函数,用新的);
}
Employee.call(this,first,last,position);
this.department = department;
};
Manager.prototype = Object.create(Employee.prototype);
Manager.prototype.constructor = Manager;
Manager.prototype.personMethod = function(){
var result = Employee.prototype.personMethod.call(this);
// ...使用`result`为某事...
返回结果;
};
Manager.prototype.managerMethod = function(){
// ...
};

正如你所看到的,很多重复和冗长的东西,容易弄错和无聊重新输入(这就是为什么我写了一个脚本来做到这一点),当天回来了。 p>

I have many question about ES6 classes.

Since i understand how to use function and WebComponent, React & so. I didn't see many benefit using it.

I wonder what's the benefit of using classes. I read that public/private/static will be part of ES7. So i see no point using it currently.

Moreover, will class be a concept of OOP or it still be a 'javascript object concept'? Does it mean i can't modify it using .prototype ? Or is it just the same object but 2 different way to declare it.

Is there a benefits about the speed? Maybe it's easier to maintain/understand if you have a big application like Big Java app ?

tl;dr : The question is in the title.

解决方案

It's (almost) entirely up to you whether you do. The new class stuff is mostly just syntactic sugar. (But, you know, the good kind of sugar.)

Moreover, will class be a concept of OOP or it still be a 'javascript object concept'?

It's the same prototypical inheritance we've always had, just with cleaner and more convenient syntax and the ability to derive from Array and Error (which you couldn't in ES5 and earlier).

Does it mean i can't modify it using .prototype ?

No, you can still modify the prototype object on the class's constructor once you've created the class. E.g., this is perfectly legal:

class Foo {
    constructor(name) {
        this.name = name;
    }

    test1() {
        console.log("test1: name = " + this.name);
    }
}
Foo.prototype.test2 = function() {
    console.log("test2: name = " + this.name);
};

Is there a benefits about the speed?

By providing a specific idiom for this, I suppose it's possible that the engine may be able to do a better job optimizing. But they're awfully good at optimizing already, I wouldn't expect a significant difference.

Why should I use ES6 classes?

Reasons you might choose to:

  • The syntax is simpler and less error-prone.

  • It's much easier (and again, less error-prone) to set up inheritance hierarchies using the new syntax than with the old.

  • class defends you from the common error of failing to use new with the constructor function (by having the constructor throw an exception if this isn't a valid object for the constructor).

  • Calling the parent prototype's version of a method is much simpler with the new syntax than the old (super.method() instead of ParentConstructor.prototype.method.call(this) or Object.getPrototypeOf(Object.getPrototypeOf(this)).method.call(this)).

  • You can derive from Array (jQuery would probably have done that, if it had been possible when Resig started it) and Error.

Here's a syntax comparison for a hierarchy:

// ES6
class Person {
    constructor(first, last) {
        this.first = first;
        this.last = last;
    }

    personMethod() {
        // ...
    }
}

class Employee extends Person {
    constructor(first, last, position) {
        super(first, last);
        this.position = position;
    }

    employeeMethod() {
        // ...
    }
}

class Manager extends Employee {
    constructor(first, last, position, department) {
        super(first, last, position);
        this.department = department;
    }

    personMethod() {
        const result = super.personMethod();
        // ...use `result` for something...
        return result;
    }

    managerMethod() {
        // ...
    }
}

vs.

// ES5
var Person = function(first, last) {
    if (!(this instanceof Person)) {
        throw new Error("Person is a constructor function, use new with it");
    }
    this.first = first;
    this.last = last;
};

Person.prototype.personMethod = function() {
    // ...
};

var Employee = function(first, last, position) {
    if (!(this instanceof Employee)) {
        throw new Error("Employee is a constructor function, use new with it");
    }
    Person.call(this, first, last);
    this.position = position;
};
Employee.prototype = Object.create(Person.prototype);
Employee.prototype.constructor = Employee;
Employee.prototype.employeeMethod = function() {
    // ...
};

var Manager = function(first, last, position, department) {
    if (!(this instanceof Manager)) {
        throw new Error("Manager is a constructor function, use new with it");
    }
    Employee.call(this, first, last, position);
    this.department = department;
};
Manager.prototype = Object.create(Employee.prototype);
Manager.prototype.constructor = Manager;
Manager.prototype.personMethod = function() {
    var result = Employee.prototype.personMethod.call(this);
    // ...use `result` for something...
    return result;
};
Manager.prototype.managerMethod = function() {
    // ...
};

As you can see, lots of repeated and verbose stuff there which is easy to get wrong and boring to retype (which is why I wrote a script to do it, back in the day).

这篇关于为什么要使用ES6类?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆