update: 对象
This commit is contained in:
		
							parent
							
								
									4ce4574135
								
							
						
					
					
						commit
						7ce3649a5c
					
				| @ -2,15 +2,13 @@ | ||||
| 
 | ||||
| ## 前言 | ||||
| 
 | ||||
| 
 | ||||
| 在之前的**javascript基础**文章中,我们介绍过,变量有以下数据类型: | ||||
| 在上一篇文章中,我们介绍过,变量有以下数据类型: | ||||
| 
 | ||||
| - **基本数据类型(值类型)**:String 字符串、Number 数值、Boolean 布尔值、Null 空值、Undefined 未定义。 | ||||
| 
 | ||||
| - **引用数据类型(引用类型)**:Object 对象。 | ||||
| 
 | ||||
| 本文,我们针对这两种类型,做个详细介绍。我们先来看个例子。 | ||||
| 
 | ||||
| 本文,我们针对这两种类型,做进一步介绍。我们先来看个例子。 | ||||
| 
 | ||||
| **基本数据类型举例**: | ||||
| 
 | ||||
| @ -50,7 +48,7 @@ | ||||
| 
 | ||||
| 从上面的例子中,可以反映出,基本数据类型和引用数据类型是有区别的。 | ||||
| 
 | ||||
| 
 | ||||
| 那到底有什么区别呢?我们进一步往下看。 | ||||
| 
 | ||||
| ## 栈内存和堆内存 | ||||
| 
 | ||||
| @ -1,19 +1,92 @@ | ||||
| 
 | ||||
| ## 对象简介 | ||||
| 
 | ||||
| ## 面向对象简介 | ||||
| 
 | ||||
| **对象的作用是:封装信息**。比如Student类里可以封装学生的姓名、年龄、成绩等。 | ||||
| 
 | ||||
| 对象具有**特征**(属性)和**行为**(方法)。 | ||||
| ### 面向对象简介 | ||||
| 
 | ||||
| 面向对象:可以创建自定义的类型,很好的支持继承和多态。 | ||||
| 
 | ||||
| 面向对象的特征:封装、继承、多态。 | ||||
| 
 | ||||
| ### 对象的概念 | ||||
| 
 | ||||
| ## 对象简介 | ||||
| 在 JavaScript 中,对象是一组**无序**的相关属性和方法的集合。 | ||||
| 
 | ||||
| ### 基本数据类型和引用数据类型的对比 | ||||
| **对象的作用是:封装信息**。比如Student类里可以封装学生的姓名、年龄、成绩等。 | ||||
| 
 | ||||
| 对象具有**特征**(属性)和**行为**(方法)。 | ||||
| 
 | ||||
| ### 为什么需要对象 | ||||
| 
 | ||||
| 保存一个值时,可以使用**变量**,保存多个值(一组值)时,可以使用**数组**。 | ||||
| 
 | ||||
| 比如,如果要保存一个人的信息,通过数组的方式可以这样保存: | ||||
| 
 | ||||
| ```javascript | ||||
| var arr = ['王二', 35, '男', '180']; | ||||
| ``` | ||||
| 
 | ||||
| 上面这种表达方式比较乱。而如果用JS中的**对象**来表达,**结构会更清晰**。如下: | ||||
| 
 | ||||
| ```javascript | ||||
| var person = {}; | ||||
| 
 | ||||
| person.name = '王二'; | ||||
| person.age = 35; | ||||
| person.sex = '男'; | ||||
| person.height = '180'; | ||||
| ``` | ||||
| 
 | ||||
| 由此可见,对象里面的属性均是**键值对**: | ||||
| 
 | ||||
| - 键:相当于属性名。 | ||||
| 
 | ||||
| - 值:相当于属性值,可以是任意类型的值(数字类型、字符串类型、布尔类型,函数类型等)。 | ||||
| 
 | ||||
| ### 两条补充 | ||||
| 
 | ||||
| **补充1**:对象的属性值可以是任何的数据类型,也可以是个**函数**:(也称之为方法) | ||||
| 
 | ||||
