JavaScript类/构造函数vs定义函数

JavaScript Class/Constructor vs Definition as Function

本文关键字：定义 函数 vs 构造函数 JavaScript      更新时间：2023-09-26

正在努力寻找相关文档。我之前在JavaScript中设计了一个类似这样的类:

class Polygon {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
  area = function() { 
    return this.height * this.width; 
  }
}

它不能在JSFiddle上工作，有人告诉我我需要这样做:

var Polygon = function(height, width) {
  this.height = height;
  this.width = width;
  this.area =  function() { return this.height * this.width; }
}

我看到有不止一种方法可以做到这一点，我想知道这是否类似于c++，你可以做…Polygon *myPoly = new Polygon(3,4);创建一个指针，而不是Polygon myPoly(3,4);或者仅仅是风格上的问题，如果是这样，你能解释一下为什么其中一个不能在JSFiddle上工作，而另一个可以吗?

您的第一个示例语法无效。正确的写法是:

class Polygon {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
  area() {
    return this.height * this.width;
  }
}

如果你使用的是支持类的浏览器，这应该可以在JSFiddle中工作，但是有一些浏览器仍然不支持(后面会有更多)。

关于两种写法之间的区别，有两件事正在发生。

首先，JavaScript是一种非常灵活的语言，通常有几十种方法来完成你想做的任何事情。

第二，class语法是一个相当新的JavaScript特性，并不是所有广泛使用的浏览器(特别是所有版本的Internet Explorer)都完全支持它。在表面之下，class实际上只是用于创建第二个示例中所示的可构造对象的"语法糖"，因此这两个代码示例的最终结果将或多或少相同。

所以要回应你的c++类比，不，你提供的两个c++代码示例做了非常不同的事情，而这两个示例产生几乎相同的结果。要获得几乎完全相同的结果，您可以将第一个示例更改为:

class Polygon {
  constructor(height, width) {
    this.height = height;
    this.width = width;
    this.area = function () { return this.height * this.width; };
  }
}

或者将第二个例子改为:

var Polygon = function(height, width) {
  this.height = height;
  this.width = width;
};
Polygon.prototype.area = function() { return this.height * this.width; };

您需要从var area =…

get area() { return this.height * this.width; }
https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Classes

https://jsfiddle.net/dwahlin/o93Lm0rc/

相关文章：