JavaScript基础之对象

---

前言

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

---

对象是由属性和方法组成的：
1.属性：事物的特征，在对象中用属性来表示（常用名词
2.方法：事物的行为，在对象中用方法来表示（常用动词）

1.创建对象

在 JavaScript 中，现阶段我们可以采用三种方式创建对象（object）：

• 利用字面量创建对象
• 利用 new Object创建对象
• 利用构造函数创建对象

1.1利用字面量创建对象

对象字面量： 就是花括号 { } 里面包含了表达这个具体事物（对象）的属性和方法
{ } 里面采取键值对的形式表示

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

  <script>
    var obj = {
      name: '格子',
      age: 18,
      sex: '男',
      hellow: function () {
        console.log('Hellow,World!');
      }
    }
  </script>

对象的调用

• 对象里面的属性调用 : 对象.属性名
• 对象里面属性的另一种调用方式 : 对象[‘属性名’]，注意方括号里面的属性必须加引号
• 对象里面的方法调用：对象.方法名() ，注意这个方法名字后面一定加括号

  <script>
    console.log(obj.name);  //格子
    console.log(obj['age']);  //18
    obj.hellow();   //Hellow,World!
  </script>

1.2利用 new Object 创建对象

跟之前的 new Array() 原理一致：var 对象名 = new Object()

  <script>
    var obj = new Object()
    obj.name = '格子'
    obj.age = 18
    obj.sex = '男'

    console.log(obj.name);   //格子
  </script>

1.3利用构造函数创建对象

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

Tips:

• 构造函数用于创建某一类对象，其首字母要大写
• 构造函数要和 new 一起使用才有意义

  <script>
    function 构造函数名(形参) {
      this.属性名 = 属性值
      this.方法名 = function () { }
    }

    var 实例对象名=new 构造函数名(实参)
  </script>

举例：

  <script>
    function Obj(name) {  //注意首字母大写
      this.name = name
      this.hellow = function say() {
        console.log('Hellow,World!');
      }
    }

    var obj = new Obj('格子')
    console.log(obj.name)   //格子
    obj.hellow()  //Hellow,World!
  </script>

构造函数和对象

• 构造函数，如 Stars()，抽象了对象的公共部分，封装到了函数里面，它泛指某一大类（class）
• 创建对象，如 new Stars()，特指某一个，通过 new 关键字创建对象的过程我们也称为对象实例化

new关键字

new 在执行时会做四件事:

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

2.遍历对象的属性

• for...in 语句用于对数组或者对象的属性进行循环操作

  <script>
    var obj = new Object()
    obj.name = '格子'
    obj.age = 18

    for (k in obj) {
      //这里的k得到的是属性名
      console.log(k);   //name,age
      console.log(obj[k]);//格子，18
    }
  </script>