| ```javascript | ||||
|     var obj = new Object(); | ||||
|     obj.sayName = function () { | ||||
|         console.log('smyhvae'); | ||||
|     }; | ||||
| 
 | ||||
|     console.log(obj.sayName);  //没加括号,就是获取方法 | ||||
|     console.log('-----------'); | ||||
|     console.log(obj.sayName());  //加了括号,就是调用方法。即:执行函数内容,并执行函数体的内容 | ||||
| 
 | ||||
| ``` | ||||
| 
 | ||||
| 打印结果: | ||||
| 
 | ||||
|  | ||||
| 
 | ||||
| **补充2**:对象中的属性值,也可以是一个**对象**。 | ||||
| 
 | ||||
| 举例: | ||||
| 
 | ||||
| ```javascript | ||||
|     //创建对象 obj1 | ||||
|     var obj1 = new Object(); | ||||
|     obj1.test = undefined; | ||||
| 
 | ||||
|     //创建对象 obj2 | ||||
|     var obj2 = new Object(); | ||||
|     obj2.name = "smyhvae"; | ||||
| 
 | ||||
|     //将整个 obj2 对象,设置为 obj1 的属性 | ||||
|     obj1.test = obj2; | ||||
| 
 | ||||
|     console.log(obj1.test.name); | ||||
| ``` | ||||
| 
 | ||||
| 打印结果为:smyhvae | ||||
| 
 | ||||
| 
 | ||||
| ## 对象和数据类型之间的关系 | ||||
| 
 | ||||
| 数据类型分类: | ||||
| 
 | ||||
| - **基本数据类型(值类型)**:String 字符串、Number 数值、Boolean 布尔值、Null 空值、Undefined 未定义。 | ||||
| 
 | ||||
| @ -69,6 +142,7 @@ | ||||
| 
 | ||||
| - 由开发人员自己创建的对象 | ||||
| 
 | ||||
| 
 | ||||
| ## 对象的基本操作 | ||||
| 
 | ||||
| ### 创建对象 | ||||
| @ -81,7 +155,7 @@ | ||||
| 	var obj = new Object(); | ||||
| ``` | ||||
| 
 | ||||
| 另外,使用`typeof`检查一个对象时,会返回`object`。 | ||||
| 记住,使用`typeof`检查一个对象时,会返回`object`。 | ||||
| 
 | ||||
| ### 向对象中添加属性 | ||||
| 
 | ||||
| @ -121,45 +195,6 @@ | ||||
| 	} | ||||
| ``` | ||||
| 
 | ||||
| **补充1**:对象的属性值可以是任何的数据类型,也可以是个**函数**:(也称之为方法) | ||||
| 
 | ||||
| ```javascript | ||||
|     var obj = new Object(); | ||||
|     obj.sayName = function () { | ||||
|         console.log('smyhvae'); | ||||
|     }; | ||||
| 
 | ||||
|     console.log(obj.sayName);  //没加括号,获取的是对象 | ||||
|     console.log('-----------'); | ||||
|     console.log(obj.sayName());  //加了括号,执行函数内容,并执行函数体的内容 | ||||
| 
 | ||||
| ``` | ||||
| 
 | ||||
| 打印结果: | ||||
| 
 | ||||
|  | ||||
| 
 | ||||
| **补充2**:js中的属性值,也可以是一个**对象**。 | ||||
| 
 | ||||
| 举例: | ||||
| 
 | ||||
| ```javascript | ||||
|     //创建对象 obj1 | ||||
|     var obj1 = new Object(); | ||||
|     obj1.test = undefined; | ||||
| 
 | ||||
|     //创建对象 obj2 | ||||
|     var obj2 = new Object(); | ||||
|     obj2.name = "smyhvae"; | ||||
| 
 | ||||
|     //将整个 obj2 对象,设置为 obj1 的属性 | ||||
|     obj1.test = obj2; | ||||
| 
 | ||||
|     console.log(obj1.test.name); | ||||
| ``` | ||||
| 
 | ||||
| 打印结果为:smyhvae | ||||
| 
 | ||||
| ### 获取对象中的属性 | ||||
| 
 | ||||
