ECMA6是否废除了使用原型语法作为JavaScript的最佳实践?

时间:2015-05-28 22:35:39

标签: javascript object ecmascript-6

实施例,

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes

  

ECMAScript 6中引入了JavaScript类,并且是语法   在JavaScript现有的基于原型的继承上加糖。该   类语法不引入新的面向对象的继承   模型到JavaScript。 JS类提供了更简单和更清晰的方法   用于创建对象和处理继承的语法。

这是否意味着我应该在我的开发中停止使用语言术语prototype,当ECMA6是最终版时,使用新的语法糖就这样制作。我相信他们是相同的(来自同一页):

// unnamed
var Polygon = class {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
};

// named
var Polygon = class Polygon {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
};

另一方面,我看到了,

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Method_definitions

var obj = {
  foo() {},
  bar() {}
};

这一切如何融合在一起?我将如何处理var myObj?可以像其他语言一样使用构造函数和方法foo()bar()吗?这是允许的吗?

var myObj = class myObj {
 contructor(height, width){
     this.height=height;
     this.width=width;
 },
  foo(this.height) {alert('the height is ' + this.height)},
  bar(this.height, this.width) {
      alert('the width is ' + this.width);
      var something = this.height + 5;
      alert('the height is : ' + something);

  }
};

var determine_something = new myObj(50,60);
determine_something.bar;
determine_something.foo;

(这在我试过的ECMA6沙箱中不起作用)

这没有错误,但this.height未定义:

var myObj = class {
 contructor(height, width){
     this.height=height;
     this.width=width;
 }
  foo() {
    alert('the height is ' + this.height);
  }

};

var determine_something = new myObj(50,60);
determine_something.foo();

编辑:如果我不使用prototype,并且我想添加新方法,我该如何使用新语法?

1 个答案:

答案 0 :(得分:1)

以下是修复/优化版本:

class MyObj {
    contructor(height, width){
        this.height = height;
        this.width = width;
    }

    foo() {
        alert(`the height is ${this.height}`)
    }

    bar() {
        alert(`the width is ${this.width}`);
        const something = this.height + 5;
        alert(`the height is : ${something}`);
    }
};

const determine_something = new MyObj(50,60);
determine_something.bar();
determine_something.foo();