JavaScript 经典模式创建对象详解:构造函数与封装

作者:半夏

时间:2026-10-30

浏览:617

本文详解JavaScript经典对象创建模式。通过构造函数定义属性与原型方法,解决忘记写new导致的undefined问题,并提供封装函数createXXX的解决方案。结合代码示例展示如何共享方法并返回特定字符串,确保对象属性与方法正确绑定。

文章目录

JavaScript经典对象创建模式概述

概述

构造函数与new关键字的使用陷阱

使用构造函数来创建对象时,如果调用时遗漏了new关键字,函数将直接执行并返回undefined,而非预期的对象实例。

为了解决这一问题,可以定义一个专用的工厂函数(如createXXX),在函数内部显式调用new操作符,从而确保始终返回正确的对象实例。

封装函数创建对象实例


function Student(props){
  this.name = props.name || '匿名';
  this.grade = props.grade || 1;  
}  

Student.prototype.hello = function(){
  alert('Hello, '+ this.name + '!');

}

function createStudent(props){  
  return new Student(props || {});
}

构造函数返回值机制说明

需要特别注意,若构造函数内部没有显式使用return语句返回特定对象,JavaScript引擎默认会返回this,即新创建的对象;但若在封装函数中处理不当或逻辑错误,可能导致返回undefined。

示例

下面展示如何利用构造函数定义Cat类,为所有Cat实例赋予name属性,并通过原型共享say()方法,该方法返回格式为'Hello, xxx!'的字符串。

Cat对象定义与原型方法共享示例


'use strict';

function Cat(name) {
  this.name = name;
}

Cat.prototype.say = function(){
  return ('Hello, ' + this.name + '!');
}

// 测试:
var kitty = new Cat('Kitty');
var doraemon = new Cat('哆啦A梦');
if (kitty && kitty.name === 'Kitty' && kitty.say && typeof kitty.say === 'function' && kitty.say() === 'Hello, Kitty!' && kitty.say === doraemon.say) {
  alert('测试通过!');
} else {
  alert('测试失败!');
}

以上就是JavaScript创建对象经典模式的完整解析,希望能为开发者提供实用参考。欢迎持续关注以获取更多技术内容。

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章