javascript基础（对象）

1. 对象的概念

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

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

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

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

「为什么需要对象」

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

• 为了更好地存储一组数据，对象应用而生；对象中为每项数据设置了属性名称，可以访问数据更语义化，数据结构清晰，表意明显，方便开发者使用。

  var obj = {
    "name":"fan",
    "sex":"male",
    "age":18,
    "height":155
  }

2. 创建对象的三种方式

2.1 利用字面量创建对象

• 就是花括号 { } 里面包含了表达这个具体事物（对象）的属性和方法；{ } 里面采取键值对的形式表示
  -键：相当于属性名
  -值：相当于属性值，可以是任意类型的值（数字类型、字符串类型、布尔类型，函数类型等）

 // 1.利用对象字面量创建对象 {}
        // var obj = {};  // 创建了一个空的对象 
        var obj = {
                uname: '张三疯',
                age: 18,
                sex: '男',
                sayHi: function() { //匿名函数
                    console.log('hi~');

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

• 对象的使用

  • 对象的属性：对象中存储具体数据的“键值对”中的键称为对象的属性，即对象中存储具体数据的项。

  • 对象的方法：对象中存储函数的“键值对”中的“键”称为对象的方法，即对象中存储函数的项。

  • 访问对象的属性：对象里面的属性调用：对象.属性名；对象里面属性的另一种调用方式：对象['属性名'],注意方括号里面的属性必须加上引号。

  • 调用对象的方法:对象.方法名();

  •   // 2. 使用对象
                // (1). 调用对象的属性 我们采取 对象名.属性名 . 我们理解为 的
            console.log(obj.uname); //张三疯
            // (2). 调用属性还有一种方法 对象名['属性名']
            console.log(obj['age']); //18
            // (3) 调用对象的方法 sayHi   对象名.方法名() 千万别忘记添加小括号
            obj.sayHi(); //hi~

    2.1.1 变量、属性、函数、方法总结：

  • ①变量：单独声明赋值，单独存在

  • ②属性: 对象里面的变量称为属性，不需要声明，用来描述该对象的特征。

  • ③方法：方法是对象的一部分，函数不是对象的一部分，函数是单独封装操作的容器。对象里面的函数称为方法，方法不需要声明，使用"对象.方法名()"的方式就可以调用，方法用来描述该对象的行为和功能。
  • ④函数: 单独存在的，通过"函数名()"的方式就可以调用。

  // 1.变量和属性的相同点 他们都是用来存储数据的 
        var num = 10;
        var obj = {
            age: 18,
            
        }

        console.log(obj.age);
        // console.log(age); 这种写法是错的
        不同点：
        // 变量 单独声明并赋值  使用的时候直接写变量名 单独存在
        // 属性 在对象里面的不需要声明的 使用的时候必须是 对象.属性

// 2. 函数和方法的相同点 都是实现某种功能  做某件事
 var obj = {
            age: 18,
            fn: function() {

            }
        }

        function fn() {

        }
    
        不同点：
        // 函数是单独声明 并且调用的: 函数名() 单独存在的
        // 方法 在对象里面 调用的时候 :对象.方法()

平时开发：把方法就叫函数。

2.2 利用new Object创建对象

• 创建空对象

• 给空对象添加属性和方法

<script>
        // 利用 new Object 创建对象
        var obj = new Object(); // 创建了一个空的对象
        obj.uname = '张三疯';
        obj.age = 18;
        obj.sex = '男';

        // var fun =function(){} 添加方法像创建函数表达式
        obj.sayHi = function() {
                console.log('hi~');

            }
            // (1) 我们是利用 等号 = 赋值的方法 添加对象的属性和方法
            // (2) 每个属性和方法之间用 分号结束
            // (3)Object()第一个字母大写；
            //(4) new Object() 需要new关键字，使用的格式:对象.属性 = 值
        console.log(obj.uname);
        console.log(obj['sex']);
        obj.sayHi();
    </script>

2.3 利用构造函数创建对象

    我们为什么需要使用构造函数？
就是因我们前面两种创建对象的方式一次只能创建一个对象

  <script>
        var ldh = {
            uname: '刘德华',
            age: 55,
            sing: function() {
                console.log('冰雨');

            }
        }
        var zxy = {
                uname: '张学友',
                age: 58,
                sing: function() {
                    console.log('李香兰');

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

构造函数是一种特殊的函数，主要用来初始化对象，即为对象成员变量赋初始值,它总与new运算符一起使用，我们可以把对象中一些公共的属性和方法抽出来，然后封装到这个函数里面。

• 构造函数的封装格式：

 // 构造函数的语法格式
         function 构造函数名(形参1，形参2) {
            this.属性1 = 值;
           this.属性2=值
            this.方法 = function() {}
        }
          new 构造函数名(实参1，实参2);

• 构造函数的调用格式

var obj = new 构造函数名(实参1，实参2，实参3);

 function Star(uname, age, sex) {
            this.name = uname;
            this.age = age;
            this.sex = sex;
            this.sing = function(song) {
                console.log(this.name + song);

            }
        }
        var ldh = new Star('刘德华', 18, '男'); // 调用函数返回的是一个对象
        console.log(typeof ldh);  //obj
        console.log(ldh.name);
        console.log(ldh['sex']);
        ldh.sing('冰雨');
        var zxy = new Star('张学友', 19, '男');
        console.log(zxy.name);
        console.log(zxy.age);
        zxy.sing('李香兰')

        // 1. 构造函数名字首字母要大写
        // 2. 我们构造函数不需要return 就可以返回结果
        // 3. 我们调用构造函数 必须使用 new
        // 4. 我们只要new Star() 调用函数就创建一个对象 ldh  {}
        // 5. 我们的属性和方法前面必须添加 this

2.3.1 构造函数和对象的区别：

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

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

2.3.2 new关键字执行过程：
1. new 构造函数可以在内存中创建了一个空的对象 
2. this 就会指向刚才创建的空对象
3. 执行构造函数里面的代码 给这个空对象添加属性和方法
4. 返回这个对象   （所以构造函数里面不需要return）

<script>
        function Star(uname, age, sex) {
            this.name = uname;
            this.age = age;
            this.sex = sex;
            this.sing = function(song) {
                console.log(song);

            }
        }
        var ldh = new Star('刘德华', 18, '男');
        console.log(ldh);
        console.log(ldh.name);
        ldh.sing('冰雨')
    </script>

this指的是创建出来的的对象 ：ldh

3. 遍历对象

for...in 语句用于对数组或者对象的属性进行循环操作。（最好对象）

其语法如下：
  for (变量 in 对象名字) {
      // 在此执行代码
  }
  语法中的变量是自定义的，它需要符合命名规范，通常我们会将这个变量写为 k 或者 key。
  
  for (var k in obj) {
    console.log(k);      // 这里的 k 是属性名
    console.log(obj[k]); // 这里的 obj[k] 是属性值
}

  // 遍历对象 
        var obj = {
                name: 'pink老师',
                age: 18,
                sex: '男',
                fn: function() {}
            }

 for (var k in obj) {
            // console.log(k); // k 变量 输出得到的是: 属性名 name、age、sex、fn
            console.log(obj[k]); // obj[k] 得到是: 属性值

        }