| **方式1**: | ||||
| @ -194,26 +229,26 @@ | ||||
| 
 | ||||
| **方式2**:可以使用`[]`这种形式去操作属性 | ||||
| 
 | ||||
| 对象的属性名不强制要求遵守标识符的规范,但是我们使用是还是尽量按照标识符的规范去做。 | ||||
| 对象的属性名不强制要求遵守标识符的规范,不过我们尽量要按照标识符的规范去做。 | ||||
| 
 | ||||
| 但如果要使用特殊的属性名,就不能采用`.`的方式来操作对象的属性。比如说,`123`这种属性名,如果我们直接写成`obj.123 = 789`,是会报错的。那怎么办呢?办法如下: | ||||
| 但如果确实要使用特殊的属性名,就不能采用`.`的方式来操作对象的属性。比如说,`123`这种属性名,如果我们直接写成`obj.123 = 789`来操作属性,是会报错的。那怎么办呢?办法如下: | ||||
| 
 | ||||
| 语法格式如下:(读取时,也是采用这种方式) | ||||
| 
 | ||||
| ``` | ||||
| 对象["属性名"] = 属性值 | ||||
| ```javascript | ||||
| // 注意,括号里的属性名,必须要加引号 | ||||
| 对象['属性名'] = 属性值 | ||||
| 
 | ||||
| ``` | ||||
| 
 | ||||
| 
 | ||||
| 上面这种语法格式,举例如下: | ||||
| 
 | ||||
| ```javascript | ||||
|  obj["123"] = 789; | ||||
|  obj['123'] = 789; | ||||
| ``` | ||||
| 
 | ||||
| 
 | ||||
| **重要**:使用`[]`这种形式去操作属性,更加的灵活,因为,我们可以在`[]`中直接传递一个**变量**,这样变量值是多少就会读取那个属性。 | ||||
| **重要**:使用`[]`这种形式去操作属性,更加的灵活,因为,我们可以在`[]`中直接传递一个**变量**。 | ||||
| 
 | ||||
| 
 | ||||
| ### 修改对象的属性值 | ||||
| @ -302,21 +337,28 @@ | ||||
| 
 | ||||
| 属性名和属性值是一组一组的键值对结构,键和值之间使用`:`连接,多个值对之间使用`,`隔开。如果一个属性之后没有其他的属性了,就不要写`,`,因为它是对象的最后一个属性。 | ||||
| 
 | ||||
| 
 | ||||
| ## 遍历对象中的属性:for in | ||||
| ## 遍历对象中的属性:for ... in | ||||
| 
 | ||||
| 语法: | ||||
| 
 | ||||
| ```javascript | ||||
| 	for (var 变量 in 对象) { | ||||
| for (var 变量 in 对象名) { | ||||
| 
 | ||||
| } | ||||
| ``` | ||||
| 
 | ||||
| 解释:对象中有几个属性,循环体就会执行几次。每次执行时,会将对象中的**每个属性的 属性名 赋值给变量**。 | ||||
| 
 | ||||
| 举例: | ||||
| 语法举例: | ||||
| 
 | ||||
| ```javascript | ||||
| for (var key in obj) { | ||||
| 	console.log(key); // 这里的 key 是:对象属性的键 | ||||
| 	console.log(obj[key]); // 这里的 obj[key] 是:对象属性的值 | ||||
| } | ||||
| ``` | ||||
| 
 | ||||
| 举例: | ||||
| 
 | ||||
| ```html | ||||
| <!DOCTYPE html> | ||||
| @ -330,13 +372,16 @@ | ||||
| 			name: "smyhvae", | ||||
| 			age: 26, | ||||
| 			gender: "男", | ||||
| 			address: "shenzhen" | ||||
| 			address: "shenzhen", | ||||
|             sayHi: function() { | ||||
|                 console.log(this.name); | ||||
|             } | ||||
| 		}; | ||||
| 
 | ||||
