JS进阶常用面试必问知识点2

99 阅读2分钟

深入对象

创建对象三种方式

<body>
  <script>
    // 1. 利用字面量创建对象(常用的一种方式)
    const o = {
      name: '佩奇'
    }
    console.log(o)

    // 2. 利用 new Object 创建对象 (了解)
    // const oo = new Object({ name: '佩奇' })
    const oo = new Object()
    oo.name = '佩奇'
    console.log(oo)

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

  </script>

构造函数

构造函数: 是一种特殊的函数,主要用来创建对象(初始化对象)

使用场景: 常规的 {...} 语法允许创建一个对象。比如我们创建了佩奇的对象,继续创建乔治的对象还需要重新写一遍,此时可以通过构造函数来快速创建多个类似的对象

<body>
  <script>
    // 构造函数:是一种特殊的函数,用来创建对象(并完成初始化对象)
    // 1. 构造函数的2个约定 首字母要大写, 利用new关键字来调用函数
    // function Pig() {

    // }
    // console.log(new Pig)
    // console.log(Pig())
    function Pig(name, age, gender) {
      // this.name 属性   
      // name 是形参也就是属性值
      this.name = name
      this.age = age
      this.gender = gender
      // return 123
    }
    const peiqi = new Pig('佩奇', 6, '女')
    console.log(peiqi)
    const qiaozhi = new Pig('乔治', 3, '男')
    console.log(qiaozhi)

    // 2. 构造函数创建对象说明
    // 2.1 new 关键字 实例化对象
    // 2.2 如果构造函数没有参数,则可以省略小括号
    // 2.3 构造函数里面无需写 return
    // 2.4 new Object()  new Date() 也是在实例化对象
  </script>
</body>

说明:

  1. 使用 new 关键字调用函数的行为被称为实例化
  2. 实例化构造函数时没有参数时可以省略 ()
  3. 构造函数内部无需写return,返回值即为新创建的对象
  4. newObject() new Date()也是实例化构造函数

new 实例化过程

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

实例成员&静态成员

实例成员

实例成员:

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

<body>
  <script>
    // 实例成员和静态成员
    // 1. 实例成员:实例对象上的属性和方法属于实例成员
    function Pig(name) {
      this.name = name
    }
    const peiqi = new Pig('佩奇')
    const qiaozhi = new Pig('乔治')
    peiqi.name = '小猪佩奇'  // 实例属性
    peiqi.sayHi = () => {  // 实例方法
      console.log('hi~~')
    }
    console.log(peiqi)
    console.log(qiaozhi)
    console.log(peiqi === qiaozhi)
  </script>

说明:

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

静态成员

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

<script>
  // 2. 静态成员 : 构造函数上的属性和方法称为静态成员
  function Pig(name) {
    this.name = name
  }
  Pig.eyes = 2  // 静态属性
  Pig.sayHi = function () {  // 静态方法
    console.log(this)
  }
  Pig.sayHi()
  console.log(Pig.eyes)  // 2
</script>

说明:

  1. 静态成员只能构造函数来访问
  2. 静态方法中的this指向构造函数

比如 Date.now() Math.PI Math.random()

一切皆对象

引用类型:

Object,Array,RegExp,Date等

基本数据类型:

字符串、数值、布尔、undefined、null

但是,我们会发现有些特殊情况:

其实字符串、数值、布尔、等基本类型也都有专门的构造函数,这些我们称为包装类型 包装类型执行过程:

  • 创建一个 String 类型的实例
  • 调用实例上的特定方法
  • 销毁实例

JS中几乎所有的数据都可以基于构造函数创建,不同的构造器创建出来的数据拥有不同的属性和方法

<body>
  <script>
    // 包装类型
    // const str = 'andy'
    // console.log(str.length)

    // 包装过程
    // const str = new String('andy')
    // str.substring()
    // str = null 
  </script>
</body>