JavaScript 快速入门四

对象

JavaScript 基础入门

对象
创建对象的三种方式
new 关键字
遍历对象属性

为什么需要对象

保存一个值时，可以使用变量，保存多个值（一组值）时，可以使用数组。如果要保存一个人的完整信息呢？

比如说：

一个人有 姓名 、性别、 年龄 、身高、 体重

用一个个变量去存值吗？不是的，用数组对吧。

将“张三”的个人的信息保存在数组中的方式为：

var arr = ['张三', '男',20, 180,140];

什么是对象？

现实生活中：万物皆对象，对象是一个具体的事物。看得见摸得着的实物。例如，一本书、一辆汽车、一个人可以是“对象”，一个数据库、一张网页、一个与远程服务器的连接也可以是“对象”。

明星 小马哥

女朋友 Lisa

手机 iphoneXR

老师的手机 张三老师的手机

手机是一个对象

名词 -------属性

动词--------方法

对象是由属性和方法组成的

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

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

JavaScript 中，对象是一组无序的相关属性和方法的集合，所有的事物都是对象，例如字符串、数值、数组、函数等。

js创建对象的三种方式

**利用字面量创建对象 **

var 对象名 = {
    属性名: 属性值,
    属性名1: 属性值1,
    属性名2: 属性值2,
    方法名 : function(){}
    
}

**对象字面量：**就是花括号 { } 里面包含了表达这个具体事物（对象）的属性和方法。

{ } 里面采取键值对的形式表示

键：相当于属性名

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

      var obj = {
				uname: '张三',
				age: 20,
				sex: '男',
				sayHi: function() {
					console.log('hi~');

				}
			}
			// (1) 里面的属性或者方法我们采取键值对的形式  键 属性名： 值 属性值
			// (2) 多个属性或者方法中间用逗号隔开的
			// (3) 方法冒号后面跟的是一个匿名函数

创建好了对象，怎么用对象呢？

对象的调用

        // (1). 调用对象的属性 我们采取 对象名.属性名     . 我们理解为 的
        console.log(obj.uname);
        // (2). 调用属性还有一种方法 对象名['属性名']
        console.log(obj['age']);

        // (3) 调用对象的方法 sayHi   对象名.方法名() 千万别忘记添加小括号
        obj.sayHi();

对象里面的属性调用 :

对象.属性名 　或者　对象[‘属性名’]

对象里面的方法调用：

对象.方法名()

提出疑问？

变量、属性、函数、方法的区别

        // 变量和属性的相同点 他们都是用来存储数据的 

       // 变量 单独声明并赋值  使用的时候直接写变量名 单独存在
       var num = 10;
       console.log(num);

     // 属性 在对象里面的不需要声明的  使用的时候必须是 对象.属性
        var obj = {
            age: 18
        }
         //console.log(age);
         console.log(obj.age);
        
        



         // 函数和方法的相同点 都是实现某种功能  做某件事
       
  // 函数是单独声明 并且调用的 函数名() 单独存在的
        function fn() {
           console.log('哈哈哈');
        }
        fn();



       // 方法 在对象里面 调用的时候 对象.方法()
        var obj = {
            age: 18,
            fn: function() {
                console.log('哈哈哈');
                console.log(this.age);
            }
        }

        obj.fn();
       

       
       

       
      
       

**利用 new Object 创建对象 **

跟我们前面学的 new Array( ) 原理一致

var 对象名 = new Object(); 
对象名.属性名 = 属性值;
对象名.属性名1 = 属性值1;
对象名.方法名  = function(){}

<script>
        // 利用 new Object 创建对象
        var obj = new Object(); // 创建了一个空的对象
        obj.uname = '张三';
        obj.age = 18;
        obj.sex = '男';
        obj.sayHi = function() {
                console.log('he~tui~');

            }
        // (1) 利用 等号 = 赋值的方法 添加对象的属性和方法
        // (2) 每个属性和方法之间用分号结束
        console.log(obj.uname);
        obj.sayHi();
    </script>

注意点：

Object() ：第一个字母大写

 new Object() ：需要 new 关键字 

使用的格式：对象.属性 = 值; 

利用构造函数创建对象

 <script>
        // 我们为什么需要使用构造函数
        // 前面两种创建对象的方式一次只能创建一个对象
        var ldh = {
            uname: '马',
            age: 55,
            sing: function() {
                console.log('云');

            }
        }

        var zxy = {
                uname: '马',
                age: 58,
                sing: function() {
                    console.log('化腾');

                }
            }
            // 一次创建一个对象，但是里面很多的属性和方法是大量相同的 我们只能复制 
            // 可以利用函数的方法 重复这些相同的代码    这个函数称为 构造函数
            // 这个函数不一样，里面封装的不是普通代码，而是对象  
            
    </script>

**构造函数 ：**把对象里面一些相同的属性和方法抽象出来封装到函数里面

function 构造函数名(参数..) {
     this.属性名 = 属性值;
     this.方法名  = function() {}
 }
 var l= new 构造函数名(参数..); 

在 js 中，使用构造函数要时要注意以下两点：

• 构造函数用于创建某一类对象，其首字母要大写

构造函数要和 new 一起使用才有意义

<script>
       // 构造函数和对象
       // 1. 构造函数  明星 泛指的某一大类  它类似于 java 语言里面的  类(class)
       function Star(uname, age, sex) {
           this.name = uname;
           this.age = age;
           this.sex = sex;
           this.sing = function(sang) {
               console.log(sang);

           }
       }
       // 2. 对象 特指 是一个具体的事物 马 ==  {name: "马", age: 20, sex: "男", sing: ƒ}
       var ldh = new Star('马', 20, '男'); // 调用函数返回的是一个对象
       console.log(ldh);
       // 3. 我们利用构造函数创建对象的过程也称为对象的实例化

</script>

注意:

利用构造函数创建对象

构造函数约定首字母大写。

函数内的属性和方法前面需要添加 this ，表示当前对象的属性和方法。

构造函数中不需要 return 返回结果。

当我们创建对象的时候，必须用 new 来调用构造函数。

对象有很多，一个对象也有很多属性和方法，我们怎么遍历他们

for…in

其语法如下：

for (变量　 in 　对象名字) {
// 在此执行代码
}

       // 遍历对象 
        var obj = {
                name: '马爸爸',
                age: 58,
                sex: '男',
                fn: function() {
                	console.log(6666); 
                }
            }
            // console.log(obj.name);
            // console.log(obj.age);
            // console.log(obj.sex);
        
        
        
            // for in 遍历对象
            // for (变量 in 对象) {

        // }
        for (var k in obj) {
            console.log(k); // k 变量 输出  得到的是 属性名
            console.log(obj[k]); // obj[k] 得到是 属性值
          
        }
        obj.fn();
        // 使用 for in 里面的变量    推荐写 k  或者  key