| 		//枚举对象中的属性 | ||||
| 		for (var n in obj) { | ||||
| 			console.log("属性名:" + n); | ||||
| 			console.log("属性值:" + obj[n]); // 注意,因为这里的属性名 n 是变量,所以,如果想获取属性值,不能写成 obj.n,而是要写成 obj[n] | ||||
| 		// 遍历对象中的属性 | ||||
| 		for (var key in obj) { | ||||
| 			console.log("属性名:" + key); | ||||
| 			console.log("属性值:" + obj[key]); // 注意,因为这里的属性名 keu 是变量,所以,如果想获取属性值,不能写成 obj.key,而是要写成 obj[key] | ||||
| 		} | ||||
| 	</script> | ||||
| </head> | ||||
| @ -350,8 +395,24 @@ | ||||
| 
 | ||||
| 打印结果: | ||||
| 
 | ||||
|  | ||||
| ``` | ||||
| 属性名:name | ||||
| 属性值:smyhvae | ||||
| 
 | ||||
| 属性名:age | ||||
| 属性值:26 | ||||
| 
 | ||||
| 属性名:gender | ||||
| 属性值:男 | ||||
| 
 | ||||
| 属性名:address | ||||
| 属性值:shenzhen | ||||
| 
 | ||||
| 属性名:sayHi | ||||
| 属性值:function() { | ||||
|                     console.log(this.name); | ||||
|                 } | ||||
| ``` | ||||
| 
 | ||||
| ## 我的公众号 | ||||
| 
 | ||||
| @ -1,18 +1,22 @@ | ||||
| 
 | ||||
| 
 | ||||
|  > 在看本文之前,可以先复习前面的一篇文章:《03-JavaScript基础/07-对象简介和对象的基本操作.md》 | ||||
|  > 在看本文之前,可以先复习前面的一篇文章:《04-JavaScript基础/09-对象简介和对象的基本操作.md》 | ||||
| 
 | ||||
| ## 创建自定义对象的几种方法 | ||||
| 
 | ||||
| ### 方式一:对象字面量 | ||||
| 
 | ||||
| **对象的字面量**就是一个{}。里面的属性和方法均是**键值对**。 | ||||
| **对象的字面量**就是一个{}。里面的属性和方法均是**键值对**: | ||||
| 
 | ||||
| - 键:相当于属性名。 | ||||
| 
 | ||||
| - 值:相当于属性值,可以是任意类型的值(数字类型、字符串类型、布尔类型,函数类型等)。 | ||||
| 
 | ||||
| 例如: | ||||
| 
 | ||||
| ```javascript | ||||
| var o = { | ||||
|             name: "生命壹号", | ||||
|             name: "千古壹号", | ||||
|             age: 26, | ||||
|             isBoy: true, | ||||
|             sayHi: function() { | ||||
| @ -55,6 +59,19 @@ console.log(o); | ||||
|     var obj4 = createPerson("蜘蛛精", 18, "女"); | ||||
| ``` | ||||
| 
 | ||||
| 第一次看到这种工厂模式时,你可能会觉得陌生。如果简化一下,可以写成下面这种形式,更容易理解:(也就是,利用new Object创建对象) | ||||
| 
 | ||||
| ```javascript | ||||
| var obj = new Obect(); | ||||
| obj.name = '猪八戒'; | ||||
| obj.age = 28; | ||||
| obj.gender = '男'; | ||||
| obj.sayHi = function() { | ||||
|     alert('hello world'); | ||||
| }; | ||||
| ``` | ||||
| 
 | ||||
| 
 | ||||
| **弊端:** | ||||
| 
 | ||||
| 使用工厂方法创建的对象,使用的构造函数都是Object。**所以创建的对象都是Object这个类型,就导致我们无法区分出多种不同类型的对象**。 | ||||
| @ -74,7 +91,7 @@ console.log(o); | ||||
| 
 | ||||
|         // 创建一个构造函数 | ||||
|         function Student(name) { | ||||
|             this.name = name;    //this指的是构造函数中的对象实例 | ||||
|             this.name = name;    //this指的是当前对象实例【重要】 | ||||
|             this.sayHi = function () { | ||||
|                 console.log(this.name + "厉害了"); | ||||
|             } | ||||
| @ -103,20 +120,25 @@ console.log(o); | ||||
|         }; | ||||
|       } | ||||
| 
 | ||||
