js 创建对象几种方式
在js中创建对象的方法可分为6种,分别是:基本模式、工厂模式、构造函数模式、原型模式、组合模式、动态原型模式,接下来分别看下这几种模式的写法吧
一、基本模式
var person = new Object(); person.name = "孙悟空"; person.weapon = "棒子"; person.run = function () { return this.name + "武器是" + person.weapon; }
缺点:1、当创建对象较多时会比较麻烦,2、各个对象之前看不出有什么关联
为解决第1个问题接下来我们来介绍工厂模式
二、工厂模式
function creatPerson(name, weapon) { var person = new Object(); person.name = "孙悟空"; person.weapon = "棒子"; person.run = function () { return this.name + "武器是" + person.weapon; } return person; }
缺点:1、实例之间没有联系;2、没有使用new关键字;3、会造成资源的浪费,每生成一个实例都会都会增加一些重复的内容
缺点3如何理解呢:在多次调用creatPerson方法时,创建对象的方法run会生成多个,虽然多个对象的方法都是一样的。
构造函数解决了多个实列之间没有联系的问题,可以用instanceof判断
三、构造函数模式
function creatPerson(name, weapon) { this.name = name; this.weapon = weapon; this.run = function () { return this.name + "武器是" + this.weapon; } } //调用创建对象 var wukou =new creatPerson("孙悟空", "棒子");
缺点:没有解决工厂模式浪费内存的缺点,每创建一个对象会增加很多重复的东西
为了解决这个问题请看原型模式
四、原型(Prototype)模式
js中规定,每一个构造函数都有一个prototype属性,指向另一个对象,这个对象的所有属性和方法,都会被构造函数的实例继承,可以把那些不变的属性和方法直接定义在prototype对象上
function personObj() { } personObj.prototype.name = "孙悟空"; personObj.prototype.weapon = "棒子"; personObj.prototype.run = function () { return this.name + "武器是" + this.weapon; } //创建对象 var person = new personObj(); //原型模式的另一种写法 function personObj() { } personObj.prototype = { constructor: personObj,//强制指回personObj name: "孙悟空", weapon: "棒子", run: function () { return this.name + "武器是" + this.weapon; } }
缺点:构造函数没有参数,不能传参初始化值,因为不同的对象可能只共享方法,但是不会共享属性,为了解决这个问题请看构造函数和原型模式的组合模式,还解决了前面的所有缺点,Jquery就是使用的这种方法
五、组合模式
这样,不同的实例可有自己特有的属性,还有共享的方法
function personObj(name,weapon) { this.name = name; this.weapon = weapon; } personObj.prototype = { run: function () { return this.name + "武器是" + this.weapon; } } //创建对象 var wukou = new personObj("孙悟空", "棒子");
虽然这种创建对象的方式已经够我们使用了,平时使用这方式也没有问题的,当然还有一点小问题:对象中的属性和方法是分开的,请看动态原型方法
六、动态原型模式
function personObj(name, weapon) { this.name = name this.weapon = weapon if (typeof this.run != "function") { personObj.prototype = { run: function () { return this.name + "武器是" + this.weapon; } } } } //创建对象 var wukou = new personObj("孙悟空", "棒子");
函数中使用 if (typeof this.run != "function") 目的是为了防止创建多个对象时,方法执行多次
补充(重点):
一、JS中常用的创建对象方式有四种:
1、对象字面量
2、new Object()
3、构造函数
4、Object.create()
这四种方式虽然都能创建对象,但是还是有区别的,接下来我们研究下。
二、使用4种方式创建4个对象。
// 对象字面量
var dog1 = {
name: '大黄',
age: 2,
speak: function () {
console.log("汪汪");
}
}
// 使用Object
var dog2 = new Object();
dog2.name = "大黄";
dog2.age = 2;
dog2.speak = function () {
console.log("汪汪");
}
// 使用构造函数
function Dog(name, age) {
this.name = name;
this.age = age;
}
Dog.prototype.speak = function () {
console.log("汪汪");
};
var dog3 = new Dog("大黄", 2);
// 使用Object.create
var dog4 = Object.create(dog1);
这4个对象都是有name、age两个属性和speak一个方法,我们来测试下:
console.log(dog1.name + dog1.age);
dog1.speak();
console.log(dog2.name + dog2.age);
dog2.speak();
console.log(dog3.name + dog3.age);
dog3.speak();
console.log(dog4.name + dog4.age);
dog4.speak();
执行结果如下,可见他们的功能是一样的。
3. 结构不同
虽然使用起来功能一样,但是实际这4个对象的结构并不是一样的,我们继续执行以下代码:
console.log(dog1);
console.log(dog2);
console.log(dog3);
console.log(dog4);
执行结果如下:
三、查看三个对象的结构
可见,对象字面量和new Object方式创建的对象结构是一样的。
使用构造函数创建的对象,speak方法是在其原型上的。
而使用Object.create创建的对象,原对象的属性和方法都会挂到新对象的原型上。
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· 没有Manus邀请码?试试免邀请码的MGX或者开源的OpenManus吧
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· Docker 太简单,K8s 太复杂?w7panel 让容器管理更轻松!