JavaScript创建类的五种常见方式详解

JavaScript创建类的五种常见方式详解

本文详细解析了JavaScript中创建类的几种典型方法，旨在为开发者提供实用的参考与指导。

JavaScript本质上是一种基于对象的语言，绝大多数事物均可视为对象。尽管它并非严格意义上的面向对象编程（OOP）语言，因为其早期语法中缺失Class关键字，但ES6标准引入了Class概念作为对象的模板，从而弥补了这一不足。

在实际项目开发中，JavaScript的面向对象开发需求日益增长，这要求开发者掌握在JS中创建类并实例化对象的技术。下文将逐一介绍JS中创建类的几种主流方式。

工厂方式与构造器方式

1. 工厂方式

//通过工厂方式创建对象，先定义一个工厂方法
function createObj(){
  var obj = new Object();
  obj.name="xxx";
  obj.say=function(){
    alert("我是xxx");
  }
  return obj;
}
//调用工厂方法创建对象:
var obj1 = createObj();
//也可以用这种形式
function createObj(){
  var obj = {}; //这样生成对象
  obj.name="xxx";
  obj.say=function(){
    alert("我是xxx");
  }
  return obj;
}
var obj1 = createObj();

该方式的主要缺陷在于，每次通过工厂方法创建对象时，都会重新创建该对象的属性（如name）和方法（如say），导致内存资源的浪费。

2. 构造器方式

//创建一个构造器，构造函数首字母大写
function Obj(){
  this.name="xxx";
  this.say=function(){
    alert("我是xxx");
  };
}
//利用构造器，通过new关键字生成对象
var obj1=new Obj();

这是最基础的实现方式，但它同样存在与工厂方式相同的内存效率问题。

原型方式与联合方式

3. 原型方式

//用空函数创建一个类
function Obj(){
}
//在类的原型链上添加属性和方法
Obj.prototype.name="xxx";
Obj.prototype.say=function(){
  alert("我是xxx");
}
//生成对象
var obj1=new Obj();

此方式的缺点在于处理引用属性时：若修改一个对象的引用属性，其他共享该原型的对象也会受到影响，因为所有引用属性都指向同一内存地址。

4. 原型/构造联合方式

//用构造函数定义对象的非函数属性
function Obj(name){
  this.name=name;
  this.arr=new Array('a','b');
}
//用原型方式定义对象的方法
Obj.prototype.say=function(){
  alert("我是xxx");
}
//生成对象
var obj1 = new Obj('xxx');

这是目前应用最广泛的创建类和对象的方式，它通过将方法定义在原型上、属性定义在构造函数中，实现了封装的优化。

动态原型方式与实例化原理

5. 动态原型方式

//动态原型方式和原型/构造混合方式的原理相似，唯一的区别就是赋予对象方法的位置
function Person(name, sex) {
  this.name = name;
  this.sex = sex;
  if (typeof this.say != "function") {
    Person.prototype.say = function () {
      alert(this.name);
    }
  }
}
var man =new Person ("凯撒", "男");
man.say();//凯撒

动态原型模式将所有信息封装在构造函数中。其核心逻辑是：仅在say方法不存在时，才将其添加到原型中。该判断逻辑仅在初次调用构造函数时执行。

实例化obj对象的过程包含以下三个关键步骤：

1. 创建obj对象：

obj=new Object();

2. 将obj的内部__proto__属性指向构造它的函数Obj的prototype。此时，obj.constructor等于Obj.prototype.constructor，进而使得obj.constructor.prototype指向Obj.prototype（即obj.constructor.prototype===Obj.prototype）。需要注意的是，obj.constructor.prototype与内部的__proto__是两个不同的概念。实例化对象时使用的是__proto__，obj本身没有prototype属性，但拥有内部的__proto__，通过__proto__可以访问原型链上的原型属性和原型方法。

3. 将obj作为this参数调用构造函数Obj，从而设置成员（包括对象属性和对象方法）并完成初始化。

当上述三个步骤完成后，obj对象与构造函数Obj之间不再存在直接联系。此时，即使构造函数Obj后续添加任何新成员，也不会影响已经实例化的obj对象。

如需进一步了解JavaScript相关知识，建议查阅本站专题：《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》。

希望本文的阐述能对您的JavaScript程序设计工作有所帮助。