JavaScript 定义类的方法：ES5 构造函数与 ES6 Class 详解

本文详细介绍 JavaScript 中定义类的具体实现方式，供读者参考学习。

ES5 标准下的类定义方法

首先介绍 ES5 标准下的类定义方式。

<script>
function Point(x,y){
  this.x=x;
  this.y=y;
}
Point.prototype.toString=function(){
  return '('+this.x+', '+this.y+')';
}
var point=new Point(1,2);
console.log(point);
</script>

代码运行结果如下。

上述采用构造函数与原型混合的模式定义类，旨在使每次通过 new 关键字创建新实例时，能够共享方法，避免为每个实例重复创建 function 函数。因此，仅将函数属性定义在原型对象中，而其余属性均在构造函数内部定义。

ES6 简化类的定义方法

在 ES6 标准中，类的定义方法得到了简化。

<script>
class Point{
   constructor(x,y){
    this.x=x;
    this.y=y;
    }
    toString(){
     return '('+this.x+', '+this.y+')';
    }
}
let point=new Point(3,4);
console.log(point);
</script>

代码运行结果如下。

需要注意：类名的首字母必须大写。

另外，原文代码中 class Point(x,y) 这种定义方式会导致运行错误，本文已对此进行修正。

感兴趣的朋友可以使用在线 HTML/CSS/JavaScript 代码运行工具：http://tools.jb51.net/code/HtmlJsRun 测试上述代码的运行效果。

更多关于 JavaScript 相关内容感兴趣的读者可查看本站专题：《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》。

希望本文所述对大家进行 JavaScript 程序设计有所帮助。