JS对象基础

前言

终于要学习对象啦，对于我们程序猿来说，永不单身！没对象？不可能滴！New一个就好了，哈哈！！！

---

废话不多说，一起来学习下JS对象吧！

一、对象是什么？

定义：在面向对象编程中，万物皆对象！对象是一种具体的事物。如：明星不是对象，但是周星驰是一个对象，对象一定是一个具体的事物！ 在JavaScript中，对象是一组无序的相关属性和方法的集合，所有的事物都是对象，例如：字符串、数值、数组、函数等。

二、对象的构成

1.属性

属性：是指事物的特征，在对象中用属性来表示（常用名词）

2.方法

方法：是指事物的行为，在对象中用方法来表示（常用动词）

示例：

//中文表示
一部iphone12手机（对象）
价格（属性）
9999元（属性值）
作用：打电话（方法）

//代码表示
  <script>
        var iphone12 = {  //iphone:对象名
            price: 9999, //price:属性  9999:属性值
            sendTEL: function () { //方法
                console.log("我能打电话")
            },
        }
        console.log(iphone12.price);
        console.log(iphone12.sendTEL())
    </script>

结果如图：

三、对象的创建及使用

创建对象的三种方式

1.利用字面量创建对象

对象字面量{}（花括号），里面包含了对象的属性和方法

示例：

 <script>
  	var obj = {
            name:'张三',//name:属性  张三：属性值
            age:18,		//age:属性 18:属性值
            sayHi: function () { //方法
                console.log("我能说：hello！")
            },
        }
        console.log(obj.name);	//第一种获取属性方法：对象名.属性名（注意不加引号）
        console.log(obj['age']);//第二种获取属性方法：对象名['属性名']（注意加引号）
        console.log(obj.sayHi());//获取方法：对象名.方法名()    注意别忘了括号哟
  </script>

结果如图：

小总结：
1、创建对象

1. 用字面量{ }创建对象，里面的属性或者方法采用的是：键:值 (键值对)的方式
2. 多个属性或者方法之间是 ，(用逗号)隔开
3. 方法 冒号后面跟的是一个匿名函数

2、 使用对象

4. （1）调用对象的属性，使用 对象名.属性名的方式，可以理解为，对象 的 属性
5. （2）调用对象的属性，也可使用 对象名[‘属性名’]的方式，注意加引号
6. 调用对象的方法： 对象名.方法名() ，千万别忘了加小括号哟

3、变量、属性、函数、方法的总结
变量：单独声明赋值、单独存在
属性：对象里面的变量称为属性、不需要声明，用来描述该对象的特征
函数：单独存在的、通过 函数名() 的方式就可以调用
方法：对象里面的函数称为方法、方法不需要声明、使用 对象.方法名() 的方式就可以调用，方法用来描述该对象的行为和功能
变量和函数都需要声明，属性和方法不需要声明就可直接使用

2.利用new Object创建对象

    <script>
        var obj = new Object()
        obj.name = '张三疯';
        obj.age = 18;
        obj.sayHi = function () {
            console.log("我能说：hello！")
        }
        console.log(obj.name);
        console.log(obj['age']);
        console.log(obj.sayHi());
    </script>

结果如图：

注意：在这里使用new Object() 创建对象，使用的是 =(等号)赋值的方法来添加对象的属性和方法

3.利用构造函数创建对象

为什么需要用构造函数创建对象？因为前面两种创建方法一次只能创建一个对象，请看下面代码：

 <script>
        var obj1 = {
            name: '张三疯',
            age: 18,
            sayHi: function () {
                console.log("hello")
            }
        }
        var obj2 = {
            name: '李四',
            age: 20,
            sayHi: function () {
                console.log("hello")
            }
        }
    </script>

