Webcourse/09-对象简介.md at ebcb344cb34b573b233444796c4e9bb5934d23a9

webcourse/Webcourse

Fork 0

qianguyihao ebcb344cb3 refactor: 目录结构调整

2020-05-14 21:41:53 +08:00

10 KiB

Raw Blame History

对象简介

面向对象简介

面向对象：可以创建自定义的类型，很好的支持继承和多态。

面向对象的特征：封装、继承、多态。

对象的概念

在 JavaScript 中，对象是一组无序的相关属性和方法的集合。

对象的作用是：封装信息。比如Student类里可以封装学生的姓名、年龄、成绩等。

对象具有特征（属性）和行为（方法）。

为什么需要对象

保存一个值时，可以使用变量，保存多个值（一组值）时，可以使用数组。

比如，如果要保存一个人的信息，通过数组的方式可以这样保存：

var arr = ['王二', 35, '男', '180'];

上面这种表达方式比较乱。而如果用JS中的对象来表达，结构会更清晰。如下：

var person = {};

person.name = '王二';
person.age = 35;
person.sex = '男';
person.height = '180';

由此可见，对象里面的属性均是键值对：

键：相当于属性名。
值：相当于属性值，可以是任意类型的值（数字类型、字符串类型、布尔类型，函数类型等）。

两条补充

补充1：对象的属性值可以是任何的数据类型，也可以是个函数：（也称之为方法）

    var obj = new Object();
    obj.sayName = function () {
        console.log('smyhvae');
    };

    console.log(obj.sayName);  //没加括号，就是获取方法
    console.log('-----------');
    console.log(obj.sayName());  //加了括号，就是调用方法。即：执行函数内容，并执行函数体的内容

打印结果：

补充2：对象中的属性值，也可以是一个对象。

举例：

    //创建对象 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 未定义。
引用数据类型（引用类型）：Object 对象。

基本数据类型：

基本数据类型的值直接保存在栈内存中，值与值之间是独立存在，修改一个变量不会影响其他的变量。

对象：

只要不是那五种基本数据类型，就全都是对象。

如果使用基本数据类型的数据，我们所创建的变量都是独立的，不能成为一个整体。

对象属于一种复合的数据类型，在对象中可以保存多个不同数据类型的属性。

对象是保存到堆内存中的，每创建一个新的对象，就会在堆内存中开辟出一个新的空间。变量保存的是对象的内存地址（对象的引用）。

换而言之，对象的值是保存在堆内存中的，而对象的引用（即变量）是保存在栈内存中的。

如果两个变量保存的是同一个对象引用，当一个通过一个变量修改属性时，另一个也会受到影响。

上面这句话很重要，我们来看个例子。

一个经典的例子

	var obj = new Object();
	obj.name = "孙悟空";

	var obj2 = obj;

	//修改obj2的name属性
	obj2.name = "猪八戒";

上面的代码中，当我修改 obj2 的name属性后，会发现，obj 的 name 属性也会被修改。因为obj和obj2指向的是堆内存中的同一个地址。

这个例子要尤其注意，实战开发中，很容易忽略。

对于引用类型的数据，赋值相当于地址拷贝，a、b占用了同一段地址。所以改了b，a也会变；本质上a、b就是一个东西。

如果你打算把引用类型 A 的值赋值给 B，让A和B相互不受影响的话，可以通过 Object.assign() 来复制对象。效果如下：

var obj = {name: '孙悟空'};

// 复制对象：把 obj 赋值给 obj3。两者之间互不影响
var obj3 = Object.assign({}, obj);

对象的分类

1.内置对象：

由ES标准中定义的对象，在任何的ES的实现中都可以使用
比如：Math、String、Number、Boolean、Function、Object....

2.宿主对象：

由JS的运行环境提供的对象，目前来讲主要指由浏览器提供的对象。
比如 BOM DOM。比如console、document。

3.自定义对象：

由开发人员自己创建的对象

对象的基本操作

创建对象

使用new关键字调用的函数，是构造函数constructor。构造函数是专门用来创建对象的函数。

例如：

	var obj = new Object();

记住，使用typeof检查一个对象时，会返回object。

向对象中添加属性

在对象中保存的值称为属性。

向对象添加属性的语法：

	对象.属性名 = 属性值;

举例：

    var obj = new Object();

    //向obj中添加一个name属性
    obj.name = "孙悟空";

    //向obj中添加一个gender属性
    obj.gender = "男";

    //向obj中添加一个age属性
    obj.age = 18;

    console.log(JSON.stringify(obj)); // 将 obj 以字符串的形式打印出来

