JavaScript进阶之深入面向对象

目录

  • 深入面向对象
    • 一、编程思想
      • [1.1 面向过程](#1.1 面向过程)
      • [1.2 面向对象(oop)](#1.2 面向对象(oop))
    • 二、构造函数
    • 三、原型
      • [3.1 原型](#3.1 原型)
      • [3.2 constructor属性](#3.2 constructor属性)
      • [3.3 对象原型](#3.3 对象原型)
      • [3.4 原型继承](#3.4 原型继承)
      • [3.5 原型链](#3.5 原型链)

深入面向对象

一、编程思想

1.1 面向过程

面向过程是分析解决问题所需要的步骤,用函数一步一步实现,再依次调用

即分析步骤,按照步骤解决问题

优点:性能更高,适合与硬件联系更紧密

缺点:没有面向对象容易维护、易复用、易扩展

1.2 面向对象(oop)

面向对象把事务分解成对象,有对象之间分工合作

即以对象功能划分问题 ,而不是步骤

特性:封装、继承、多态

优点:灵活、代码可复用、容易维护和开发、适合多人合作,可设置低耦合系统,更灵活

缺点:性能比面向过程低

二、构造函数

构造方法会造成浪费内存 问题

eg:

如果希望所有对象使用同一个函数,节省内存,就要用到原型

三、原型

3.1 原型

  1. 构造函数通过原型分配的函数是所有对象所共享的
  2. js规定每一个构造函数都有一个prototype 属性,指向另一个对象,所以我们也称为原型对象
  3. 这个对象可以挂载函数,对象实例化不会多次创建原型上函数,节约内存
  4. 我们可以把那些不变的方法,直接定义在prototype对象上,这样所有对象的实例就可以共享这些方法
  5. 构造函数和原型对象中的this都指向实例化的对象

3.2 constructor属性

constructor:构造函数

作用:该属性指向原型对象的构造函数 ,简单理解,就是指向我的爸爸

使用场景:如果有多个对象 的方法,可以使用给原型对象采取对象形式赋值

但这样会覆盖 构造函数原型对象原来的内容 ,这样修改后的原型对象constructor不再指回当前构造函数 ,解决这个问题,可以在修改后的原型对象中,添加一个constructor指回原来的构造函数

eg:

3.3 对象原型

对象都会有一个属性__proto__指向构造函数的prototype原型对象,之所以对象都可以使用构造函数prototype原型对象的属性和方法,就是因为有__proto__原型的存在

【注意】:① __proto__是js非标准属性 ② [[prototype]]和__proto__意义相同 ③ 对象原型用来表明当前实例对象指向哪个原型对象prototype(即对象原型指向原型对象) ④ __proto__对象原型里也有一个constructor属性,指向创建该实例对象的构造函数 ⑤ __proto__是只读的,不能赋值

关系指向:

3.4 原型继承

问题:如上,如果创建男人和女人都继承Person,他们都使用了同一个对象 ,根据引用类型的特点,修改一个就都会改变(eg:对女人添加方法,同时也会影响男人,也给男人添加了这个方法)

解决:用构造函数创建Person,而不是对象

正确方法:下图:Person叫父类构造函数

3.5 原型链

原型链:对象都有__proto__属性,这个属性是他的对象原型,原型对象也是一个对象,也有__proto__属性,指向原型对象的对象原型,这样一层一层形成的链式结构称作原型链,最顶层找不到则返回null

【记住】:所有对象里面都有__proto__对象原型,所有的原型对象都有constructor属性指向创造原型对象的构造函数

相关推荐
小羊没烦恼!4 天前
初探性能优化——2个月到4小时的性能提升
java·开发语言·windows·算法·c#
三十而立洋4 天前
Cookie 详解:从产生到安全,一次讲透
前端·javascript
伞伞悦读4 天前
【第38期】Python 模块与包详解:import、from、模块搜索路径、包结构和 __init__
开发语言·python
卡布鲁4 天前
把一个 Vite + Vue3 应用塞进 qiankun (React + Umi3) 主站:十个坑的复盘
前端·javascript·react.js
C语言小火车4 天前
C/C++ 为什么需要编译器?
开发语言·c++
李少兄4 天前
JavaScript 隐式全局变量解析
javascript
霍霍的袁4 天前
【C++】map 和 set 的使用 | 从用法到底层
开发语言·c++·学习·visual studio
孙启超4 天前
【AI开发之Rust】第 11 课:智能指针与内部可变性
开发语言·后端·rust
此生决int4 天前
深入理解C++系列(20)——C++11(下)
开发语言·c++
沙蒿同学4 天前
我用 Go 搭了一条 AI Agent 流水线:从 1 张商品图到一整套淘宝详情页
前端·javascript·后端