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

相关推荐
_院长大人_38 分钟前
设计模式-工厂模式
java·开发语言·设计模式
MATLAB代码顾问40 分钟前
MATLAB实现决策树数值预测
开发语言·决策树·matlab
devincob2 小时前
js原生、vue导出、react导出、axios ( post请求方式)跨平台导出下载四种方式的demo
javascript·vue.js·react.js
编程社区管理员2 小时前
React 发送短信验证码和验证码校验功能组件
前端·javascript·react.js
葡萄城技术团队2 小时前
迎接下一代 React 框架:Next.js 16 核心能力解读
javascript·spring·react.js
全马必破三2 小时前
React“组件即函数”
前端·javascript·react.js
不染尘.2 小时前
2025_11_7_刷题
开发语言·c++·vscode·算法
課代表2 小时前
JavaScript 中获取二维数组最大值
javascript·max·数组·递归·array·最大值·二维
似水এ᭄往昔2 小时前
【C++】--stack和queue
开发语言·c++
csbysj20202 小时前
R 绘图 - 散点图
开发语言