可以发现，创建的对象属性和方法都相同，如果需要创建很多个，一个一个创建效率就会很低。但是，我们可以利用一个函数去重复创建对象，这个函数称为构造函数。构造函数中封装的不是普通代码，而是对象。
构造函数：是一种特殊的函数，主要用来初始化对象，即为对象成员变量赋初始值，它总与new运算符一起使用，我们可以把对象中一些公共的属性和方法抽取出来封装到这个函数里面。

构造函数的语法格式：

function 构造函数名(){			//this可以理解为： 对象的...
	this.属性=值；
	this.方法=function（）{}
}
使用构造函数：new 构造函数名            //注意：构造函数名首字母大写哟
//使用new调用构造函数返回的是一个对象

示例：

<script>						
        function Obj(name, age) {	//创建构造函数，传入两个参数
            this.name = name;
            this.age = age;
            this.sayHi = function () {
                console.log("hello!");
            }
        }
        var obj1 = new Obj('张三', 18) //使用new调用构造函数，返回的是一个对象
        console.log(typeof (obj1));   //使用typeof()函数判断obj1的数据类型，证明返回的是对象
        console.log(obj1.name);		 //获取名称
        console.log(obj1.age);		//获取年龄
        console.log(obj1.sayHi());	//调用方法
    </script>

结果如图：

小总结：

1、构造函数和对象的区别：

1. 构造函数是把对象相同的属性(公共部分)封装在一起，泛指的某一大类，如：明星/汽车图纸
   他类似于java里面的类(class)

2. 对象：特指的一个具体事物，如：刘德华/一辆真实的汽车

2、new关键字执行构造函数创建对象的过程

1. 在内存中创建一个新的空对象
2. 让this指向这个新对象
3. 执行构造函数里面的代码，给这个对象添加属性和方法
4. 返回这个新对象（所以构造函数里面不需要return）

通过new关键字创建对象的过程也加对象的实例化

---

四、JS对象和JSON对象

1.概念与区别

概念：js对象是一组无序的相关属性和方法的集合，json是js对象的表示法，是一种轻量级的数据交换格式。json独立于语言和平台，可以被任何编程语言读取以及作为数据格式传递。是目前服务端与客户端交换数据中使用最为广泛的标准格式。

JS对象不等于JSON，它只是一种使用JS对象格式的数据，并不是具体的实例对象，是跨平台跨语言传输数据的一种载体，不仅仅限于JS。

区别：

    <script>
        //json
        var obj = {
            "name": "张三",		//json的属性必须加引号
            "age": 18,			//json值不能是函数、undefined、NaN
            "sex": '男'			
        }
        //js对象
        var obj1 = {
            name: '张三',	//js对象的属性可以不加引号
            age: 18,		//js对象的属性值可以是函数、对象、字符串等
            sex: '男',
            sayHi: function () {
                console.log("hello!");
            }
        }
    </script>

2.JSON的格式

一般来说有一下2种格式：

1. 对象格式：

<script>
 //对象格式
       var obj1 = {
           "name": '张三',
           "age": 18,
           "sex": '男',
     	   }
</script>

2. 数组对象格式：

<script>
 //数组对象格式
 	  [
    	   {
           "name": '张三',
           "age": 18,
           "sex": '男',
     	   },
     	   {
           "name": '王五',
           "age": 17,
           "sex": '女',
     	   }
      ]
</script>
//这种格式是经常使用的，可以用循环来遍历里面的内容

3.JSON的转换

使用JSON.stringify() 将JS对象转换为可传输的JSON格式
示例：

<script>
  //js对象
        var obj1 = {
            name: '张三',
            age: 18,
            sex: '男',
            sayHi: function () {
                console.log("hello!");
            }
        }
        var newobj1 = JSON.stringify(obj1)	//转化为json
        console.log(newobj1);
</script>

结果入图：

可以发现，属性都用双引号引起来了，但是方法并没有显示，这证明了上面说的，json值不能为方法函数

总结

本次内容主要讲了js对象的基本概念、js对象的组成、如何创建js对象以及js对象和json的区别，介绍了json的格式以及如何将js对象转换为json,接下来会慢慢深入学习js对象的内容。