金色小芝麻

vuePress-theme-reco 金色小芝麻    2021 - 2023
金色小芝麻 金色小芝麻

Choose mode

  • dark
  • auto
  • light
主页
分类
  • JavaScript
  • BUG复盘
  • SVG笔记
  • TypeScript
  • 个人总结
  • CSS笔记
  • 开发工具
  • 前端入门
  • Vue2.0
  • 性能优化
  • 架构学习
  • 每日一题
标签
时间轴
社交
  • 掘金 (opens new window)
author-avatar

金色小芝麻

83

文章

27

标签

主页
分类
  • JavaScript
  • BUG复盘
  • SVG笔记
  • TypeScript
  • 个人总结
  • CSS笔记
  • 开发工具
  • 前端入门
  • Vue2.0
  • 性能优化
  • 架构学习
  • 每日一题
标签
时间轴
社交
  • 掘金 (opens new window)
  • 前端入门

    • 博客搭建过程及相关配置
    • 数组中的16种常用方法
    • JS中的数据类型简析——基本数据类型值
    • JS中的数据类型object基础
    • JS中三种常见的判断
    • 数据类型之间的区别(堆内存Heap VS 栈内存Stack)
    • JS基础练习题及解析
    • 开关灯的小案例
    • JS中数据类型检测方法——typeof
    • 条件判断几个小练习
    • JS循环——for循环
    • 自定义属性实现选项卡小案例
    • 字符串中的12种常用方法
    • DOM操作的简单原理
    • JS实现隔行变色鼠标跟随小案例
    • JS中function的基础知识
    • JS中数组去重的三种方法
    • JS中时间格式化的三种方法
    • JS中URL参数处理的三种方法
    • JS小案例——获取随机验证码
    • DOM操作之——获取DOM标签的9种方式
    • DOM操作之——DOM节点类型及属性
    • DOM操作之——元素的增删改、样式修改、插入内容
    • JS中THIS相关问题梳理
    • JS中的变量提升机制
    • 在全局:私有上下文中:带VAR和不带VAR的区别
    • 作用域和作用域链查找机制
    • JS中堆栈内存的释放问题
    • JS中的闭包机制
    • ES3和ES6定义变量的区别
    • JS中的单例和工厂设计模式
    • JS中的面向对象OOP理论基础
    • 构造函数创建自定义类
    • JS中的原型和原型链
    • Math中常用的9种方法
    • 从一道阿里经典面试题剖析函数三种角色
    • 重写内置call
    • 重写一个内置new
    • 浏览器渲染页面的主体流程
    • 减少DOM的回流和重绘
    • JS中的多种继承方式
    • JS中数据类型检测四种方式的优缺点
    • JS中的正则表达式&&全面梳理
    • 非严格模式 🆚 严格模式的区别
    • 数组方法reduce、filter、flat
    • 获取数组中最大值/最小值的三种基础方法
    • 轮播图——渐隐渐显版
    • 深克隆 VS 浅克隆|深比较 VS 浅比较|回调函数
    • 轮播图——左右切换版
    • 事件及事件绑定、事件对象及事件传播
    • 从在地址栏输入网址到看到页面的过程&&AJAX基础
    • 想自学JS吗?想提升JS底层原理吗?76张脑图带你彻底搞懂原生JS
    • 面试手写API系列
    • 30张脑图带你从零开始学VUE
    • JS中的盒子模型
    • 初识JS-基础中的基础
    • 前端发展简史
    • JS中的三大类输出方式

JS中的面向对象OOP理论基础

vuePress-theme-reco 金色小芝麻    2021 - 2023

JS中的面向对象OOP理论基础

金色小芝麻 2020-05-28

标记语言:

  • HTML5
  • CSS3
  • ...

编程语言:

  • POP(Procedure Oriented)面向过程程序设计:
    • C语言
    • ...
  • OOP(object Oriented Programming)面向对象程序设计:
    • JAVA
    • PHP
    • PYTHON / GO / RUBY
    • ...
    • JAVASCRIPT / NODE.JS

面向对象程序设计中的三大概念:

  • 对象:泛指,JS中我们操作和研究的事务都是对象
  • 类:把抽象的对象,按照功能特点,进行的详细划分,划分成为很多的类别
  • 实例:每一种类别中具体的事务

# 一、对象

有句话说的好:面向对象编程的世界里“万物皆对象”;

就好像我们的大自然一样,我们画图了解一下

对象就像是我们上图中的大自然,这里面的东西是在是太太多了...,我们就先了解一下就好;

# 二、内置类

根据JS中事务的特征,进行类别划分,而默认划分好的类别,就是内置类

  • -1).数据类型中的内置类

    • Number类:每一个数字都是这个类的一个实例
    • String类
    • Boolean类
    • Null类 / Undefined类(浏览器中禁止我们自己访问这两个类)
    • Symbol类
    • Object 对象数据类型类:所有的对象数据类型都是这个类的一个实例
      • Object {}普通对象就是它的实例
      • Array数组类 每一个数组是Array类的实例也是Object类的实例
      • RegExp正则类
      • Date日期类
      • ...
    • Function类:所有的函数都是这个类的实例
  • -2).DOM元素对象或者DOM元素集合也都有自己的内置类

    • ...

    • Node 节点类

      • Element 元素标签类
        • HTMLElement HTML元素标签类
          • HTMLDivElement 每一个DIV元素对象是它的一个实例
          • HTMLAnchorElement每个A元素对象是它的一个实例
          • 每一个元素标签对象都有一个自己对应的内置类
        • XMLElement
        • ...
      • Text 文本节点类
      • Document 文档节点类
        • HTMLDocument每一个document都是它的一个实例
      • ...
    • HTMLCollection 元素集合类:基于getElementsByTagName等方法获取到的元素集合都是它的一个实例

    • NodeList 节点集合类

  • ......

JS本身就是按照“面向对象思想(类和实例)”设计出来的语言,所以我们不论是研究和学习JS,还是在工作中进行项目开发(组件封装),也都应该按照面向对象的思想来学习和开发,例如:我想研究数组

# 三、以研究数组为例

  • 1.每一个数组都是Array这个类的实例,每个实例都是单独的一个个体(互相是不冲突的,类似于没有一模一样的两个人,在JS中也基本上没有完全一样的两个实例[有特殊情况])
  • 2.我们拿出某一个实例去分析其特点和结构,那么Array的其它实例也具备相同的特点和结构
  • 3.数组中有很多浏览器内置的方法,这些方法都是类提供给实例的,每一个实例都能具备和使用这些方法(前提是当前类的实例才能使用,如果不是它的实例,则不能使用)
let arr1=[12,23];
let arr2=[12,23];
console.log(arr1===arr2); //=>false 不同的堆内存地址

// push是Array这个类提供的方法,只要是Array类的实例(数组是它的实例)都可以调用这些方法
let arr = [10, 20];
arr.push(30);
console.log(arr); //=>[10,20,30]

// ARGUMENTS不是Array的实例,不能调它提供的方法
function func() {
	// ARGUMENTS实参集合中存储了传递的实参信息,它是一个类数组(类似于数组的结构,但是它不是数组,不是Array类的实例)
	arguments.push(30); //=>Uncaught TypeError: arguments.push is not a function
	console.log(arguments);
}
func(10, 20);

内置类我们先简单了解这些;

当我们需要自己做一些事情的时候,我们自己基于构造函数,创建的类就是自定义类;

构造函数模式也是我们JS学习的重点,所以单独拿出一篇讲解,今天的内容到此结束,下一篇内容为“构造函数创建自定义类”

# 思维导图

欢迎来到 金色小芝麻
看板娘