JavaScript创建对象的五种常用方式详解
作者:代码拾荒时间:2026-10-27 10:06:44浏览:129
本文详细解析JavaScript中创建对象的五种核心方法,涵盖Object构造函数、工厂模式、构造函数模式、对象字面量以及ES6简写语法。通过具体代码示例对比各方式在属性初始化、方法定义及内存占用上的差异,帮助开发者根据场景选择最优方案。
JavaScript创建对象的五种方式
代码示例如下:
<script type="text/javascript">
// 方式一:使用Object构造函数
var p0 = new Object();
p0.name = "xy";
p0.age = 20;
p0.sayName = function() { alert(this.name); }
p0.showAgeAfterSomeYears = function(year) { return this.age + year };
p0.sayName();
alert(p0.showAgeAfterSomeYears(10));
// 方式二:工厂模式(无参构造函数)
function Person(){
}
var p1 = new Person();
p1.name = "xy";
p1.age = 20;
p1.sayName = function() { alert(this.name); }
p1.showAgeAfterSomeYears = function(year) { return this.age + year };
p1.sayName();
alert(p1.showAgeAfterSomeYears(10));
// 方式三:带参构造函数模式
function Person(name,age){
this.name = name;
this.age = age;
this.sayName = function(){ alert(this.name); }
this.showAgeAfterSomeYears = function(year) { return this.age + year };
}
var p2 = new Person("xy",20);
p2.sayName();
alert(p2.showAgeAfterSomeYears(10));
// 方式四:对象字面量
var p3 = {
name : "xy",
age : 20,
sayName : function(){ alert(this.name); },
showAgeAfterSomeYears : function(year) { return this.age + year }
};
p3.sayName();
alert(p3.showAgeAfterSomeYears(10));
// 方式五:空对象扩展
var p4 = {};
p4.name = "xy";
p4.age = 20;
p4.sayName = function() { alert(this.name); }
p4.showAgeAfterSomeYears = function(year) { return this.age + year };
p4.sayName();
alert(p4.showAgeAfterSomeYears(10));
</script>作者最新文章
JavaScript异步发送HTTP请求时怎么优雅地处理错误
2026-11-05 17:10:44
5款主流JS在线运行工具对比:CodePen、JSFiddle与StackBlitz怎么选
2026-11-05 17:04:04
JavaScript入门书籍避坑:这些书不适合初学者
2026-11-05 16:31:15
JS使用Math.round实现保留两位小数的原理与代码
2026-11-05 15:35:55
JavaScript 原生 Date 对象怎么实现日期加减
2026-11-05 14:30:00
