js中的面向对象(OOP)

314 阅读1分钟

理解js中的面向对象,培养自己按照面向对象编程思想去研究和学习的思维。

  • 对象:泛指,一切我们需要研究的东西都是对象
  • 类:对象的细分(大类和小类)
  • 实例:某一个类别中具体的某个事物

在js中,一切皆是对象,我们首先看一下js中我们经常看到的内置类:

  • 数据类型的内置类
    • Number 每一个数字都是它的实例
    • String
    • Boolean
    • Null/Undefined
    • Symbol/BigInt (特殊:不能被new)
    • Object 每一个对象都是Object类的实例
      • Object
      • Array
      • RegExp
      • Date
      • ...
    • Function 每一个函数都是Function类的实例
  • DOM操作的内置类
    • 每一个元素标签都有一个自己所属的类 (例如:HTMLDivElement -> HTMLElement -> Element -> Node -> EventTarget -> Object)
    • HTMLCollection
    • NodeList
    • CSSStyleDeclaration
    • ...
  • ...

在我们研究一些内置类的一些方法时,由于工作中有写类的方法不经常使用,但为了自己学的更全面,我们可以在控制台查看内置类的方法:

Array的__proto__

  • log语句打印的是结果,直接显示信息;
  • dir语句打印的是内容,对显示对象的所有属性和方法。

在JS中除了内置类,我们还需要自己定义“自定义类”,以及创建出自定义类的实例

执行的时候 “new 函数()” => 构造函数执行

  • 此时这个函数被称为一个自定义类(构造函数)
  • 返回值被称为当前自定义类的一个实例(有特殊情况)

这样就联系到了js的原型链看下面这张图:

一直在更新,有不好的地方希望大家指出,谢谢大家!