new myFunction()vs new myClass()

时间:2017-03-21 22:17:00

标签: javascript class oop

我一直在用JavaScript研究OOP,我在MDN上看到了这些笔记。

功能语法

之前我创建了一些类,但我使用的语法一直在创建一个函数。见下文。

function myFunction(myProp1, myProp2)
{
    // see if set, otherwise use the default value (after the colon)
    myProp1 = typeof myProp1 !== "undefined" ? myProp1 : 1;
    myProp2 = typeof myProp2 !== "undefined" ? myProp2 : 2;

    // simple function
    this.doSomething = function ()
    {
        return myProp1 + myProp2;
    }
}
var myObj = new myFunction(2, 4);
myObj.doSomething(); // returns 6

类语法

今天我发现可以使用以下代码实现相同目的。

class myClass
{
    constructor(myProp1, myProp2)
    {
        // see if set, otherwise use the default value (after the colon)
        this.myProp1 = typeof myProp1 !== "undefined" ? myProp1 : 1;
        this.myProp2 = typeof myProp2 !== "undefined" ? myProp2 : 2;
    }

    // simple function
    doSomething()
    {
        return this.myProp1 + this.myProp2;
    }
}
var myObj = new myClass(2, 4);
myObj.doSomething(); // returns 6

现在就是问题

是否存在真正的差异,或者仅仅是我在使用哪种方法创建新对象时的品味差异?

修改
为了澄清,我将在下面提出一些问题。

问题:

  1. @MasterBob提到了支持。所有浏览器都不支持class方式吗?如果没有,那么不支持哪些浏览器?
  2. 继承。这两个版本是继承不同的属性还是完全相同?

4 个答案:

答案 0 :(得分:2)

没有太多差异,但这里有一些:

  1. class myClass extends myClass2
  2. 现在,这可能不是那么有问题,因为有myFunction.prototype = Object.create(myFunction2);,但是,它可能有点复杂。

    1. 浏览器支持。
    2. ECMAScript 6引入了类,但构造函数有多长时间了?当然,相当长的一段时间。有些浏览器可能不支持类。

      所以,总而言之,在我看来,你应该使用构造函数来支持浏览器。但是如果你要在遥远的未来某个时候编写代码 - 课程更整洁,更容易阅读。

答案 1 :(得分:1)

引用MDN

  

ECMAScript 2015中引入的JavaScript类是语法糖   通过JavaScript现有的基于原型的继承。

进一步说

  

类语法没有向JavaScript引入新的面向对象的继承模型

我认为考虑到这一点,我们可以说这只是品味的差异,至少取决于

  

ECMAScript 2015(第6版,ECMA-262)

答案 2 :(得分:1)

我发现的一个区别是,使用旧语法扩展像Promise这样的内置类是不可能的,但我认为使用新语法可以实现。我不确定它目前的支持情况。此问题中的更多详细信息:Extending a Promise in Javascript

答案 3 :(得分:0)

存在一些差异,这不仅仅是品味问题。两者之间最重要的区别:您可以忘记在第一个示例中使用new,第二个示例则需要它。