javascript进阶系列(四)—— 面向对象

145 阅读3分钟

持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第4天,点击查看活动详情

前言

大家好呀,我是L同学。在上篇文章javascript进阶系列(三)—— 面向对象中,我们学习了javascript中的箭头函数、数组和对象的解构赋值、面向对象等相关知识点等知识。今天,在这篇文章中,我们继续学习对象中的实例成员、静态成员、引用类型等相关知识点。

面向对象

实例成员

通过构造函数创建的对象称为实例对象,实例对象中的属性和方法称为实例成员。构造函数内部 this 实际上就是实例对象,为其动态添加的属性和方法即为实例成员。为构造函数传入参数,动态创建结构相同但值不同的对象。实例对象的 constructor 属性指向了构造函数。instanceof 用于检测实例对象对应的构造函数 。需要注意的是,构造函数创建的实例对象彼此独立互不影响。

<script>
  // 构造函数
  function Person() {
    // 构造函数内部的 this 就是实例对象

    // 实例对象中动态添加属性
    this.name = '小明';
    // 实例对象动态添加方法
    this.sayHi = function () {
      console.log('大家好~');
    }
  }

  // 实例化,p1 是实例对象
  // p1 实际就是 构造函数内部的 this
  let p1 = new Person();

  console.log(p1);
  console.log(p1.name); // 访问实例属性
  p1.sayHi(); // 调用实例方法
</script>

静态成员

在 JavaScript 中底层函数本质上也是对象类型,因此允许直接为函数动态添加属性或方法,构造函数的属性和方法被称为静态成员。静态成员指的是添加到构造函数本身的属性和方法。一般公共特征的属性或方法静态成员设置为静态成员。静态成员方法中的 this 指向构造函数本身。

<script>
  // 构造函数
  function Person(name, age) {
    // 省略实例成员
  }

  // 静态属性
  Person.eyes = 2;
  Person.arms = 2;
  // 静态方法
  Person.walk = function () {
    console.log('^_^人都会走路...');
    // this 指向 Person
    console.log(this.eyes);
  }

一切皆对象

在 JavaScript 中最主要的数据类型有 6 种,分别是字符串、数值、布尔、undefined、null 和 对象,常见的对象类型数据包括数组和普通对象。其中字符串、数值、布尔、undefined、null 也被称为简单类型或基础类型,对象也被称为引用类型。

在 JavaScript 内置了一些构造函数,绝大部的数据处理都是基于这些构造函数实现的,例如Date 就是内置的构造函数。甚至字符串、数值、布尔、数组、普通对象也都有专门的构造函数,用于创建对应类型的数据。

<script>
  // 实例化
	let date = new Date();
  
  // date 即为实例对象
  console.log(date);
</script>

引用类型

Object

Object 是内置的构造函数,用于创建普通对象。

<script>
  // 通过构造函数创建普通对象
  let user = new Object({name: '小明', age: 15});

  // 这种方式声明的变量称为【字面量】
  let student = {name: '小王', age: 21}
  
  // 对象语法简写
  let name = '小红';
  let people = {
    // 相当于 name: name
    name,
    // 相当于 walk: function () {}
    walk () {
      console.log('人都要走路...');
    }
  }

  console.log(student.constructor);
  console.log(user.constructor);
  console.log(student instanceof Object);
</script>

普通对象在内存中的存储方式是普通对象数据保存在堆内存之中,栈内存中保存了普通对象在堆内存的地址。普通对象在赋值时只是复制了栈内中的地址,而非堆内存中的数据。

普通对象赋值后,无论修改哪个变量另一个对象的数据值也会相当发生改变。推荐使用字面量方式声明对象,而不是 Object 构造函数。Object.assign()。通过Object.keys 静态方法获取对象中所有属性。通过Object.values 表态方法获取对象中所有属性值。

堆与栈的区别:

  1. 堆和栈是内存中的数据存储空间
  2. 简单类型的数据保存在内存的栈空间中
  3. 引用类型的数据保存在内存的堆空间中,栈内存中存取的是引用类型的地址(房间号)

Array

Array 是内置的构造函数,用于创建数组。数组在内存中的存储方式与普通对象一样的。

<script>
  // 构造函数创建数组
  let arr = new Array(5, 7, 8);

  // 字面量方式创建数组
  let list = ['html', 'css', 'javascript'];

  console.log(list.constructor);
  console.log(list instanceof Array);
</script>

数组在赋值时只是复制了栈内中的地址,而非堆内存中的数据。数组赋值后,无论修改哪个变量另一个对象的数据值也会相当发生改变。推荐使用字面量方式声明数组,而不是 Array 构造函数。

数组提供了很多方法。推荐使用字面量方式声明数组,而不是 Array 构造函数。 实例方法forEach用于遍历数组,替代for循环。filter过滤数组单元值,生成新数组。map迭代原数组,生成新数组。join数组单元素拼接成了符串。concat合并两个数组,生成新数组。sort对原数组单元值排序。splice删除或替换原数组单元。indexOf检索数组单元值。reverse反转数组。静态方法from伪数组转成数组。