JavaScript-创建对象的四种方法：字面量创建对象、构造函数创建对象、自定义构造函数创建对象、工厂模式创建对象

超、凢脫俗 2023-05-29 03:12 44阅读 0赞

## 对象概述 ##

在现实生活中万物皆对象，对象是一个具体的事物，一个具体的事物就会具有相关的行为和特征；在 JavaScript 中，对象是现实生活中对象的抽象，是一组无序的相关属性和方法的集合，所有的事物都是对象，例如：数字、字符串、数组、函数等。

## 对象的构成 ##

对象由属性和方法构成

##### 现实中的对象 #####

比如说路边停的一辆车，车是黑色的、八个轮子、两个座垫，这些就是对象的特征（属性）；车子跑、拐弯、刹车这些就是车子的行为。

##### JS 中的对象 #####

*  属性：描述事物的特征，在 JS 中的对象的特征用属性来表示
 *  方法：事物的行为，在 JS 中的对象的中用方法来表示

## 使用对象的好处 ##

对象可以更好的存储一组数据；对象中每项数据都需要设置相关的属性名称，让访问数据的更语义化，数据结构更清晰，表意明显，方便使用

## JS对象中的键值对 ##

对象中键值对就是由**属性名**和**属性值**组成的，属性名和属性值之间由英文冒号 `:` 组成对，多个键值对之间用英文逗号`,` 隔开；键值对就是对象的灵魂

## JS对象的属性 ##

*  对象中存储**具体数据**的 键值对中的 键 称为对象的属性，即对象中存储具体数据的项

## JS对象的方法 ##

*  对象中存储**函数**的 键值对 中的 键 就是对象的方法，即对象中存储函数的项

## 访问对象中的属性和方法 ##

对象中的属性值可以是任意的数据类型，访问或使用相关的属性值时直接使用对象点 `.` 属性名的形式即可获取，也可以通过点的方式添加属性

对象里面属性的另一种调用方式 ：`对象['属性名']`，需要注意的是方括号里面的属性必须加引号

使用对象中的方法时首先通过 `.` 获取到对象中的放法，再通过小括号 `()` 调用（方法的本质就是函数）

若查找的属性对象中没有，用 **点运算符** 查的这个属性就会被动态创建，值为undefined；原因 js 是一门基于对象的动态类型语言

## 创建对象的方法 ##

#### 字面量创建对象 ####

就是用花括号 `{}` 来创对象，里面包含了表达这个对象的属性和方法；`{}` 里面采取键值对的形式来表示对象的属性和方法；对象中的属性可添加、可修改、可访问、也可删除

示例：

// 对象的名称为 obj
    var obj = { 
    	name: "小洁",
    	age: 18,
    	sex: "女",
    	// 对象中的方法
    	intro: function(){ 
    		console.log("我是" +obj.name+"今年" +obj.age+"岁");
    	} // 最后一个键值对不加逗号（与数组很像）
    };
    // 打印对象
    console.log(obj);
    // 打印 name 的属性值
    console.log('name:' + obj.name);
    // 调用对象中的方法
    obj.intro();
    
    // 修改对象中相关属性的属性值 
    obj.name = "小芳";
    console.log('name:' + obj.name);
    
    // 添加属性
    obj.like = 'book，movie';
    console.log(obj);
    
    // 打印对象中没有的属性
    console.log(obj.nickname);

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ_size_16_color_FFFFFF_t_70]

###### 缺点 ######

通过字面量创建的对象其代码不能重复利用

#### 构造函数创建对象 ####

通过构造函数创建对象需要与 `new` 结合使用；构造函数属于一种特殊的函数，主要用来在创建对象时初始化对象， 就是为对象成员变量赋初始值。

通过构造函数创建的是一类对象

使用 new 操作符调用构造函数时，会经历四个阶段：

*  在内存中申请空间，用来存储创建的对象
 *  将构造函数作用域赋给新对象（就是将 this 设置为当前对象）
 *  执行构造函数代码（设置当前对象的属性和方法）
 *  将当前对象返回

语法：

new Object()

示例：

// 通过构造函数创建对象
    var obj = new Object();// 实例化对象
    // 给对象添加属性
    obj.uname = '小乔';
    obj.age = 19;
    obj.gender = 'girl';
    
    // 给对象添加方法
    obj.hobby = function(){ 
    	console.log('我喜欢练瑜伽、追韩剧！');
    };
    obj.eat = function(){ 
    	console.log("我喜欢吃香蕉，吃大香蕉！");
    };
    
    // 获取属性
    console.log(obj.uname);
    // 调用方法
    obj.hobby();

![在这里插入图片描述][20191104134634669.png]  
`Object()` 中传递的参数是字面量的对象时，就可以省略 `new` 关键字

示例：

var obj = new Object();
    obj.uname = '熊大';
    obj.age = 19;
    console.log(obj)
    
    // 不使用 new
    var obj2 = Object({  uname: '熊二', age: 18 })
    console.log(obj2)

![在这里插入图片描述][20191104121132784.png]

#### 自定义构造函数创建对象 ####

// 自定义构造函数
    function Person(name,age,sex){ 
    	this.name = name;
    	this.age = age;
    	this.sex = sex;
    
    	this.intro = function(){ 
    		console.log("我叫" +this.name+ "今年" +this.age+"岁");
    	};
    }
    
    
    /* 该行代码执行时： 在内存中申请空间，用来存储创建的对象 将 this 设置为当前对象 设置当前对象的属性和方法 将当前对象返回 */
    var obj = new Person("小芳",20,"女"); // 创建对象实例
    
    console.log(obj.name);
    obj.intro();

#### 工厂模式创建对象 ####

//将创建对象的方法封装成函数
    function createObj(name,age,sex){ 
    	var obj = new Object();//创建对象实例
    
    	//为对象添加属性
    	obj.name = name;
    	obj.age = age;
    	obj.sex = sex;
    
    	//添加方法
    	obj.intro = function(){ 
    		console.log("我叫" +this.name+ "今年" +this.age+ "岁！");//this关键字代表当前对象
    	};
    
    	return obj;//将对象返回
    }
    
    var person = createObj("小乔",20,"女");
    
    console.log(person.name);
    person.intro();

###### 优点 ######

使用这种方法能够不断重复的创建对象

###### 缺点 ######

无法判断对象类型，每个对象都有相同的方法，不能共享同一个函数，这就造成了内存的浪费

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191102155835550.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ==,size_16,color_FFFFFF,t_70
[20191104134634669.png]: https://img-blog.csdnimg.cn/20191104134634669.png
[20191104121132784.png]: https://img-blog.csdnimg.cn/20191104121132784.png