js学习笔记

最新推荐文章于 2025-06-13 08:24:12 发布

小白敲bug

最新推荐文章于 2025-06-13 08:24:12 发布

阅读量96

点赞数

分类专栏： js 文章标签： javascript

本文链接：https://blog.youkuaiyun.com/weixin_45944877/article/details/120060257

版权

js 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了JavaScript中的五种对象创建模式：object构造函数模式、对象字面量模式、工厂模式、自定义构造函数模式和构造函数+原型的组合方式。每种模式有其适用场景和优缺点，例如构造函数+原型的组合方式可以避免方法重复，提高内存效率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

五大模式汇总：

1)object构造函数模式

先创建空的object对象，再动态添加属性/方法
使用场景：起始时不确定对象内部数据
缺点：语句太多

var  p =new person(){
p.name = tom,
p.age = 12;
}

2)对象字面量模式

使用{}创建对象，同时指定属性/方法
适用场景：起始时对象内部数据是确定的
缺点：如果创建多个对象，会有重复代码

var obj = {
name = tom,
age = 12;}

3)工厂模式

工厂模式：
通过工厂函数动态创建对象并返回
适用场景:需要创建多个对象时
缺点：对象没有一个具体的类型，都是Object类型

function createPerson(name,age){
  var obj = {
name:name,
age:age,
setName:function(name){
this.name = name;}}
return obj;
}
function createAnimal(name,age){
  var obj = {
name:name,
age:age,
setName:function(name){
this.name = name;}}
return obj;
}
var p1 = createPerson('tom',12);
var p2 = createPerson('jack',18);
var a1 = createAnimal('dog',12);
p1,p2,a1都是Object类型，无法区分

4)自定义构造函数模式

自定义构造函数，通过new创建对象
适用场景：需要创建多个类型确定的对象
缺点：每个对象都有相同的数据，浪费内存

    //创建构造函数Person（）
function Person(name,age){
//构造函数的函数体如下：
this.name = name,
this.age = age,
this.setName = function(name){
this.name =name;}
}
//创建一个对象
var p1 = new Person('tom',12);
p1.setName('jack');
var p2 = new Person('mike',15);
p2.setName('mike');

function Animal(name,age){
this.name = name,
this,age = age,
this.setName =(function(name){
return this.name =name})
}
var A2 = new Animal('dog',12);
// p1,p2是person类型， A2是Animal类型
console.log(p1);
console.log(p2);
console.log(A2);

5）构造函数+原型的组合方式

在构造函数中只初始化一般函数
方法大量重复->把方法放在原型中

function Animal(name,age){
this.name = name,
this.age = age
};
Animal.prototype.setName = function(name){
this.name = name}
var p1 = new Animal('tom',12);
var p2 = new Animal('mike',15);

p1.setName('dog');
p2.setName('cat');
console.log(p1);
console.log(p2);