JavaScript构造器模式详解:从基础到原型优化

作者:代码拾荒时间:2026-10-22 09:29:46浏览:268

本文深入解析JavaScript中的构造器模式,介绍三种对象创建方式及属性方法设置技巧。通过对比基础构造器与原型构造器的实现,揭示函数共享与继承问题,并展示如何利用Prototype特性优化对象实例,提升代码效率与可维护性。

JavaScript构造器模式概述

本文详细解析JavaScript中的构造器模式,旨在为开发者提供实用的参考与学习素材。

在传统面向对象编程语言中,构造器(或构造函数)是一种用于初始化对象的特殊方法。由于JavaScript中万物皆对象,因此对象构造器的概念在JS开发中尤为常见且重要。

对象构造器的主要功能是创建特定类型(Class)的对象实例,并支持接收参数以初始化对象的属性和方法。

对象创建与属性方法设置

对象创建方式

在JavaScript中,通常有三种常用方法来创建对象:


//1, 推荐使用
var newObject = {};
//2,
var newObject = Object.create( null );
//3, 不推荐
var newObject = new Object();

然而,上述方法仅创建了空对象,并未包含任何属性或方法。接下来介绍四种为对象添加属性和方法的方式。


// ECMAScript 3 兼容的方式
// 1. 常规对象定义方式
//设置属性
newObject.someKey = "Hello World";
//获取属性
var key = newObject.someKey;
// 2. 方括号方式
// 设置属性
newObject["someKey"] = "Hello World";
//获取属性
var key = newObject["someKey"];
// 仅仅用于ECMAScript 5
// 3. Object.defineProperty
// 设置属性
Object.defineProperty(
 newObject, "someKey",
 { value: "for more control of the property's behavior",
  writable: true,
  enumerable: true,
  configurable: true
});
//可以通过下面的函数简化属性设置
var defineProp = function ( obj, key, value ){
  config.value = value;
  Object.defineProperty( obj, key, config );
};
// 使用方法
var person = Object.create( null );defineProp( person, "car", "Delorean" );
defineProp( person, "dateOfBirth", "1981" );
defineProp( person, "hasBeard", false );
// 4. Object.defineProperties
//设置属性
Object.defineProperties(
newObject,
{ "someKey": { value: "Hello World", writable: true },
 "anotherKey": { value: "Foo bar", writable: false }
});
// 3和4的获取属性方法同1,2.

基础构造器及其局限性

基础构造器实现

尽管JavaScript没有Class概念,但它依然支持通过构造器来创建对象。

借助【new】关键字,函数可以表现出类似构造器的行为,从而生成自定义的对象实例。

一个基础构造器的典型形式如下:


function Car( model, year, miles ) {
  //这里,this指向新建立的对象自己
  this.model = model;
  this.year = year;
  this.miles = miles;
  this.toString = function () {
    return this.model + " has done " + this.miles + " miles";
  };
}
//用法
// 建立两个car实例
var civic = new Car( "Honda Civic", 2009, 20000 );
var mondeo = new Car( "Ford Mondeo", 2010, 5000 );
// 输出结果
console.log( civic.toString() );
console.log( mondeo.toString() );

这是最简单的构造器模式,但它存在两个主要缺陷:

首先,这种模式难以实现继承;其次,toString()方法在每个对象实例中都被重新定义。作为函数,它应当被所有Car类型的实例共享,而非重复创建。

利用原型优化构造器

基于原型的构造器优化

JavaScript具备一个关键特性:原型【Prototype】。

利用这一特性,在创建对象时,所有定义在构造器原型中的属性都能被对象实例访问。

这使得多个对象实例能够共享同一个原型,从而节省内存并提高效率。

改进后的Car示例如下:


function Car( model, year, miles ) {
  this.model = model;
  this.year = year;
  this.miles = miles;
}
Car.prototype.toString = function () {
  return this.model + " has done " + this.miles + " miles";
};
// 用法
var civic = new Car( "Honda Civic", 2009, 20000 );
var mondeo = new Car( "Ford Mondeo", 2010, 5000 );
//输出
console.log( civic.toString() );
console.log( mondeo.toString() );

在上述示例中,toString()方法被多个Car对象实例共享,解决了基础构造器的问题。

如需了解更多JavaScript相关内容,可参考本站专题:《javascript面向对象入门教程》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》。

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

作者最新文章