本文深入解析 JavaScript 中创建对象的三种核心方式:工厂模式、构造函数模式和原型模式。通过对比代码示例,详细阐述各模式的实现原理、优缺点及适用场景,帮助开发者理解对象识别、内存共享及调用方式差异,掌握 JS 面向对象编程的基础技巧。
在上一篇文章中,我们介绍了 JavaScript 面向对象的基础知识。本文将进一步深入探讨 JavaScript 面向对象的高级内容。由于 JavaScript 语法具有极高的灵活性,创建简单对象的方法就有多种不同的实现路径。这种灵活性有时会带来困惑,因此今天我们将系统梳理 JavaScript 中常用的几种对象创建方法。
前言
前言
尽管使用 Object 构造函数或对象字面量可以便捷地创建单个对象,但这种方法存在一个显著缺陷:当需要创建多个具有相同结构的对象时,会产生大量冗余代码。为了解决这一问题,开发者们衍生出了以下几种创建对象的方式。
工厂模式
工厂模式
该模式的核心在于抽象创建对象的具体过程,通过封装一个函数,按照特定的接口规范来创建对象的细节。
function cPerson(name,sex,age){
var o = new Object();
o.name = name;
o.sex = sex;
o.age = age;
o.show = function(){
console.log(this.name,this.age,this.sex);
}
return o;
}
var p1 = cPerson('谦龙','男','100');
p1.show();
var p2 = cPerson('雏田','女','14');
p2.show();
工厂模式测试
工厂模式存在的问题:虽然工厂模式能够创建一个包含所有必要信息的对象,并且可以无限次调用该函数来生成新对象,解决了创建多个相似对象的问题,但它未能解决对象识别的问题,即无法准确判断一个对象的具体类型。
构造函数模式
构造函数模式
function CPerson(name,sex,age) {//注意这里 构造函数首字母大写
this.name = name;
this.sex = sex;
this.age = age;
this.show = function () {
console.log(this.name, this.age, this.sex);
}
}
var p1 = new CPerson('谦龙','男','100');
p1.show();
var p2 = new CPerson('雏田','女','14');
p2.show();
构造函数模式测试
需要注意的是,构造函数与工厂模式存在以下区别:
构造函数名称的首字母通常大写。
在构造函数内部,没有显式地创建对象实例。
属性和方法直接赋值给了 this 对象。
构造函数中没有 return 语句。
此外,通过这种方式调用构造函数大致经历以下几个步骤:
首先创建一个新的对象。
接着将构造函数的作用域赋值给这个新对象,此时 this 指向该新对象。
然后执行构造函数中的代码,即为新对象添加属性和方法。
最后返回该新对象。
注意:构造函数在本质上与普通函数没有太大差别,唯一的区别在于调用方式不同。以下演示了几种不同的调用方式。
// 调用方式1 new 方式
var p1 = new CPerson('谦龙','男','100');
p1.show();//谦龙 100 男
// 调用方式2 普通函数调用
CPerson('谦龙','男','100');
window.show()//谦龙 100 男 注意属性和方法会被设置到window对象上
// 调用方式3 在另一个对象的作用域中调用
var obj = new Object();
CPerson.call(obj,'谦龙','男','100');
obj.show(); //谦龙 100 男 在obj的作用域
构造函数模式存在的问题:使用构造函数时,最主要的问题是每个方法都要在每个实例上重新创建一次。例如,p1 和 p2 虽然都有 show 方法,但它们并非同一个 Function 的实例,因为在 JavaScript 中函数也是对象,所以它们共有的 show 方法并不相等。
原型模式
原型模式
每个函数都有一个 prototype 属性,该属性是一个指针,指向一个对象。这个对象的用途是包含可以由特定类型的所有实例共享的属性和方法,即调用构造函数所创建的那个对象的原型对象。
这种模式的好处在于可以让所有对象的实例共享其属性和方法,即无需在构造函数中定义实例的信息。
function CPerson(){
}
CPerson.prototype.name='谦龙';
CPerson.prototype.sex='男';
CPerson.prototype.age=100;
CPerson.prototype.show=function(){
console.log(this.name, this.age, this.sex);
}
var p1 = new CPerson();
p1.show(); //谦龙 100 男
var p2 = new CPerson();
p2.show();//谦龙 100 男
console.log(p1.show == p2.show)//true
以上内容介绍了 JavaScript 面向对象中常见的几种对象创建方式,包括工厂模式、构造函数模式和原型模式,希望读者能够从中受益。