打印结果：

	{
		"name":"孙悟空",
		"gender":"男",
		"age":18
	}

获取对象中的属性

方式1：

语法：

	对象.属性名

如果获取对象中没有的属性，不会报错而是返回undefined。

举例：

    var obj = new Object();

    //向obj中添加一个name属性
    obj.name = "孙悟空";

    //向obj中添加一个gender属性
    obj.gender = "男";

    //向obj中添加一个age属性
    obj.age = 18;

    // 获取对象中的属性，并打印出来
    console.log(obj.gender); // 打印结果：男
    console.log(obj.color);  // 打印结果：undefined

方式2：可以使用[]这种形式去操作属性

对象的属性名不强制要求遵守标识符的规范，不过我们尽量要按照标识符的规范去做。

但如果确实要使用特殊的属性名，就不能采用.的方式来操作对象的属性。比如说，123这种属性名，如果我们直接写成obj.123 = 789来操作属性，是会报错的。那怎么办呢？办法如下：

语法格式如下：（读取时，也是采用这种方式）

// 注意，括号里的属性名，必须要加引号
对象['属性名'] = 属性值

上面这种语法格式，举例如下：

 obj['123'] = 789;

重要：使用[]这种形式去操作属性，更加的灵活，因为，我们可以在[]中直接传递一个变量。

修改对象的属性值

语法：

	对象.属性名 = 新值

	obj.name = "tom";

删除对象的属性

语法：

	delete obj.name;

in 运算符

通过该运算符可以检查一个对象中是否含有指定的属性。如果有则返回true，没有则返回false。

语法：

	"属性名" in 对象

举例：

	//检查obj中是否含有name属性
	console.log("name" in obj);

我们平时使用的对象不一定是自己创建的，可能是别人提供的，这个时候，in 运算符可以派上用场。

对象字面量

如果要创建一个对象，我们可以使用下面这种方式：

	var obj = new Object();

但是上面的这种方式，比较麻烦，我们还有更简洁的方式来创建一个对象。如下。

使用对象字面量来创建一个对象：

	var obj = {};

使用对象字面量，可以在创建对象时，直接指定对象中的属性。语法：{属性名:属性值,属性名:属性值....}

例如：

	var obj2 = {

		name: "猪八戒",
		age: 13,
		gender: "男",
		test: {
			name: "沙僧"
		}
		//我们还可以在对象中增加一个方法。以后可以通过obj2.sayName()的方式调用这个方法
		sayName: function(){
			console.log('smyhvae');
		}
	};

对象字面量的属性名可以加引号也可以不加，建议不加。如果要使用一些特殊的名字，则必须加引号。

属性名和属性值是一组一组的键值对结构，键和值之间使用:连接，多个值对之间使用,隔开。如果一个属性之后没有其他的属性了，就不要写,，因为它是对象的最后一个属性。

遍历对象中的属性：for ... in

语法：

for (var 变量 in 对象名) {

}

解释：对象中有几个属性，循环体就会执行几次。每次执行时，会将对象中的每个属性的属性名赋值给变量。

语法举例：

for (var key in obj) {
	console.log(key); // 这里的 key 是：对象属性的键
	console.log(obj[key]); // 这里的 obj[key] 是：对象属性的值
}

举例：

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title></title>
	<script type="text/javascript">
		var obj = {
			name: "smyhvae",
			age: 26,
			gender: "男",
			address: "shenzhen",
            sayHi: function() {
                console.log(this.name);
            }
		};

		// 遍历对象中的属性
		for (var key in obj) {
			console.log("属性名:" + key);
			console.log("属性值:" + obj[key]); // 注意，因为这里的属性名 keu 是变量，所以，如果想获取属性值，不能写成 obj.key，而是要写成 obj[key]
		}
	</script>
</head>

<body>
</body>

</html>

打印结果：

属性名:name
属性值:smyhvae

属性名:age
属性值:26

属性名:gender
属性值:男

属性名:address
属性值:shenzhen

属性名:sayHi
属性值:function() {
                    console.log(this.name);
                }

我的公众号

想学习代码之外的技能？不妨关注我的微信公众号：千古壹号（id：qianguyihao）。

扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外：

10 KiB Raw Blame History Unescape Escape

对象简介

面向对象简介

对象的概念

为什么需要对象

两条补充

对象和数据类型之间的关系

数据类型分类

一个经典的例子

对象的分类

对象的基本操作

创建对象

向对象中添加属性

获取对象中的属性

修改对象的属性值

删除对象的属性

in 运算符

对象字面量

遍历对象中的属性：for ... in

我的公众号

10 KiB

Raw Blame History