|       // 创建一个构造函数,专门用来创建 Dog 对象 | ||||
|       function Dog() {} | ||||
| 
 | ||||
|       var per = new Person("孙悟空", 18, "男"); | ||||
|       var per2 = new Person("玉兔精", 16, "女"); | ||||
|       var per3 = new Person("奔波霸", 38, "男"); | ||||
| 
 | ||||
|       // 创建一个构造函数,专门用来创建 Dog 对象 | ||||
|       function Dog() {} | ||||
| 
 | ||||
|       var dog = new Dog(); | ||||
| ``` | ||||
| 
 | ||||
| ### 构造函数的概念 | ||||
| 
 | ||||
| **构造函数**:是一种特殊的函数,主要用来创建和初始化对象,也就是为对象的成员变量赋初始值。它与 `new` 一起使用才有意义。 | ||||
| 
 | ||||
| 我们可以把对象中一些公共的属性和方法抽取出来,然后封装到这个构造函数里面。 | ||||
| 
 | ||||
| ### 构造函数和普通函数的区别 | ||||
| 
 | ||||
| 构造函数就是一个普通的函数,创建方式和普通函数没有区别,不同的是构造函数习惯上首字母大写。 | ||||
| 构造函数的创建方式和普通函数没有区别,不同的是构造函数习惯上首字母大写。 | ||||
| 
 | ||||
| 构造函数和普通函数的区别就是**调用方式**的不同:普通函数是直接调用,而构造函数需要使用new关键字来调用。 | ||||
| 
 | ||||
| @ -130,13 +152,15 @@ console.log(o); | ||||
| 
 | ||||
| ### new 一个构造函数的执行流程 | ||||
| 
 | ||||
| (1)开辟内存空间,存储新创建的对象 | ||||
| new 在执行时,会做下面这四件事: | ||||
| 
 | ||||
| (2)将新建的对象设置为构造函数中的this,在构造函数中可以使用this来引用 新建的对象 | ||||
| (1)开辟内存空间,在内存中创建一个新的空对象。 | ||||
| 
 | ||||
| (3)执行函数中的代码(包括设置对象属性和方法等) | ||||
| (2)让 this 指向这个新的对象。 | ||||
| 
 | ||||
| (4)将新建的对象作为返回值返回 | ||||
| (3)执行构造函数里面的代码,给这个新对象添加属性和方法。 | ||||
| 
 | ||||
| (4)返回这个新对象(所以构造函数里面不需要return)。 | ||||
| 
 | ||||
| 因为this指的是new一个Object之后的对象实例。于是,下面这段代码: | ||||
| 
 | ||||
| @ -229,7 +253,6 @@ json举例: | ||||
| 
 | ||||
| json 采用 `for...in...`进行遍历,和数组的遍历方式不同。如下: | ||||
| 
 | ||||
| 
 | ||||
| ```html | ||||
| <script> | ||||
|     var myJson = { | ||||
| @ -251,12 +274,10 @@ json 采用 `for...in...`进行遍历,和数组的遍历方式不同。如下 | ||||
| 
 | ||||
|  | ||||
| 
 | ||||
| 
 | ||||
| ## 我的公众号 | ||||
| 
 | ||||
| 想学习<font color=#0000ff>**代码之外的技能**</font>?不妨关注我的微信公众号:**千古壹号**(id:`qianguyihao`)。 | ||||
| 想学习<font color=#0000ff>**代码之外的技能**</font>?不妨关注我的微信公众号:**千古壹号**。 | ||||
| 
 | ||||
| 扫一扫,你将发现另一个全新的世界,而这将是一场美丽的意外: | ||||
| 
 | ||||
|  | ||||
| 
 | ||||
							
								
								
									
										1
									
								
								18-推荐链接/04-前端文章推荐.md
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										1
									
								
								18-推荐链接/04-前端文章推荐.md
									
									
									
									
									
										Normal file
									
								
							| @ -0,0 +1 @@ | ||||
| 04-前端文章推荐.md | ||||
		Loading…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user