JavaScript创建对象的几种常见方式与对比
本文总结了JavaScript中创建对象的三种主要方式:使用大括号字面量、利用function关键字模拟类(构造函数)以及在函数体内创建并返回对象(工厂模式)。文章详细解析了各方法的语法特点、属性访问方式及局限性,如字面量无法使用new操作符,构造函数在特定IDE中可能缺乏智能提示等,帮助开发者根据需求选择合适方案。
JavaScript对象创建概述
在JavaScript中,构建对象(Create Object)的概念与我们常规理解的“创建类实例”有所不同。JS中的对象本质上是一种复合数据类型,其创建过程及属性访问机制具有极高的灵活性。
JS对象属于复合类型,允许通过变量名进行存储和读取。从另一个角度看,对象可以被视为一个无序的属性集合,每个属性包含名称和对应的值(类似于哈希表、字典或键值对结构)。这些属性的值可以是内置类型(如number、string),也可以是另一个对象。
使用大括号字面量创建对象
第一种方法:使用一对大括号进行定义。
代码如下:
var emptyObj = {};
var myObj =
{
'id': 1, //属性名用引号括起来,属性间由逗号隔开
'name': 'myName'
};
//var m = new myObj(); //不支持注意上述代码均使用var声明,这仅表示简单声明一个对象实例。该对象在内存中只存在一份拷贝,无法像类对象那样通过new操作符进行实例化(如注释所示)。这种方式严重限制了对象的重用性,除非你确定只需要该对象的一个实例,否则建议采用其他创建方式。
接下来探讨如何访问对象的属性和方法。
代码如下:
var myObj =
{
'id': 1,
'fun': function() {
document.writeln(this.id + '-' + this.name);//以"对象.属性"方式访问
},
'name': 'myObj',
'fun1': function() {
document.writeln(this['id'] + '+' + this['name']);//以集合方式访问
}
};
myObj.fun();
myObj.fun1();
// 结果
// 1-myObj 1+myObj第二种方法:利用function关键字模拟class。
在函数内部使用this关键字引用当前对象,并通过赋值来声明属性。若使用var声明变量,则该变量仅为局部变量,仅在定义范围内有效。
利用function关键字模拟类
代码如下:
function myClass() {
this.id = 5;
this.name = 'myclass';
this.getName = function() {
return this.name;
}
}
var my = new myClass();
alert(my.id);
alert(my.getName());
// 结果
// 5
// myclass第三种方法:在函数体内创建对象,声明属性后返回。
在函数体中创建对象时,可以利用前述的字面量方法,或者先执行new Object()再为各属性逐一赋值。
需要注意的是,采用这种方式创建的对象在VS2008 SP1环境中可能无法提供智能提示功能。
在函数体内创建并返回对象
代码如下:
function myClass() {
var obj =
{
'id':2,
'name':'myclass'
};
return obj;
}
function _myClass() {
var obj = new Object();
obj.id = 1;
obj.name = '_myclass';
return obj;
}
var my = new myClass();
var _my = new _myClass();
alert(my.id);
alert(my.name);
alert(_my.id);
alert(_my.name);
// 结果
// 2
// myclass
// 1
// _myclassJS语法错误会阻止加载吗?区分SyntaxError与资源加载失败
2026-11-05 16:08:46
JavaScript常见SyntaxError语法错误排查与修复方法
2026-11-05 13:58:44
JS中slice、substring和substr截取字符串的区别
2026-11-05 13:43:47
JS 转 TS 手动迁移最佳实践:从配置 tsconfig 到消除 any 类型
2026-11-05 11:53:32
为什么JS数组push后得到的是数字而不是数组?
2026-11-05 09:59:18
