JS深入对象

本节目标

深入了解对象

• 创建对象
• 构造函数
• 实例成员
• 静态成员

创建对象

💡 Tips：创建对象有三种方式

1, 对象字面量

<script>
    const o = {
      name: '佩奇',
      age: 8,
    }
</script>

2, new Object()

<script>
    const b = new Object({ name: '乔治' })
    // 或者
    const j = new Object()
    j.name = '邦德'
</script>

3, 构造函数

通过构造函数创建对象

构造对象

构造函数是一种特殊的函数, 可以快速构建多个类似的对象

示例:

<script>
    // 利用构造函数创建对象
    function Pig(name, age, gender) {
      this.name = name
      this.age = age
      this.gender = gender
    }
    const Peppa = new Pig('佩奇', 8, '女')
    console.log(Peppa)
    const George = new Pig('乔治', 3, '男')
    console.log(George)
  </script>

规范:

• 构造函数以大写字母开头
• 构造函数只能由 new 操作符执行
• 使用 new 关键字调用函数的行为被称为实例化
• 构造函数内部无需写returen, 返回值是新创建的对象
• 构造函数内部的return返回的值无效
• 实例化构造函数没有参数时可以省略(), 但是不建议省略
• new Object() new Date() 也是实例化构造函数
• 构造函数的本质技术是普通函数

实例化执行过程:

1. 创建空对象
2. 构造函数的this指向空对象
3. 执行构造函数的代码
4. 返回新对象

实例成员

通过构造函数创建的对象称为实例对象, 实例对象中的属性和方法称为实例成员(实例属性和实例方法)

<script>
    // 构造函数
    function Pig(name) {
      this.name = name
    }
    const peiqi = new Pig('佩奇') // 实例对象
    peiqi.age = 6 // 实例属性
    peiqi.asyHi = function () {  // 实例方法
      console.log('hi')
    }

    // 实例对象互相独立
    const qiaozhi = new Pig('乔治')
    console.log(peiqi === qiaozhi)
  </script>

说明:

1. 为构造函数传入参数, 创建结构相同 但值不同的对象
2. 通过构造函数创建的实例对象是独立的, 彼此互不影响

静态成员

构造函数的属性和方法被称为静态成员(静态属性和静态方法)

<script>
    // 构造函数
    function Pig(name) {
      this.name = name
    }
    Pig.eyes = 2  // 静态属性
    Pig.sayHi = function () { // 静态方法
      console.log('hi')
      console.log(this) // Pig
    }
    Pig.sayHi()
  </script>

说明:

1. 静态成员只能通过构造函数来访问
2. 静态方法中的this指向构造函数
3. Date.now() Math.PI Math.random() ... 这些都是使用构造函数的静态方法

本节总结

1. 创建对象的三种方式: 对象字面量 / new Object / 构造函数
2. 构造函数的作用: 批量创建对象
3. 实例成员: 实例对象的属性和方法被称为实例成员
4. 访问实例成员: 实例对象相互独立, 实例成员通过当前实例对象调用
5. 静态成员: 构造函数的属性和方法被称为静态成员
6. 访问静态成员: 静态成员只能通过构造函数访问