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属性指向创造原型对象的构造函数

相关推荐
万物得其道者成9 分钟前
React Zustand状态管理库的使用
开发语言·javascript·ecmascript
小白小白从不日白10 分钟前
react hooks--useReducer
前端·javascript·react.js
学步_技术15 分钟前
Python编码系列—Python抽象工厂模式:构建复杂对象家族的蓝图
开发语言·python·抽象工厂模式
下雪天的夏风22 分钟前
TS - tsconfig.json 和 tsconfig.node.json 的关系,如何在TS 中使用 JS 不报错
前端·javascript·typescript
diygwcom34 分钟前
electron-updater实现electron全量版本更新
前端·javascript·electron
volodyan37 分钟前
electron react离线使用monaco-editor
javascript·react.js·electron
wn53139 分钟前
【Go - 类型断言】
服务器·开发语言·后端·golang
^^为欢几何^^1 小时前
lodash中_.difference如何过滤数组
javascript·数据结构·算法
Hello-Mr.Wang1 小时前
vue3中开发引导页的方法
开发语言·前端·javascript
救救孩子把1 小时前
Java基础之IO流
java·开发语言